AllowColumnHide and FrozenColumnCount

[Randy Strohman]

I have found an interesting scenario where the display property of some columns are turned off when they should be turned on. I am using a grid with UseStaticHeaders="True", AllowColumnHide="True" and FrozenColumnCount turned on (in my case set ="4"), and there is a horizontal scroll bar on the grid because there are 20+ columns.  On load the grid looks fine, but when use the horizontal scroll bar, then right-click a column heading and look at the Columns, any column between the last frozen column and the first visible column shows as not being checked when in fact it should be checked.  This allows the user to turn back on columns that were on in the first place.

Another issue I found is when you right-click a column heading, hover over columns, and turn on additional columns, the horizontal scrollbar does not change and you cannot scroll to the newly displayed columns.  This happens when the columns being turned on are off to the right of the last visible column being displayed on the webpage.

Here is my ASPX code for my radgrid and my javascript.  I am using Telerik version 2010.1.519.35

<telerik:RadGrid ID="rgWorkOrderDetails" OnNeedDataSource="rgWorkOrderDetails_OnNeedDataSource"
            runat="server" PageSize="10" AllowPaging="true" EnableHeaderContextFilterMenu="true"
            OnItemDataBound="rgWorkOrderDetails_OnItemDataBound" EnableHeaderContextMenu="true"
            CssClass="RadGridCustomClass" EnableLinqExpressions="false" OnItemCommand="rgWorkOrderDetails_ItemCommand"
            OnItemCreated="rgWorkOrderDetails_ItemCreated">
            <ClientSettings AllowColumnHide="true" AllowColumnsReorder="true">
                <ClientEvents OnGridCreated="GridCreatedwScroll" />
                <Resizing AllowColumnResize="true" EnableRealTimeResize="true" />
                <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="4" />
            </ClientSettings>
            <PagerStyle Mode="NextPrevAndNumeric" />
            <GroupingSettings CaseSensitive="false" />
            <ExportSettings ExportOnlyData="true" IgnorePaging="true"
                OpenInNewWindow="true" />
            <MasterTableView CommandItemDisplay="Top" AllowFilteringByColumn="true" AllowSorting="true"
                AutoGenerateColumns="false" Visible="true" AllowMultiColumnSorting="true">
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="SampleID" SortOrder="Ascending" />
                    <telerik:GridSortExpression FieldName="ReportHeaderDisplayOrder" SortOrder="Ascending" />
                    <telerik:GridSortExpression FieldName="ReportName" SortOrder="Ascending" />
                    <telerik:GridSortExpression FieldName="DisplayOrder" SortOrder="Ascending" />
                    <telerik:GridSortExpression FieldName="AnalyteName" SortOrder="Ascending" />
                </SortExpressions>
                <NoRecordsTemplate>
                    There is no Sample Data to display
                </NoRecordsTemplate>
                <Columns>
                    <telerik:GridBoundColumn DataField="ReportHeaderDisplayOrder" UniqueName="ReportHeaderDisplayOrder"
                        Visible="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="DisplayOrder" UniqueName="DisplayOrder" Visible="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="clientsampleid" DataField="ClientSampleID" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Client Sample ID" AutoPostBackOnFilter="true">
                        <ItemStyle Width="90px" HorizontalAlign="Center" />
                        <HeaderStyle Width="90px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="sampleid" DataField="SampleID" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Lab Sample ID" AutoPostBackOnFilter="true">
                        <ItemStyle Width="105px" HorizontalAlign="Center" />
                        <HeaderStyle Width="105px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridDateTimeColumn UniqueName="collectiondate" DataField="CollectionDate"
                        DataFormatString="{0:M/dd/yyyy hh:ss tt}" FilterControlWidth="60%" CurrentFilterFunction="GreaterThanOrEqualTo"
                        HeaderText="Collection Date" AutoPostBackOnFilter="true">
                        <ItemStyle Width="85px" HorizontalAlign="Center" />
                        <HeaderStyle Width="85px" HorizontalAlign="Center" />
                    </telerik:GridDateTimeColumn>
                    <telerik:GridBoundColumn UniqueName="analytename" DataField="AnalyteName" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Analyte Name" AutoPostBackOnFilter="true">
                        <ItemStyle Width="125px" HorizontalAlign="Center" />
                        <HeaderStyle Width="125px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="result" DataField="Result" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Result" EmptyDataText="--" ConvertEmptyStringToNull="true"
                        AutoPostBackOnFilter="true">
                        <ItemStyle Width="60px" HorizontalAlign="Center" />
                        <HeaderStyle Width="60px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="units" DataField="Units" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Units" EmptyDataText="--" ConvertEmptyStringToNull="true"
                        AutoPostBackOnFilter="true">
                        <ItemStyle Width="100px" HorizontalAlign="Center" />
                        <HeaderStyle Width="100px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn DataField="Qualifier" UniqueName="qualifier" FilterControlWidth="60%"
                        HeaderText="Qualifier" CurrentFilterFunction="Contains" ConvertEmptyStringToNull="true">
                        <HeaderStyle Width="75px" HorizontalAlign="Center" />
                        <ItemTemplate>
                            <asp:Label ID="lblStatus" runat="server" Text='<%#Convert.ToBoolean(Eval("Qualifier").ToString() == "")? "--" : Eval("Qualifier") %>'></asp:Label>
                        </ItemTemplate>
                        <ItemStyle Width="75px" HorizontalAlign="Center" />
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn UniqueName="reportlimit" DataField="ReportLimit" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Report Limit" EmptyDataText="--"
                        ConvertEmptyStringToNull="true" AutoPostBackOnFilter="true">
                        <ItemStyle Width="60px" HorizontalAlign="Center" />
                        <HeaderStyle Width="60px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="mcl" DataField="MCL" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="MCL" AutoPostBackOnFilter="true">
                        <ItemStyle Width="60px" HorizontalAlign="Center" />
                        <HeaderStyle Width="60px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="method" DataField="Method" EmptyDataText="--"
                        FilterControlWidth="60%" CurrentFilterFunction="Contains" HeaderText="Method"
                        AutoPostBackOnFilter="true">
                        <ItemStyle Width="80px" HorizontalAlign="Center" />
                        <HeaderStyle Width="80px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Display="True" UniqueName="ReportName" EmptyDataText="--"
                        ConvertEmptyStringToNull="true" DataField="ReportName" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Report Name" AutoPostBackOnFilter="true">
                        <ItemStyle Width="100px" HorizontalAlign="Center" />
                        <HeaderStyle Width="100px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="matrix" DataField="Matrix" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Matrix" AutoPostBackOnFilter="true">
                        <ItemStyle Width="80px" HorizontalAlign="Center" />
                        <HeaderStyle Width="80px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="begindepth" DataField="BeginDepth" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Begin Depth" AutoPostBackOnFilter="true">
                        <ItemStyle Width="50px" HorizontalAlign="Center" />
                        <HeaderStyle Width="50px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="enddepth" DataField="EndDepth" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="End Depth" AutoPostBackOnFilter="true">
                        <ItemStyle Width="50px" HorizontalAlign="Center" />
                        <HeaderStyle Width="50px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridDateTimeColumn UniqueName="datereceived" DataField="DateReceived" FilterControlWidth="60%"
                        CurrentFilterFunction="GreaterThanOrEqualTo" HeaderText="Date Received" AutoPostBackOnFilter="true">
                        <ItemStyle Width="100px" HorizontalAlign="Center" />
                        <HeaderStyle Width="100px" HorizontalAlign="Center" />
                    </telerik:GridDateTimeColumn>
                    <telerik:GridDateTimeColumn UniqueName="analysisdate" DataField="AnalysisDate" FilterControlWidth="60%"
                        CurrentFilterFunction="GreaterThanOrEqualTo" HeaderText="Analysis Date" AutoPostBackOnFilter="true">
                        <ItemStyle Width="85px" HorizontalAlign="Center" />
                        <HeaderStyle Width="85px" HorizontalAlign="Center" />
                    </telerik:GridDateTimeColumn>
                    <telerik:GridBoundColumn Display="false" UniqueName="analyzedby" ConvertEmptyStringToNull="true"
                        EmptyDataText="--" DataField="AnalyzedBy" FilterControlWidth="60%" CurrentFilterFunction="Contains"
                        HeaderText="Analyzed By" AutoPostBackOnFilter="true">
                        <ItemStyle Width="80px" HorizontalAlign="Center" />
                        <HeaderStyle Width="80px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridDateTimeColumn Display="false" UniqueName="extracteddate" DataField="ExtractedDate"
                        FilterControlWidth="60%" CurrentFilterFunction="GreaterThanOrEqualTo" HeaderText="Extracted Date"
                        AutoPostBackOnFilter="true">
                        <ItemStyle Width="85px" HorizontalAlign="Center" />
                        <HeaderStyle Width="85px" HorizontalAlign="Center" />
                    </telerik:GridDateTimeColumn>
                    <telerik:GridBoundColumn Display="false" UniqueName="fieldsampler" DataField="FieldSampler"
                        FilterControlWidth="60%" CurrentFilterFunction="Contains" HeaderText="Field Sampler"
                        AutoPostBackOnFilter="true">
                        <ItemStyle Width="80px" HorizontalAlign="Center" />
                        <HeaderStyle Width="80px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Display="false" UniqueName="tagno" EmptyDataText="--" ConvertEmptyStringToNull="true"
                        DataField="TagNo" FilterControlWidth="60%" CurrentFilterFunction="Contains" HeaderText="Tag #"
                        AutoPostBackOnFilter="true">
                        <ItemStyle Width="80px" HorizontalAlign="Center" />
                        <HeaderStyle Width="80px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Display="false" UniqueName="sitetype" EmptyDataText="--"
                        ConvertEmptyStringToNull="true" DataField="SiteType" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Site Type" AutoPostBackOnFilter="true">
                        <ItemStyle Width="80px" HorizontalAlign="Center" />
                        <HeaderStyle Width="80px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Display="false" UniqueName="sampleprogram" EmptyDataText="--"
                        ConvertEmptyStringToNull="true" DataField="SampleProgram" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Sample Program" AutoPostBackOnFilter="true">
                        <ItemStyle Width="80px" HorizontalAlign="Center" />
                        <HeaderStyle Width="80px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Display="false" UniqueName="testname" EmptyDataText="--"
                        ConvertEmptyStringToNull="true" DataField="TestName" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Test Name" AutoPostBackOnFilter="true">
                        <ItemStyle Width="80px" HorizontalAlign="Center" />
                        <HeaderStyle Width="80px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Display="false" UniqueName="testcode" EmptyDataText="--"
                        ConvertEmptyStringToNull="true" DataField="TestCode" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Test Code" AutoPostBackOnFilter="true">
                        <ItemStyle Width="80px" HorizontalAlign="Center" />
                        <HeaderStyle Width="80px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Display="false" UniqueName="casno" EmptyDataText="--" ConvertEmptyStringToNull="true"
                        DataField="CasNo" FilterControlWidth="60%" CurrentFilterFunction="Contains" HeaderText="Cas #"
                        AutoPostBackOnFilter="true">
                        <ItemStyle Width="60px" HorizontalAlign="Center" />
                        <HeaderStyle Width="60px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Display="false" UniqueName="WorkOrderNumber" EmptyDataText="--"
                        ConvertEmptyStringToNull="true" DataField="WorkOrderNumber" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Work Order Number" AutoPostBackOnFilter="true">
                        <ItemStyle Width="100px" HorizontalAlign="Center" />
                        <HeaderStyle Width="100px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Display="false" UniqueName="ClientName" EmptyDataText="--"
                        ConvertEmptyStringToNull="true" DataField="ClientName" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Client Name" AutoPostBackOnFilter="true">
                        <ItemStyle Width="100px" HorizontalAlign="Center" />
                        <HeaderStyle Width="100px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Display="false" UniqueName="ProjectName" EmptyDataText="--"
                        ConvertEmptyStringToNull="true" DataField="ProjectName" FilterControlWidth="60%"
                        CurrentFilterFunction="Contains" HeaderText="Project Name" AutoPostBackOnFilter="true">
                        <ItemStyle Width="100px" HorizontalAlign="Center" />
                        <HeaderStyle Width="100px" HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="AnalytesKey" DataField="AnalytesKey" Visible="false" ConvertEmptyStringToNull="true" EmptyDataText="" />
                    <telerik:GridBoundColumn UniqueName="SamplesKey" DataField="SamplesKey" Visible="false" ConvertEmptyStringToNull="true" EmptyDataText="" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

<telerik:RadCodeBlock ID="rcb1" runat="server">

       <script type="text/javascript">

           function attachEventHandler(element, eventToHandle, eventHandler) {

               if (element.attachEvent) {

                   element.attachEvent(eventToHandle, eventHandler);

               } else if (element.addEventListener) {

                   element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);

               } else {

                   element[eventToHandle] = eventHandler;

               }

           }

           attachEventHandler(window, "onresize", function () {

               // the code you want to run when the browser is resized

               resizeGrid();

           });

           var offsetHeight = 113; 

           
           function GridCreatedwScroll(sender, args) {

               //rgWorkOrderDetails

               var scrollArea = sender.GridDataDiv;

               var dataHeight = getSize();

               scrollArea.style.height = dataHeight - offsetHeight + "px";

               if (sender.ClientSettings.Scrolling.UseStaticHeaders) {

                   var header = document.getElementById("<%= rgWorkOrderDetails.ClientID %>" + "_GridHeader");

                   scrollArea.style.height = dataHeight - offsetHeight - header.offsetHeight + "px";

               }

           }

           function resizeGrid() {

               //Resize each grid on this page on page load and on page resize                

               var gridHeight = getSize();

               var scrollArea = document.getElementById("<%= rgWorkOrderDetails.ClientID %>" + "_GridData");

               if (scrollArea) {

                   scrollArea.style.height = gridHeight - offsetHeight + "px";

               }

               if (document.getElementById("<%= rgWorkOrderDetails.ClientID %>" + "_GridHeader")) {

                   //Find and subtract header height

                   var header = document.getElementById("<%= rgWorkOrderDetails.ClientID %>" + "_GridHeader");

                   scrollArea.style.height = gridHeight - offsetHeight - header.offsetHeight + "px";

                   gridHeight = gridHeight - header.offsetHeight;

               }

               if (document.getElementById("<%= rgWorkOrderDetails.ClientID %>" + "_ctl01_Pager")) {

                   var pagerArea = document.getElementById("<%= rgWorkOrderDetails.ClientID %>" + "_ctl01_Pager");

                   scrollArea.style.height = gridHeight - offsetHeight - pagerArea.offsetHeight + "px";

               }

           }

       </script>

   </telerik:RadCodeBlock>

[Tsvetoslav]

Hello Randy,

Concerning your first question - the behavior you are experiencing is expected and is due to the way the frozen columns mechanism is implemented. The scroll that appears when FrozenColumns are switched on is actually a fake one and when you drag it, the grid table does not scroll within a div container (which is extremely difficult to implement) but actually recalculates its width, srolled distance, etc. and hides/shows the corresponding columns by setting the table cells display property to invisible. That's why all columns that have been scrolled out of sight are indeed hidden columns and so they appear in the context menu.

The second observation of yours is valid and we shall need some time to investigate it and will get back to you with the result.

Best wishes,
Tsvetoslav
the Telerik team