This is a migrated thread and some comments may be shown as answers.

Rad Grid Column Resizing Issue

6 Answers 180 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tracy
Top achievements
Rank 1
Tracy asked on 06 May 2012, 11:26 PM
Hi,

I have 2 problems with my rad grid.

My first problem is that my columns are not being resized correctly when I hide a column.  I have the HeaderContextMenu enabled and when i choose to hide a column the column is hidden but the column width of all the other columns are not sized to their set width. 
For example if I have the following columns
Column 1 - Width=50px
Column 2 - Width=100px
Column 3 - Width= 120px
Column 4 - Width = 200px
If I hide column 2 then the width of column 3 becomes 100px and the width of column 4 becomes 120px.


My second problem is that if I have a column hidden in a grid and then resize another column,  the grid thinks the column being resized is the column before the column I am actually resizing.
For example if I have the following columns
Column 1 - Width=50px
Column 2 - Width=100px
Column 3 - Width= 120px
Column 4 - Width = 200px

If I hide column 2 and then resize column 4 the grid thinks column 3 is being resized.  I tested which column is being resized using the following function.

function ColumnResized(sender, eventArgs) {

alert(

"Column with Index: " + eventArgs.get_gridColumn().get_element().cellIndex + " Name " +  eventArgs.get_gridColumn().get_uniqueName() + " was resized, width: " + eventArgs.get_gridColumn().get_element().offsetWidth);

}

What is returned from this function is the name and index of column 3 not column 4.

I have tried setting the TableLayout="fixed" but this did not solve my problem.

As always, I appreciate any help.

Tracy

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WBF SYS Email Addresses.aspx.vb" Inherits="IPS_Gateway.WBF_SYS_Email_Addresses" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
<head id="Head1" runat="server">
    <title></title>
 
     <script  type="text/javascript" >
        function ColumnResized(sender, eventArgs) {
            alert("Column with Index: " + eventArgs.get_gridColumn().get_element().cellIndex + " Name " + eventArgs.get_gridColumn().get_uniqueName() + " was resized, width: " + eventArgs.get_gridColumn().get_element().offsetWidth);
        }
  </script>
     
</head>
<body>
    <form id="form1" runat="server">
    <act:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
    <telerik:RadWindowManager ID="rwmManager" runat="server"></telerik:RadWindowManager
    <telerik:RadAjaxManager ID="ajaxManager" runat="server" DefaultLoadingPanelID="loading">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rgvMainGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rgvMainGrid" LoadingPanelID="loading" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
          
        <telerik:RadAjaxLoadingPanel ID="loading" runat="server" Skin="" Transparency="30" >
             <div >
            <asp:Image ID="imgLoading" runat="server" ImageUrl="<%$ Resources:Images,Loading6%>" AlternateText="loading" />
        </div>       
        </telerik:RadAjaxLoadingPanel>
 
 
    <asp:SqlDataSource ID="SQLDS_EmailAddresses"        runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_EmailAddresses-Sel-Ins-Upd-Del]" />
    <asp:SqlDataSource ID="SQLDS_EmailAddress"          runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_EmailAddresses-Sel-Ins-Upd-Del]" />
    <asp:SqlDataSource ID="SQLDS_EmployeeLogin"         runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_EmailAddresses-Sel-Ins-Upd-Del]" />       
    <asp:SqlDataSource ID="SQLDS_EmailGroup"            runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_EmailGroups-Sel-Ins-Upd-Del]" />
    <asp:SqlDataSource ID="SQLDS_EmailName"             runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_EmailAddresses-Sel-Ins-Upd-Del]" />
    <asp:SqlDataSource ID="SQLDS_EmailAddressGroups"    runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_EmailGroupAddresses-Sel-Ins-Del]"/>
    <asp:SqlDataSource ID="SQLDS_EmployeeStatus"        runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Employee].[DSP_EmployeeIdentifiers-Sel-Ins-Upd-Del]" />
    <asp:SqlDataSource ID="SQLDS_EmployeeType"          runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Employee].[DSP_EmployeeIdentifiers-Sel-Ins-Upd-Del]" />
    <asp:SqlDataSource ID="SQLDS_CompanyCode"           runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Company].[DSP_CompanyMaster-Sel-Ins-Upd-Del]" />
    <asp:SqlDataSource ID="SQLDS_DivisionCode"          runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Company].[DSP_CompanyIdentifiers-Sel-Ins-Upd-Del]" />
    <asp:SqlDataSource ID="SQLDS_DepartmentCode"        runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Company].[DSP_CompanyIdentifiers-Sel-Ins-Upd-Del]" />
  
    <asp:panel ID="pnlPage"   runat="server"   CssClass="css_GPC01_Panel_MainContent">     
        <wuc:PageHeader id="wucPageHeader" runat="server"></wuc:PageHeader>                         
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"  cssClass="css_GPC01_Panel_PageContent">
            <div style="width:450px; float: left;">
                        <telerik:RadGrid ID="rgvMainGrid"             runat="server"                  DataSourceID="SQLDS_EmailAddresses"  
                                         EnableEmbeddedSkins="true"         Skin="Office2010Silver"         CssClass="css_GRD01_Grid_Master"    Height="560px"  Width="1230px"
                                         EnableViewState="true"             AutoGenerateColumns="false"     AllowMultiRowSelection="false"      AllowFilteringByColumn="true"
                                         AllowAutomaticDeletes="true"       AllowAutomaticInserts="true"    AllowAutomaticUpdates="true"                                  
                                         EnableHeaderContextMenu="true"     EnableHeaderContextFilterMenu="true"
                                         AllowSorting="true"                EnableLinqExpressions="false"   AllowPaging="true"                 PageSize="50">                                 
                            <ItemStyle   Wrap="false" />
                            <PagerStyle AlwaysVisible="true"    Mode="NextPrevNumericAndAdvanced"/>
                            <ClientSettings AllowColumnsReorder="false" EnablePostBackOnRowClick="true" AllowExpandCollapse="true" EnableRowHoverStyle="true"   
                                <ClientEvents    OnColumnResized="ColumnResized" />                                                             
                                <Resizing   AllowColumnResize="True"    AllowRowResize="False"          EnableRealTimeResize="True"     ResizeGridOnColumnResize="false" ></Resizing>                                     
                                <Selecting      AllowRowSelect="true" />
                                <Scrolling      AllowScroll="true"       />                       
                            </ClientSettings>
                            <HierarchySettings  ExpandTooltip="Click to Show/Edit Email Groups"      CollapseTooltip="Click to Hide Email Groups" />
                            <MasterTableView    DataSourceID="SQLDS_EmailAddresses"     DataKeyNames="EmailAddressId"       Name="EmailAddresses"
                                                EnableViewState="true"     AllowFilteringByColumn="true"
                                                AllowSorting="true"        AllowMultiColumnSorting="true"     AllowNaturalSort="false" OverrideDataSourceControlSorting="true"
                                                EditMode="InPlace"         CommandItemDisplay="Top"  >                               
                            <CommandItemTemplate >
                                    <div style="padding: 5px 5px;">
                                        <asp:LinkButton ID="lbtAdd"        runat="server" CommandName="InitInsert"       ToolTip="Add New Group"            style="position:absolute;left:10px;font-size:12px;"  Visible='<%# rgvMainGrid.EditIndexes.Count=0 or Not rgvMainGrid.MasterTableView.IsItemInserted %>'>    <asp:Image ID="imgAdd"      runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,AddRecord16%>" /> Add </asp:LinkButton>  
                                        <asp:LinkButton ID="lbtEdit"       runat="server" CommandName="EditSelected"     ToolTip="Edit Group"               style="position:absolute;left:60px;font-size:12px;"  Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>'>   <asp:Image ID="imgEdit"     runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,EditRecord16%>"/> Edit </asp:LinkButton>  
                                        <asp:LinkButton ID="lbtCancel"     runat="server" CommandName="CancelAll"        ToolTip="Cancel Edit/Add"          style="position:absolute;left:10px;font-size:12px;"  Visible='<%# rgvMainGrid.EditIndexes.Count > 0 Or rgvMainGrid.MasterTableView.IsItemInserted %>'>      <asp:Image ID="imgCancel"   runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,CancelRecord16%>" /> Cancel </asp:LinkButton>  
                                        <asp:LinkButton ID="lbtSaveNew"    runat="server" CommandName="PerformInsert"    ToolTip="Save New Group"           style="position:absolute;left:75px;font-size:12px;"  Visible='<%# rgvMainGrid.MasterTableView.IsItemInserted%>'>                                                  <asp:Image ID="imgSaveNew"  runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,SaveRecord16%>" /> Save New</asp:LinkButton>  
                                        <asp:LinkButton ID="lbtDelete"     runat="server" CommandName="DeleteSelected"   ToolTip="Delete Group"             style="position:absolute;left:110px;font-size:12px;" Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>' OnClientClick="javascript:return confirm('You have selected to delete this user.\nThis process CANNOT BE UNDONE.\n\rDo you want to continue?')"> <asp:Image ID="imgDelete"        runat="server" CssClass="css_GFS01_Image_Align"  ImageURL="<%$ Resources:Images,DeleteRecord16%>" />Delete </asp:LinkButton>  
                                        <asp:LinkButton ID="lbtSave"       runat="server" CommandName="UpdateEdited"     ToolTip="Save Changes"             style="position:absolute;left:75px;font-size:12px;"  Visible='<%# rgvMainGrid.EditIndexes.Count > 0 AND Not rgvMainGrid.MasterTableView.IsItemInserted%>'>  <asp:Image ID="imgSave"     runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,SaveRecord16%>" />  Update </asp:LinkButton>  
                                        <asp:LinkButton ID="lbtFilters"    runat="server" CommandName="ShowHideFilters"  ToolTip="Show/Hide Group Filters"  style="position:absolute;left:1085px;font-size:12px;"> <asp:Image ID="imgFilter"  runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,FilterRecord16%>" /> Filter</asp:LinkButton>  
                                        <asp:LinkButton ID="lbtRefresh"    runat="server" CommandName="RebindGrid"       ToolTip="Refresh Group Grid"       style="position:absolute;left:1155px;font-size:12px;"> <asp:Image id="imgRefresh" runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$Resources:Images, ReloadBlue16 %>"  />Refresh</asp:LinkButton>                    
                                    </div>
                                </CommandItemTemplate>
                                    <Columns>  
                                    <telerik:GridBoundColumn    DataField="EmailAddressId"         UniqueName="EmailAddressId"            
                                                            HeaderText="Id"                    HeaderStyle-HorizontalAlign="Left"   HeaderStyle-Width="35px"   AllowSorting="false"             ReadOnly="true" >
                                    <FilterTemplate></FilterTemplate>
                                </telerik:GridBoundColumn>
                                                 
                                    <telerik:GridBoundColumn     DataField="EmployeeLogin"          UniqueName="EmployeeLogin" 
                                                                             HeaderText="Login Id"              HeaderStyle-HorizontalAlign="Left"   HeaderStyle-Width="120px"   SortExpression="EmployeeLogin"     ColumnEditorID="gtcEditor1">
                                        <FilterTemplate>
                                                        <telerik:RadComboBox ID="rcbFilterEmployeeLogin"            runat="server"  EnableEmbeddedSkins="true" Skin="Windows7" Width="115px"
                                                                             DataValueField="EmployeeLogin"                 DataTextField="EmployeeLogin"           MarkFirstMatch="true"                 
                                                                             EnableLoadOnDemand="true"                      OnItemsRequested="MasterFilter_OnItemsRequested"  
                                                                             OnPreRender="MasterFilter_PreRender"           OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged">                                                                     
                                                          
                                                        </telerik:RadComboBox>
                                                    </FilterTemplate>
                                    </telerik:GridBoundColumn>
 
                                    <telerik:GridBoundColumn     DataField="EmailName"              UniqueName="EmailName" 
                                                                 HeaderText="Name"                  HeaderStyle-HorizontalAlign="Left"  HeaderStyle-Width="200px"   SortExpression="EmailName"          ColumnEditorID="gtcEditor1"     >                                   
                                        <FilterTemplate>
                                                        <telerik:RadComboBox runat="server" ID="rcbFilterEmailName"         Width="190px"
                                                                             DataTextField="EmailName"                      DataValueField="EmailName"          MarkFirstMatch="true"       
                                                                             EnableLoadOnDemand="true"                      OnItemsRequested="MasterFilter_OnItemsRequested"  
                                                                             OnPreRender="MasterFilter_PreRender"           OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged">                                                                     
                                                  
                                                        </telerik:RadComboBox>                                                                                                                              
                                                    </FilterTemplate>
                                    </telerik:GridBoundColumn>                               
 
                                    <telerik:GridBoundColumn     DataField="EmployeeNumber"         UniqueName="EmployeeNumber"
                                                                 HeaderText="Employee"              HeaderStyle-HorizontalAlign="Left"  HeaderStyle-Width="65px"   SortExpression="EmployeeNumber"                ReadOnly="true">
                                        <FilterTemplate>  </FilterTemplate>
                                    </telerik:GridBoundColumn>
 
                                    <telerik:GridBoundColumn        DataField="EmailAddress"            UniqueName="EmailAddress"          
                                                                    HeaderText="Email Address"          HeaderStyle-HorizontalAlign="Left"     HeaderStyle-Width="240px"   SortExpression="EmailAddress"               ColumnEditorID="gtcEditor1">                                   
                                            <FilterTemplate>
                                                <telerik:RadComboBox runat="server" ID="rcbFilterEmailAddress"    Width="230px"
                                                                     DataTextField="EmailAddress"            DataValueField="EmailAddress"         
                                                                             EnableLoadOnDemand="true"                      OnItemsRequested="MasterFilter_OnItemsRequested"   MarkFirstMatch="true" 
                                                                             OnPreRender="MasterFilter_PreRender"           OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged">                                                                     
                                                </telerik:RadComboBox>                                                                                                                                 
                                            </FilterTemplate>
                                    </telerik:GridBoundColumn>                                                                       
                                                                            <telerik:GridBoundColumn        DataField="CompanyCode"             UniqueName="CompanyCode"       
                                                                            HeaderText="Company"                HeaderStyle-HorizontalAlign="Left"     HeaderStyle-Width="65px"  
                                                                            SortExpression="CompanyCode"        ReadOnly="true">
                                                <FilterTemplate>
                                                    <telerik:RadComboBox runat="server" ID="rcbFilterCompanyCode"    Width="55px"
                                                                         DataValueField="CompanyCode"               DataTextField="CompanyCode"    
                                                                             EnableLoadOnDemand="true"                      OnItemsRequested="MasterFilter_OnItemsRequested"   MarkFirstMatch="true" 
                                                                             OnPreRender="MasterFilter_PreRender"           OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged">                                                                     
                                                    </telerik:RadComboBox>
                                                </FilterTemplate>
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn        DataField="DivisionCode"                UniqueName="DivisionCode"        
                                                                            HeaderText="Division"                   HeaderStyle-HorizontalAlign="Left"     HeaderStyle-Width="65px"  
                                                                            SortExpression="DivisionCode"           ReadOnly="true">
                                                <FilterTemplate>
                                                    <telerik:RadComboBox runat="server" ID="rcbFilterDivisionCode"  Width="55px"
                                                                         DataValueField="IdentifierCode"     DataTextField="IdentifierCode" AllowCustomText="true"                                   
                                                                             EnableLoadOnDemand="true"                      OnItemsRequested="MasterFilter_OnItemsRequested"   MarkFirstMatch="true" 
                                                                             OnPreRender="MasterFilter_PreRender"           OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged">                                                                     
                                                    </telerik:RadComboBox>
                                                </FilterTemplate>
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn     DataField="DepartmentCode"                  UniqueName="DepartmentCode"       
                                                                         HeaderText="Department"                     HeaderStyle-HorizontalAlign="Left"     HeaderStyle-Width="65px"  
                                                                         SortExpression="DepartmentCode"             ReadOnly="true">
                                                <FilterTemplate>
                                                    <telerik:RadComboBox runat="server" ID="rcbFilterDepartmentCode" Width="55px"
                                                                         DataValueField="IdentifierCode"      DataTextField="IdentifierCode"  AllowCustomText="true"                                  
                                                                             EnableLoadOnDemand="true"                      OnItemsRequested="MasterFilter_OnItemsRequested"   MarkFirstMatch="true" 
                                                                             OnPreRender="MasterFilter_PreRender"           OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged">                                                                     
                                                    </telerik:RadComboBox>
                                                </FilterTemplate>
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn     DataField="EmployeeType"                    UniqueName="EmployeeType"       
                                                                         HeaderText="Employee Type"                  HeaderStyle-HorizontalAlign="Left"     HeaderStyle-Width="100px"  
                                                                         SortExpression="EmployeeType"               ReadOnly="true">
                                                <FilterTemplate>
                                                    <telerik:RadComboBox runat="server" ID="rcbFilterEmployeeType"   Width="90px"
                                                                         DataValueField="Level2Code"                 DataTextField="Level2Code"                                   
                                                                             EnableLoadOnDemand="true"                      OnItemsRequested="MasterFilter_OnItemsRequested"   MarkFirstMatch="true" 
                                                                             OnPreRender="MasterFilter_PreRender"           OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged">                                                                     
                                                    </telerik:RadComboBox>
                                                </FilterTemplate>
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="EmployeeStatus"                         UniqueName="EmployeeStatus"   
                                                                         HeaderText="Employee Status"                   HeaderStyle-HorizontalAlign="Left"    HeaderStyle-Width="90px"  
                                                                         SortExpression="EmployeeStatus"                ReadOnly="true" >
                                                <FilterTemplate>
                                                    <telerik:RadComboBox runat="server" ID="rcbFilterEmployeeStatus"    Width="80px"  
                                                                         DataTextField="Level2Code"                     DataValueField="Level2Code"        
                                                                             EnableLoadOnDemand="true"                      OnItemsRequested="MasterFilter_OnItemsRequested"   MarkFirstMatch="true" 
                                                                             OnPreRender="MasterFilter_PreRender"           OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged">                                                                     
                                                    </telerik:RadComboBox>                                                                                                                                 
                                                </FilterTemplate>
                                            </telerik:GridBoundColumn>
 
                                 
                                </Columns>                               
                                <DetailTables>
                                   <telerik:GridTableView   DataKeyNames="EmailGroupId, GroupEmailAddressId"               HierarchyLoadMode="ServerOnDemand"    Name="EmailGroups" 
                                                            EditMode="InPlace"                  Caption="To Add New User, Check The Box Next To The User You Want To Add.     To Remove A User, Uncheck The Box Next To The User You Want To Remove.     To Show All Users,  Select ALL From The Selected Filter Option."
                                                            cssClass="css_GRD01_Grid_Detail"    CommandItemDisplay="Top"              AllowMultiColumnSorting="true"  OverrideDataSourceControlSorting="true"     
                                                            Width="1160px"                      PageSize="500" >
                                        <CommandItemTemplate>
                                            <div>
                                                <asp:Label ID="lblTitle"              runat="server" Text="Email Groups"  Font-Bold ="true" Width="1000px"/>
                                                <asp:LinkButton ID="lbtFilters"       runat="server" CommandName="ShowHideFiltersDetail"        ToolTip="Show/Hide User Filters"          ><asp:Image ID="imgFilter"  runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,FilterRecord16%>" /> Filter</asp:LinkButton>  
                                                <asp:LinkButton ID="lbtRefresh"       runat="server" CommandName="RebindGridDetail"             ToolTip="Refresh User Grid"               ><asp:Image id="imgRefresh" runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$Resources:Images, ReloadBlue16 %>"  />Refresh</asp:LinkButton>                    
                                            </div>
                                        </CommandItemTemplate>
                                        <Columns>
                                                <telerik:GridBoundColumn        DataField="EmailGroupId"        UniqueName="EmailGroupId"        Visible="false" DataType="System.Int32" />                                               
                                                <telerik:GridBoundColumn        DataField="GroupEmailAddressId" UniqueName="GroupEmailAddressId" Visible="false" DataType="System.Int32" />
                                            <telerik:GridBoundColumn DataField="SelectedStatus"   UniqueName="SelectedStatus"     Visible="false"> </telerik:GridBoundColumn>
                                            <telerik:GridTemplateColumn     UniqueName="gtcSelectedStatus"           HeaderText="Selected"         HeaderStyle-Width="50px"     HeaderStyle-HorizontalAlign="Center"    ItemStyle-HorizontalAlign="Center"  >
                                                <ItemTemplate >
                                                    <asp:CheckBox id="chkSelectedStatus"  runat="server"             Checked='<%# Bind("SelectedStatus") %>'  AutoPostBack="true" OnCheckedChanged="chkOption_OnCheckChanged" />
                                                </ItemTemplate>  
                                                <FilterTemplate>
                                                    <telerik:RadComboBox runat="server" ID="rcbFilterSelectedStatus"
                                                                         AutoPostBack="true"        AllowCustomText="true"
                                                                         EnableEmbeddedSkins="true" Skin="Windows7" Width="45px"         MarkFirstMatch="true"                                                     
                                                                         OnPreRender="DetailFilter_PreRender"  OnSelectedIndexChanged="DetailFilter_OnSelectedIndexChanged">
                                                        <Items>
                                                            <telerik:RadComboBoxItem Text="True" />
                                                            <telerik:RadComboBoxItem Text="False" />
                                                        </Items>                               
                                                    </telerik:RadComboBox>                                                                                                                                 
                                                </FilterTemplate>
                                            </telerik:GridTemplateColumn>                                
                                               <telerik:GridBoundColumn DataField="EmailGroup"     UniqueName="EmailGroup"      HeaderText="Group"   HeaderStyle-HorizontalAlign="Left"      HeaderStyle-Width="270px"    SortExpression="EmailGroup" >
                                                         <FilterTemplate>
                                                            <telerik:RadComboBox runat="server" ID="rcbFilterEmailGroup"        DataSourceID="SQLDS_EmailGroup"       DataTextField="EmailGroup"    DataValueField="EmailGroup"
                                                                                 AppendDataBoundItems="true"                    AutoPostBack="true"                    AllowCustomText="true"
                                                                                 EnableEmbeddedSkins="true"                     Skin="Windows7"         Width="260px"        MarkFirstMatch="true"                                               
                                                                                 OnPreRender="DetailFilter_PreRender"           OnSelectedIndexChanged="DetailFilter_OnSelectedIndexChanged">
                                                            </telerik:RadComboBox>                                                                                                                                 
                                                        </FilterTemplate>
                                                </telerik:GridBoundColumn>
                                        </Columns>
                                    </telerik:GridTableView>
                                </DetailTables>                                
                            </MasterTableView>
                        </telerik:RadGrid>
           </div>          
                </telerik:RadAjaxPanel>
        <telerik:GridTextBoxColumnEditor ID="gtcEditor1" runat="server" TextBoxStyle-Width="200px" />  
 
</asp:panel>
</form>
</body>
</html>


6 Answers, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 10 May 2012, 09:51 AM
Hello Tracy,

You can resolve the first issue by enabling the feature ResizeGridOnColumnResize. Otherwise on resizing the browser tries to compensate the width of other column and they are resizing too.

About the other issue, it happens only in the old browsers (IE6/7). The reason for this behavior is that, in these browsers, the HTML TH element (the header cell) is removed from the DOM when the column is hidden, and re-added when the column is shown. This is required to implement proper column show/hide functionality in these browsers.

When the header is removed from the DOM, the cellIndex of the TH elements that are left visible no longer contain the original values when all the columns are visible. This means that, when successive columns are hidden, the cellIndex of the columns is one and the same. For example, when cell at index 1 is removed, cell at index 2 comes to position 1 and  gets a cellIndex value of 1. When you try to remove the second next cell, it has a position 1 instead of the required 2. This breaks the show/hide logic.

To work around this problem, the cell index should be the actual index of the columns in the array of client column objects in the GridTableView instance. Therefore, you need to manually loop over all grid columns, check the unique name of the column and return the position of the column in the array.

I hope this helps.

Kind regards,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Tracy
Top achievements
Rank 1
answered on 11 May 2012, 02:47 AM
Hi Galin,

Thank you for your response.  Your solution fixed my first problem. 

I am having a problem implementing your solution to my second problem. 

To work around this problem, the cell index should be the actual index of the columns in the array of client column objects in the GridTableView instance. Therefore, you need to manually loop over all grid columns, check the unique name of the column and return the position of the column in the array.

I am assuming you are telling me I need to set the cellIndex to the column order.  My problem is that I don't know how to set the cellIndex of the column or why I need to find the unique name.  I searched the documentation and did not find any reference on how to set a cellIndex.  Below is the function I am trying to create.  Is this what I should be trying to do or do I not understand what you are telling me?  Can you provide an example on how I should be implementing this functionality.

function ColumnHiddend(sender, eventArgs) {

             var tableView = sender.get_masterTableView();
             for (var i = 0; i < tableView.get_columns().length; i++) {
                 var columnName = tableView.get_columns()[i].get_uniqueName();
                 var column = tableView.get_columns()[i].cellIndex = i;   set column index
             } 

Also:  I am using IE8 but still have this problem, you indicated it is only a problem in IE6/IE7.

Your assistance is appreciated.

Tracy

0
Tracy
Top achievements
Rank 1
answered on 15 May 2012, 03:16 PM
Hi Galin,

Any thoughts on how I can implement this functionality?

Thanks
0
Galin
Telerik team
answered on 16 May 2012, 08:24 AM
Hello Tracy,

I have find an easier way to fix this bug in IE7 (I guess you are testing in IE8 Compatibility Mode, which behavior is as the older version). You can make a dummy ajax postback at every showing/hiding event:
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
 <telerik:RadGrid ID="RadGrid1" runat="server">
    <ClientSettings>                                                          
        <ClientEvents OnColumnShown="RefreshGrid" OnColumnHidden="RefreshGrid" />
    </ClientSettings>
 </telerik:RadGrid>
</telerik:RadAjaxPanel>

JS
function RefreshGrid() {
    if($telerik.isIE7)
        $find('RadAjaxPanel1').ajaxRequest('');
}

Additionally, you can find a sample web site with this code used in the attached file. Please check it out and let me know how it goes.

Kind regards,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Tracy
Top achievements
Rank 1
answered on 16 May 2012, 05:01 PM
Hi Galin,

Thank you for your response.  I added your solution to my page and it works great if I only hide 1 column.  If I then subsequently hide other columns it goes back to setting the width to the previous column.

Column1 20px
Column2 50px
Column3 100px
Column4 50px
Column5 100px
Column6 200px

If Hide Column 2 everything is great, if I then hide column 4 then column 5 is set to 50px.

Thanks You
Tracy

0
Galin
Telerik team
answered on 21 May 2012, 11:50 AM
Hi Tracy,


I have tested this described scenario, but I am not able to observe the issue. For reference I am sending this video. Please check it out and let me know what is different on your side.

Looking forward to your reply.

Kind regards,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Tracy
Top achievements
Rank 1
Answers by
Galin
Telerik team
Tracy
Top achievements
Rank 1
Share this question
or