Hello Jonathan,

Thank you for your reply and feedback.

We are currently researching this scenario in order to attempt to reproduce and get to the root of the issue in this scenario - the fact that the grid is nested inside a splitter and the use of percentage heights may also have a bearing on the issue in addition to the overflow:hidden. You will be notified of any developments regarding this issue.

Thank you for choosing Infragistics !

Zdravko,

I am not sure I understand what you cannot discern.  I specify that there are 12 columns one of which is hidden.  You can see it in the code I sent.  With the holidays, I do not have time to develop a full working sample at this time.  I am not sure what more adding my model to the example would provide.  I think the important thing here is somewhere it is explicitly setting/allowing the overflow to be set to visible?  Otherwise the style below would make no difference.

#grid1_scroll{

overflow: auto !important;

    }

I am sorry I cannot be more helpful at this time, but with a valid work around I cannot spend more time on this issue.  I do hope you can resolve the porblem as I do not think this should be happening.

Thanks,

Jonathan

Hello,

 Thank you for the snippet code, but could you please send isolated sample in order to reproduce the issue, because as you said it is very specific and now the Model part is missing and I can not conclude how it is structured.

 It will be highly appreciated if you provide a sample. 

 Looking forward to hearing from you!

Best Regards,
Zdravko Kolev
Developer Support Engineer
Infragistics, Inc.

Thank you for your reply.

The version of firefox is 26.0.

Infragistics version 13.1.2292.

I have changed a lot of the names and deleted some of the non-grid content, but I think it is still capturing what I am doing with the grid.  Let me know if this does not help.  I did open the page you sent on my device and I did see your scroll bar, so it must be in one of the features or other things I am doing.  I was also wondering if it might occur because of the splitter.  The one thing I am not showing here is the initial css for the whole page.  Here is the css for the MainGridDiv:

.MainGridDiv

{

height: 40%;

clear: both;

overflow-x: hidden;

margin-bottom: 5px;

}

<script>

    $('#grid1').live('iggridrendered', function (evt, ui) {

        var temp = "@Model.selectedRow";

        if( temp != null)

        {

            $("#grid1").igGridFiltering('filter', ([{ fieldName: "rowID", expr: temp, cond: "equals" }]));

        }

    });

    $(function () {

        $("#splitter").igSplitter({

            height: "86%",

            orientation: "horizontal",

            panels: [{ collapsible: true }, { size: 200, collapsed: false, collapsible: true }],

            resizeEnded: function (evt, ui) {

                var $tabs = $('#tabs').tabs();

                var selected = $tabs.tabs('option', 'selected');

                if (selected == 0) {

                    $('#TabDiv').resize();

                }

            },

            expanded: function (evt, ui) {

                var $tabs = $('#tabs').tabs();

                var selected = $tabs.tabs('option', 'selected');

                if (selected == 0) {

                    $('#TabDiv').resize();

                }

            },

            collapsed: function (evt, ui) {

                var $tabs = $('#tabs').tabs();

                var selected = $tabs.tabs('option', 'selected');

                if (selected == 0) {

                    $('#TabDiv').resize();

                }

            }

        });

    });

    $(function () {

        $("#tabs").tabs({

            select: function (event, ui) {

                if (ui.index == 0) {

                     $('#TabDiv').resize();

                }

            },       

            beforeLoad: function (event, ui) {

                ui.jqXHR.error(function () {

                    ui.panel.html("Couldn't load this tab. We'll try to fix this as soon as possible.");

                });}

        });

    });

    $("#grid1").live("iggriddatarendered", function (evt, ui) {

        $('#grid1 tr').each(function () {

            if ($(this)[0].cells[6].textContent == "Cond1" && $(this)[0].cells[10].textContent == "ValueA")

                $(this).addClass("cssStyleClassA");

            if ($(this)[0].cells[6].textContent == "Cond1" && $(this)[0].cells[10].textContent == " ValueB")

                $(this).addClass("cssStyleClassB");

            if ($(this)[0].cells[6].textContent == "Cond1" && $(this)[0].cells[10].textContent == " ValueC")

                $(this).addClass("cssStyleClassC");

        })

    });

</script>

<body style="overflow:hidden">

         <div id="splitter">

            <div class="MainGridDiv">

                @(Html.Infragistics().Grid<ModelType>(Model.List.AsQueryable()).ID("grid1")

                   .AutoGenerateColumns(false)

                   .Columns(column =>

                   {

                       column.For(x => x.col1).Hidden(true).Column.Key="rowID";

                       column.For(x => x.col2);

                       column.For(x => x.col3);

                       column.For(x => x.col4);

                       column.For(x => x.col5);

                       column.For(x => x.col6);

                       column.For(x => x.col7);

                       column.For(x => x.col8);

                       column.For(x => x.col9);

                       column.For(x => x.col10);

                       column.For(x => x.col11);

                       column.For(x => x.col12);

                   })

                   .Features(features =>

                    {

                        features.Sorting().Type(OpType.Local);

features.Paging().Type(OpType.Local).PageSize(25).PageSizeDropDownLocation("hidden");                             features.Selection().MultipleSelection(false).AddClientEvent("rowSelectionChanged","changeTabs");

                             features.RowSelectors();

                             features.Filtering().Mode(FilterMode.Advanced);

                    })

                   .Height("100%")

                   .DataSourceUrl(Url.Action("PagingGetData"))

                   .DataBind().Render())

            </div> 

            <div class="TabDiv" id="TabDiv">        

                <div id="tabs">

              <ul>

                   <li>

                    <a href="#tabs-1">Tab 1</a>

                  </li>

                  <li>

                    <a href="#tabs-2"> Tab 2</a>

                  </li>

              </ul> 

            <div id="tabs-1" >   

               //Content

            </div> 

             <div id="tabs-2" >   

               //Content

            </div> 

        </div>

            </div>

         </div>

</body>

<script type="text/javascript">

    function changeTabs(event, args) {

        //Handle changing tab content based on selected row.

    }

</script>