[Solved] RddGrid column header problem

[Amit]

Hello I am using Rad grid as follow 

But I have problem of column header is shaking, cause of vertical scroll, it is hidden when less record are there and then it start shking on double click of grid.

Please find the attached image for your reference

headers shake to fill scroll widht.

<telerik:RadGridID="rgdImportExport"runat="server"OnGridExporting="rgdImportExport_GridExporting"
AutoGenerateColumns="false"OnNeedDataSource="rgdImportExport_NeedDataSource"
OnUpdateCommand="rgdImportExport_UpdateCommand"OnInsertCommand="rgdImportExport_InsertCommand"
OnItemDataBound="rgdImportExport_ItemDataBound"AllowPaging="true"Width="100%"
PageSize="10">
<MasterTableViewEditMode="PopUp"ShowHeadersWhenNoRecords="true"EnableNoRecordsTemplate="true"
CommandItemDisplay="Top"TableLayout="Auto"ItemStyle-Wrap="false"AlternatingItemStyle-Wrap="false">
<NoRecordsTemplate>
<divstyle="text-align:center;">
   Therearenorecordstodisplay
</div>
</NoRecordsTemplate>
<Columns>
<telerik:GridBoundColumnDataField="EmpNo"HeaderText="EmpNo"UniqueName="EmpNo">
<HeaderStyleWidth="10%"HorizontalAlign="Left"/>
<ItemStyleWidth="10%"HorizontalAlign="Left"/>
</telerik:GridBoundColumn>
<telerik:GridBoundColumnDataField="Name"HeaderText="Name"UniqueName="Name">
<HeaderStyleWidth="17%"HorizontalAlign="Left"/>
<ItemStyleWidth="17%"HorizontalAlign="Left"/>
</telerik:GridBoundColumn>
<telerik:GridBoundColumnDataField="EDAmount"HeaderText="EDAmount"UniqueName="EDAmount"
DataFormatString="{0:#0.00}">
<HeaderStyleWidth="15%"HorizontalAlign="Right"/>
<ItemStyleWidth="15%"HorizontalAlign="Right"/>
</telerik:GridBoundColumn>
<telerik:GridBoundColumnDataField="PeriodPaidFor"HeaderText="PaidFor"UniqueName="PeriodPaidFor">
<HeaderStyleWidth="10%"HorizontalAlign="Left"/>
<ItemStyleWidth="10%"HorizontalAlign="Left"/>
</telerik:GridBoundColumn>
<telerik:GridBoundColumnDataField="Reference"HeaderText="Remark"UniqueName="Reference">
<HeaderStyleWidth="12%"HorizontalAlign="Left"/>
<ItemStyleWidth="12%"HorizontalAlign="Left"/>
</telerik:GridBoundColumn>
<telerik:GridBoundColumnDataField="Notes"HeaderText="Notes"UniqueName="Notes">
<HeaderStyleWidth="12%"HorizontalAlign="Left"/>
<ItemStyleWidth="12%"HorizontalAlign="Left"/>
</telerik:GridBoundColumn>
<telerik:GridTemplateColumnHeaderText="FromDate"UniqueName="FromDate">
<ItemTemplate>
<asp:LabelID="lblFromDate"runat="server"></asp:Label>
</ItemTemplate>
<HeaderStyleWidth="12%"HorizontalAlign="Left"/>
<ItemStyleWidth="12%"HorizontalAlign="Left"/>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumnHeaderText="ToDate"UniqueName="ToDate">
<ItemTemplate>
<asp:LabelID="lblToDate"runat="server"></asp:Label>
</ItemTemplate>
<HeaderStyleWidth="12%"HorizontalAlign="Left"/>
<ItemStyleWidth="12%"HorizontalAlign="Left"/>
</telerik:GridTemplateColumn>
</Columns>
<EditFormSettingsEditFormType="Template">
<PopUpSettingsModal="True"Width="450px"/>
<FormTemplate>
<tableid="Table2"cellspacing="5"cellpadding="3"width="100%"border="0"rules="none"
style="border-collapse:collapse;background:white;">
<tr>
<td>
<tableid="Table3"cellspacing="5"cellpadding="3"width="100%"border="0">
<tr>
<tdalign="left"width="145px"class="textStyle1">
Employee:
</td>
<tdclass="textStyle1"align="left">
<%--<asp:TextBoxID="txtEmpNo"Width="145px"CssClass="textStyle1"runat="server"Text='<%#Bind("EmpNo")%>'>
</asp:TextBox>--%>
<Eilisys:EnquireEmployeeID="EnquireEmployee"runat="server"AccessType="PayrollManagement"
ClientEvent="OnClientEventRender"IsPredefinedBind="true"IncludeInactiveEmployees="true"
AccessForAllEmployees="true"/>
<asp:CustomValidatorrunat="server"ID="CVdtBillDate"ValidateEmptyText="true"Text="*"
ClientValidationFunction="ValidateEmpNo"EnableClientScript="true"Display="Dynamic"
ErrorMessage="Pleaseselectemployee"ValidationGroup="1">
</asp:CustomValidator>
</td>
</tr>
<trclass="textStyle1">
<tdalign="left"width="145px">
EDAmount:
</td>
<tdclass="textStyle1"align="left">
<asp:TextBoxID="txtAmount"Width="105px"CssClass="stdTextBoxEmpNoRight"runat="server"
Text='<%#Bind("EDAmount","{0:#0.00}")%>'>
</asp:TextBox>
<asp:RequiredFieldValidatorID="RFVEDAmount"runat="server"ControlToValidate="txtAmount"
Text="*"ValidationGroup="1"ErrorMessage="PleaseenterEDAmount">
</asp:RequiredFieldValidator>
<asp:CustomValidatorrunat="server"ID="CVEDAmount"ValidateEmptyText="false"Text="*"
ControlToValidate="txtAmount"ClientValidationFunction="ValidateEDAmount"EnableClientScript="true"
Display="Dynamic"ErrorMessage="PleaseentervalidEDAmount"ValidationGroup="1">
</asp:CustomValidator>
</td>
</tr>
<tr>
<tdalign="left"width="145px"class="textStyle1"nowrap="nowrap">
PaidFor:
</td>
<tdclass="textStyle1"align="left">
<%--<asp:TextBoxID="txtPaidFor"Width="145px"CssClass="textStyle1"runat="server"Text='<%#Bind("PeriodPaidFor")%>'>
</asp:TextBox>--%>
<asp:DropDownListID="ddlCurrMonth"runat="server"Width="105px"CssClass="stdDropDownNew">
</asp:DropDownList>
</td>
</tr>
<trid="trReference"runat="server">
<tdalign="left"width="145px"class="textStyle1"nowrap="nowrap">
Reference:
</td>
<tdclass="textStyle1"align="left">
<asp:TextBoxID="txtRemark"Width="240px"Height="40px"TextMode="MultiLine"MaxLength="30"
CssClass="textStyle1"runat="server"Text='<%#Bind("Reference")%>'>
</asp:TextBox>
<asp:RequiredFieldValidatorID="RFV1"runat="server"ControlToValidate="txtRemark"
Text="*"ValidationGroup="1"ErrorMessage="Pleaseenterremark">
</asp:RequiredFieldValidator>
<asp:CustomValidatorrunat="server"ID="CVtxtRemark"ValidateEmptyText="false"Text="*"
ControlToValidate="txtRemark"ClientValidationFunction="ValidateRemarklength"
EnableClientScript="true"Display="Dynamic"ErrorMessage="Only30charecterareallowedforreference"
ValidationGroup="1">
</asp:CustomValidator>
</td>
</tr>
<trid="trNotes"runat="server">
<tdalign="left"width="145px"class="textStyle1"nowrap="nowrap">
Notes:
</td>
<tdclass="textStyle1"align="left">
<asp:TextBoxID="txtNotes"Width="240px"Height="40px"CssClass="textStyle1"TextMode="MultiLine"
MaxLength="2000"runat="server"Text='<%#Bind("Notes")%>'>
</asp:TextBox>
<asp:RequiredFieldValidatorID="RequiredFieldValidator1"runat="server"ControlToValidate="txtNotes"
Text="*"ValidationGroup="1"ErrorMessage="Pleaseenternotes">
</asp:RequiredFieldValidator>
<asp:CustomValidatorrunat="server"ID="CVtxtNotes"ValidateEmptyText="false"Text="*"
ControlToValidate="txtNotes"ClientValidationFunction="ValidateNoteslength"EnableClientScript="true"
Display="Dynamic"ErrorMessage="Only2000charecterareallowedforreference"
ValidationGroup="1">
</asp:CustomValidator>
</td>
</tr>
<trid="trFromDate"runat="server">
<tdalign="left"width="145px"class="textStyle1"nowrap="nowrap">
FromDate:
</td>
<tdclass="textStyle1"align="left">
<telerik:RadDatePickerID="dtFromDate"runat="server"SkinID="ESSDatePicker"Width="105px"
MinDate="1900-01-01"DateInput-ClientEvents-OnError="onError">
<DateInputID="DateInput1"runat="server"ButtonsPosition="Left"DateFormat="dd/MM/yyyy"
DisplayDateFormat="dd/MM/yyyy"TabIndex="7">
</DateInput>
</telerik:RadDatePicker>
<asp:RequiredFieldValidatorID="RFVdtFromDate"runat="server"ControlToValidate="dtFromDate"
Text="*"ValidationGroup="1"ErrorMessage="Pleaseenterfromdate">
</asp:RequiredFieldValidator>
</td>
</tr>
<trid="trToDate"runat="server">
<tdalign="left"width="145px"class="textStyle1"nowrap="nowrap">
ToDate:
</td>
<tdclass="textStyle1"align="left">
<telerik:RadDatePickerID="dtToDate"runat="server"SkinID="ESSDatePicker"Width="105px"
MinDate="1900-01-01"DateInput-ClientEvents-OnError="onError">
<DateInputID="DateInput2"runat="server"ButtonsPosition="Left"DateFormat="dd/MM/yyyy"
DisplayDateFormat="dd/MM/yyyy"TabIndex="7">
</DateInput>
</telerik:RadDatePicker>
<asp:RequiredFieldValidatorID="RequiredFieldValidator2"runat="server"ControlToValidate="dtToDate"
Text="*"ValidationGroup="1"ErrorMessage="Pleaseentertodate">
</asp:RequiredFieldValidator>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<tdalign="center">
<br/>
<asp:ButtonID="btnUpdate"Text='<%#(ContainerisGridEditFormInsertItem)?"Insert":"Update"%>'
runat="server"TabIndex="4"CommandName='<%#(ContainerisGridEditFormInsertItem)?"PerformInsert":"Update"%>'
Width="59px"ValidationGroup="1"></asp:Button>
<asp:ButtonID="btnCancel"TabIndex="5"Text="Cancel"runat="server"CausesValidation="False"
CommandName="Cancel"Width="59px"></asp:Button>
</td>
</tr>
<tr>
<tdalign="left"colspan="2">
<asp:ValidationSummaryID="ValidationSummary1"runat="server"ShowMessageBox="True"
ShowSummary="False"ValidationGroup="1"DisplayMode="List"/>
</td>
</tr>
</table>
</FormTemplate>
<EditColumnEditText="Edit"UpdateText="Edit">
<HeaderStyleWidth="25px"HorizontalAlign="Right"/>
<ItemStyleWidth="25px"HorizontalAlign="Right"/>
</EditColumn>
</EditFormSettings>
</MasterTableView>
<ClientSettings>
<%--<ClientEventsOnKeyPress="CatchKeyPress"></ClientEvents>--%>
<SelectingAllowRowSelect="True"></Selecting>
<ClientEventsOnRowDblClick="OnRowClick"></ClientEvents>
<ScrollingAllowScroll="true"UseStaticHeaders="true"SaveScrollPosition="false"ScrollHeight="360px"/>
</ClientSettings>
<HeaderStyleWrap="true"/>
</telerik:RadGrid>

[Pavlina]

Hi,

The correct way for setting column widths is through HeaderStyle-Width property. ItemStyle-Width should not be used. Also specify which version of RadControls and which is the browser you use to test the project.

Kind regards,
Pavlina
the Telerik team

[Amit]

My telerik version is 2009.3.1314.35

Actully I am making hide and unhide some column dynamically
I found while running application that when there are more record in grid; there is vertual scroll bar but when there is less record there is no scrollbar so column heades try to leave that space first then capture it so column headers do to fro in that place.

Thanks & reagards
Amit  

[Pavlina]

Hello Amit,

I recommend that you upgrade to the latest version of RadControls and see if the described problem still persists.

All the best,
Pavlina
the Telerik team

[Amol]

Hi,

I am also using the RadGridView with static header and scroll & also with the latest version of Radcontrols. But still I am facing the grid view header shaking issue while sorting the gridview. 

When there are more number of records(with vertical scroll bar), the issue is somewhat less. But when there are less records(with no vertical scroll bar) the header shaking issue increases and header tries to fit in the available width.

Please help on this asap.

Thanks

[Pavlina]

Hello Amol,

Can you send us the problematic grid declaration, so we can test it locally and advice you further?

Regards,
Pavlina
Telerik

[Amol]

My declaration is as simple like below:

<telerik:RadGrid ID="grdView1" runat="server" AutoGenerateColumns="false" Width="940px" Height="350px">
                                    <MasterTableView AllowNaturalSort="false">
                                        <Columns>
                                            <telerik:GridBoundColumn HeaderText="Column 1" ReadOnly="true" DataField="Col1" HeaderStyle-Width="200px" HtmlEncode="true" AllowSorting="true" SortExpression="Col1"></telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn HeaderText="Column 2" ReadOnly="true" DataField="Col2" HeaderStyle-Width="260px" HtmlEncode="true" AllowSorting="true" SortExpression="Col2"></telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn HeaderText="Column 3" ReadOnly="true" DataField="Col3" HeaderStyle-Width="230px" HtmlEncode="true" AllowSorting="true" SortExpression="Col3"></telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn HeaderText="Column 4" ReadOnly="true" DataField="Col4" HeaderStyle-Width="230px" HtmlEncode="true" AllowSorting="true" SortExpression="Col4"></telerik:GridBoundColumn>
                                        </Columns>
                                    </MasterTableView>
                                    <HeaderStyle BackColor="#338af4" Font-Bold="True" ForeColor="#FFF" HorizontalAlign="Left" BorderColor="White" />
                                    <ClientSettings>
                                        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                                        <Resizing AllowColumnResize="true" />
                                    </ClientSettings>
                                </telerik:RadGrid>

But still, if there is postback (e.g while sorting) and there are less number of records and grid doesn't have scroll bar, there is grid header shaking issue.

Thanks

[Pavlina]

Hi Amol,

I took the provided code and prepared a sample runnable project which you can find attached. However, I was not able to replicate the described problem with Q2 2013 release of RadControls. Check it out and see what is the difference in your case.

Regards,
Pavlina
Telerik

[Amit]

I am continuing the thread cause it is related to the width of column.

 Actually I have column like decline,Delete,And approve they are visible true or false according to the roll of logged in Employee.
I am troubling in setting the width of all columns (I have given width in percentage )I have used table layout to fixed

Please help me to give correct width if columns are hidden or visible at run time.
In attached image I have hide delete ,decline check box columns as he is normal user.

[Amit]

I am continuing the thread cause it is related to the width of column.

 Actually I have column like decline,Delete,And approve they are visible true or false according to the roll of logged in Employee.
I am troubling in setting the width of all columns (I have given width in percentage )I have used table layout to fixed

Please help me to give correct width if columns are hidden or visible at run time.
In attached image I have hide delete ,decline check box columns as he is normal user.

[Pavlina]

Hello Amit,

I suppose that you have implemented resizing and/or static headers for your grid. When these properties are enabled grid table view has TableLayout="Fixed" which allows us to set fixed width for the columns. On the other hand, in order the columns to be automatically resized so the stretch over the whole grid width, the grid table view TableLayout should be Auto and none of the columns should have fixed width set. That is way there is no an easy way to overcome the issue you are facing. The only possible workaround I can thing of is to handle the OnColumnHidden and OnColumnShown client-side event and manually calculate and set the width of the visible columns based on the width of the grid table view.

Regards,
Pavlina
Telerik