[Solved] RadGrid with ColumnGroups has problem in scrolling

[Mostafa]

Hello all
I have some telerik radgrid and it has a column grouping , but when I try  to scroll the grid I get untidy columns in its order as shown in the attached image
my code in aspx file appears as the following:

                    <telerik:RadGrid AllowPaging="True" BorderStyle="Dashed" BorderColor="red" GridLines="Both" AllowSorting="True" Style="table-layout: auto !important;" AutoGenerateColumns="False" ID="RadGrid_ProductionOrderItems" AllowAutomaticDeletes="True" Width="100%"
                        AllowMultiRowSelection="True" EnableAJAX="True" PageSize="10" runat="server" Skin="Default" AllowAutomaticUpdates="True" OnBatchEditCommand="RadGrid_ProductionOrderItems_BatchEditCommand" OnItemDataBound="RadGrid_ProductionOrderItems_ItemDataBound">
                        <SortingSettings SortedBackColor="#FFF6D6" EnableSkinSortStyles="false" />
                        <ClientSettings AllowKeyboardNavigation="True">
                            <ClientEvents OnRowClick="RowClick" OnBatchEditOpened="BatchEditSetCellValue_Item" />
                            <Selecting AllowRowSelect="true" />
                            <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="6" />
                            <KeyboardNavigationSettings EnableKeyboardShortcuts="True" AllowActiveRowCycle="true" />
                        </ClientSettings>
                        <PagerStyle Mode="NextPrevAndNumeric" />
                        <MasterTableView CommandItemDisplay="Top" Style="table-layout: auto !important;" AutoGenerateColumns="False" AllowMultiColumnSorting="true"
                            EditMode="Batch" DataKeyNames="Item_Id" ClientDataKeyNames="Item_Id" ShowFooter="True" Width="100%" TableLayout="Fixed" >
                            <BatchEditingSettings EditType="Cell" OpenEditingEvent="Click" />
                            <CommandItemSettings ShowAddNewRecordButton="False" ShowSaveChangesButton="False" ShowCancelChangesButton="False" />
                            <PagerStyle AlwaysVisible="true" />
                            <FooterStyle CssClass="RadGridFooterStyle" />
                            <ColumnGroups>
                                <telerik:GridColumnGroup HeaderText="Item Order" Name="ItemOrder" HeaderStyle-HorizontalAlign="Center">
                                   <%-- <HeaderStyle CssClass="testrightTH"></HeaderStyle>--%>
                                </telerik:GridColumnGroup>
                                <telerik:GridColumnGroup HeaderText="Production Data" Name="ProductionData" HeaderStyle-HorizontalAlign="Center">
                                    <%--<HeaderStyle CssClass="testleftTH"></HeaderStyle>--%>

                                </telerik:GridColumnGroup>
                            </ColumnGroups>
                            <Columns>
                                <telerik:GridTemplateColumn ColumnGroupName="ItemOrder" HeaderText="Code"  ItemStyle-Width="150px" UniqueName="Code" DataField="Code" EditFormColumnIndex="1">
                                    <ItemTemplate>
                                        <%# Eval("Code") %>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <div class="col-sm-12" style="padding-left: 0px; padding-right: 0px">
                                            <asp:TextBox ID="txt_Code" CssClass="input-sm form-control" Enabled="False" runat="server" />
                                            <asp:LinkButton ID="LinkButton1" CssClass="btn-search-warp" Style="margin-top: -33px; right: 4px;" runat="server" OnClientClick="openWinNavigateUrlItem(); return false;">
                                                <i id="I1" class="fa fa-search" runat="server" />
                                            </asp:LinkButton>
                                        </div>
                                    </EditItemTemplate>
                                    <ItemStyle CssClass="defaultTD defaultTDbold" />
                                    <HeaderStyle Width="150px" CssClass="defaultTH  defaultTDbold" />
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn ColumnGroupName="ItemOrder" DataField="Name" HeaderText="Name"   ItemStyle-Width="75px" UniqueName="Name" ReadOnly="True" EditFormColumnIndex="2">
                                    <ItemStyle CssClass="defaultTD defaultTDbold" />
                                    <HeaderStyle Width="75px" CssClass="defaultTH  defaultTDbold" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn ColumnGroupName="ItemOrder" DataField="Color_Name" HeaderText="Color" ItemStyle-Width="70px" UniqueName="Color_Name" ReadOnly="True" EditFormColumnIndex="3">
                                    <ItemStyle CssClass="defaultTD defaultTDbold" />
                                    <HeaderStyle Width="70px" CssClass="defaultTH  defaultTDbold" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn ColumnGroupName="ItemOrder" DataField="Width" HeaderText="Width"  ItemStyle-Width="50px" UniqueName="Width" ReadOnly="True" EditFormColumnIndex="4">
                                    <ItemStyle CssClass="defaultTD defaultTDbold" />
                                    <HeaderStyle Width="50px" CssClass="defaultTH  defaultTDbold" />
                                </telerik:GridBoundColumn>

                                <telerik:GridBoundColumn ColumnGroupName="ItemOrder" DataField="Treatment" HeaderText="Treatment" SortExpression="Treatment" HeaderStyle-Width="" ItemStyle-Width="75px"
                                    UniqueName="Treatment" EditFormColumnIndex="5">
                                    <ItemStyle CssClass="defaultTD defaultTDbold" />
                                    <HeaderStyle Width="75px" CssClass="defaultTH  defaultTDbold" />
                                </telerik:GridBoundColumn>


                                <telerik:GridNumericColumn ColumnGroupName="ItemOrder" DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity"   ItemStyle-Width="61px"
                                    UniqueName="Quantity" FooterText="Total : " Aggregate="Sum" EditFormColumnIndex="6">
                                    <ItemStyle CssClass=" testright defaultTDbold"></ItemStyle>
                                    <HeaderStyle Width="60px" CssClass=" testrightTH defaultTDbold"></HeaderStyle>

                                </telerik:GridNumericColumn>

                                <telerik:GridNumericColumn ColumnGroupName="ProductionData" DataField="ProQuantity" HeaderText="Pro Quantity" SortExpression="ProQuantity"  ItemStyle-Width="85px"
                                    UniqueName="ProQuantity" FooterText="Total : " Aggregate="Sum">
                                    <ItemStyle CssClass="testleft defaultTDnormal"></ItemStyle>
                                    <HeaderStyle Width="85px" CssClass="testleftTH defaultTDnormal"></HeaderStyle>

                                </telerik:GridNumericColumn>
                                <telerik:GridTemplateColumn ColumnGroupName="ProductionData" HeaderText="Open Card" UniqueName="OpenCard"  ItemStyle-Width="100px" ReadOnly="True">
                                    <ItemTemplate>
                                        <asp:Label runat="server" Text='<%# Convert.ToInt32(Eval("OpenCard")) == 0?"Not Opened":Convert.ToInt32(Eval("OpenCard")) == 1?"Draft":"Original" %>' />
                                    </ItemTemplate>
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle Width="100px" CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn ColumnGroupName="ProductionData" HeaderText="Machine Group"  ItemStyle-Width="100px" UniqueName="MachineGroup_Name" DataField="MachineGroup_Name">
                                    <ItemTemplate>
                                        <%# Eval("MachineGroup_Name") %>
                                    </ItemTemplate>
                                    <EditItemTemplate> <%--Width="80px" --%>
                                        <telerik:RadDropDownList runat="server" ID="ddl_MachineGroup" DataSourceID="ODS_MachineGroup" DataValueField="ID" DataTextField="Name" />
                                    </EditItemTemplate>
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle Width="100px" CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridTemplateColumn>
                                <telerik:GridNumericColumn ColumnGroupName="ProductionData" DataField="ProDays" HeaderText="ProDays" SortExpression="ProDays"  ItemStyle-Width="60px"
                                    UniqueName="ProDays" FooterText="Total : " Aggregate="Sum">
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle Width="60px" CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridNumericColumn>
                                <telerik:GridTemplateColumn ColumnGroupName="ProductionData" HeaderText="Fax Order" ItemStyle-Width="100px" UniqueName="Fax_Code" DataField="Fax_Code">
                                    <ItemTemplate>
                                        <%# Eval("Fax_Code") %>
                                    </ItemTemplate>
                                    <EditItemTemplate><%--Width="100px"--%>
                                        <telerik:RadDropDownList  runat="server" ID="ddl_FaxOrder" DataSourceID="ODS_FaxOrder" DataValueField="ID" DataTextField="Fax_Code" />
                                    </EditItemTemplate>
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle Width="100px" CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridTemplateColumn>
                                <telerik:GridDateTimeColumn ColumnGroupName="ProductionData" UniqueName="PlanningDate" PickerType="DatePicker" HeaderText="Planning Date" ItemStyle-Width="175px"
                                    DataField="PlanningDate" DataFormatString="{0:MM/yyyy}" Reorderable="True">
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle Width="175px" CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridDateTimeColumn>
                                <telerik:GridTemplateColumn ColumnGroupName="ProductionData" HeaderText="Yarn Status" UniqueName="YarnStatusId" ItemStyle-Width="100px">

                                    <EditItemTemplate>
                                        <div style="padding: 2px 0 3px 0px; position: relative; right: 7px; top: -4px; width: 100px; '<%# ((float.Parse(Eval("YarnStatusPercetage").ToString()) < 50)?"background: red;": ((float.Parse(XPath("YarnStatusPercetage").ToString()) > 50&&float.Parse(XPath("YarnStatusPercetage").ToString())<100)?"background: orange;":"background: green;"))%>">
                                            <asp:CheckBox ID="CheckBox2_YarnStatusId" Enabled="False" runat="server" Checked='<%#  Convert.ToInt32(Eval("YarnStatusId")) == 1 %>' />
                                            <asp:LinkButton ID="lbtn_YarnWarpWaftStatus" Style="position: relative; right: -25px; top: 12px;"
                                                CssClass="btn-search-warp" runat="server" OnClientClick="openWinNavigateUrlYarnWarpWaftStatus(); return false;">
                                                <i id="I2" class="fa fa-search" runat="server" />
                                            </asp:LinkButton>
                                        </div>
                                    </EditItemTemplate>
                                    <ItemTemplate>
                                        <div style='<%# ((float.Parse(Eval("YarnStatusPercetage").ToString()) < 50)?"background: red;": ((float.Parse(Eval("YarnStatusPercetage").ToString()) > 50&&float.Parse(Eval("YarnStatusPercetage").ToString())<100)?"background: orange;":"background: green;"))+"padding: 2px 0 3px 0px;position: relative;right: 7px;top: -4px;width: 100px;" %>'>
                                            <asp:CheckBox ID="CheckBox1_YarnStatusId" Enabled="False" runat="server" Checked='<%# Convert.ToInt32(Eval("YarnStatusId")) == 1 %>' />
                                        </div>
                                    </ItemTemplate>
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle Width="100px" CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridTemplateColumn>
                              <telerik:GridTemplateColumn ColumnGroupName="ProductionData" HeaderText="Warp Status" UniqueName="WarpStatusId" HeaderStyle-Width="100px" ItemStyle-Width="100px">
                                    <EditItemTemplate>
                                        <span>
                                        <asp:CheckBox ID="CheckBox2_WarpStatusId" runat="server" Checked='<%#  Convert.ToInt32(Eval("WarpStatusId")) == 1 %>' CssClass='<%# Convert.ToInt32(Eval("WarpStatusId")) == 1 ?  "warpTrue" :"warpFalse"  %>' onclick="javascript: CheckedChange(this);" />
                                            </span>
                                    </EditItemTemplate>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="CheckBox1_WarpStatusId" Enabled="False" runat="server" Checked='<%# Convert.ToInt32(Eval("WarpStatusId")) == 1 %>'  CssClass='<%# Convert.ToInt32(Eval("WarpStatusId")) == 1 ?  "warpTrue" :"warpFalse"  %>' />
                                    </ItemTemplate>
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridTemplateColumn>

                                <telerik:GridTemplateColumn ColumnGroupName="ProductionData" HeaderText="Pro Status" UniqueName="ProStatusId" HeaderStyle-Width="100px" ItemStyle-Width="100px">
                                    <EditItemTemplate>
                                        <asp:CheckBox ID="CheckBox2_ProStatusId" Enabled='<%# Eval("CurrentClose") %>' runat="server" Checked='<%#  Convert.ToInt32(Eval("ProStatusId")) == 1 %>' />
                                    </EditItemTemplate>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="CheckBox1_ProStatusId" Enabled="False" runat="server" Checked='<%# Convert.ToInt32(Eval("ProStatusId")) == 1 %>' />
                                    </ItemTemplate>
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridTemplateColumn>
                                <telerik:GridCheckBoxColumn ColumnGroupName="ProductionData" DataField="CurrentClose" HeaderText="Close" SortExpression="CurrentClose" UniqueName="CurrentClose" HeaderStyle-Width="100px" ItemStyle-Width="100px">
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridCheckBoxColumn>
                               <%-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////// --%>
                              
                                <telerik:GridTemplateColumn ColumnGroupName="ProductionData" HeaderText="Close Quantity" UniqueName="CloseQty"  ItemStyle-Width="100px" ReadOnly="True">
                                    <ItemTemplate>
                                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("CloseQty")%>' />
                                    </ItemTemplate>
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle Width="100px" CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn ColumnGroupName="ProductionData" HeaderText="Roll Status" UniqueName="RollStatus"   ItemStyle-Width="100px">
                                    <EditItemTemplate>
                                        <asp:CheckBox ID="CheckBox2_RollStatus" runat="server" Checked='<%#  Convert.ToInt32(Eval("RollStatus")) == 1 %>' />
                                    </EditItemTemplate>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="CheckBox1_RollStatus" Enabled="False" runat="server" Checked='<%# Convert.ToInt32(Eval("RollStatus")) == 1 %>' />
                                    </ItemTemplate>
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle Width="100px" CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn ColumnGroupName="ProductionData" HeaderText="Roll Quantity" UniqueName="RollQty"  ItemStyle-Width="100px" ReadOnly="True">
                                    <ItemTemplate>
                                        <asp:Label runat="server" Text='<%# Eval("RollQty")%>' />
                                    </ItemTemplate>
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle Width="100px" CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn ColumnGroupName="ProductionData" HeaderText="Lab Status" UniqueName="LabStatus" ItemStyle-Width="100px">
                                    <EditItemTemplate>
                                        <asp:CheckBox ID="CheckBox2_LabStatus" runat="server" Checked='<%#  Convert.ToInt32(Eval("LabStatus")) == 1 %>' />
                                    </EditItemTemplate>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="CheckBox1_LabStatus" Enabled="False" runat="server" Checked='<%# Convert.ToInt32(Eval("LabStatus")) == 1 %>' />
                                    </ItemTemplate>
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle Width="100px" CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridTemplateColumn>
                                <telerik:GridDateTimeColumn ColumnGroupName="ProductionData" UniqueName="DeliverDate" PickerType="DateTimePicker" HeaderText="Delivery Date"  ItemStyle-Width="150px"
                                    DataField="DeliverDate" DataFormatString="{0:MM/dd/yyyy hh:mm:ss tt}" Reorderable="True">
                                    <ItemStyle CssClass="defaultTD defaultTDnormal" />
                                    <HeaderStyle Width="150px" CssClass="defaultTH  defaultTDnormal" />
                                </telerik:GridDateTimeColumn>
                               
                            </Columns>
                        </MasterTableView>
                    </telerik:RadGrid>

please if any body can help me or tell me about some URL may help me in solve this issue please reply me

Regards
Mostafa

[Pavlina]

Hello Mostafa,

Remove ItemStyle-Width property from the columns definition and instead set HeaderStyle-Width to a fixed px value to define columns width. Note that it is not recommended to use ItemStyle-Width for setting columns width.

Regards,
Pavlina
Telerik