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

RadGrid Squeeze Columns while trying to lock header

5 Answers 146 Views

Grid

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

Ei Wai asked on 19 Aug 2014, 08:48 AM

radgrid_headerlock.png

Hi ,

I am trying to lock grid header and freeze columns feature in radgrid. I am putting radgrid inside radsplitter. My radsplitter is inside the master page.I tried putting Table_Layout to be Fixed and put all Header style width for all columns. That will freeze my header but all columns are squeeze and there is no scroll bars. Please see attached screen shot and html code for your information. It would be greate if someone can guide me how to do.

<div>

<table>

<tr>

<td>

<telerik:RadGrid ID="gvViewTrans" Skin="Metro" AllowMultiRowEdit="true" EnableLinqExpressions="false"

GridLines="both" AllowPaging="true" runat="server" OnItemCommand="gvViewTrans_ItemCommand"

OnItemDataBound="gvViewTrans_ItemDataBound" OnNeedDataSource="gvViewTrans_NeedDataSource"

OnPreRender="gvViewTrans_PreRender" PageSize="31" Width="100%">

<MasterTableView EditMode="InPlace" CommandItemDisplay="Top" AutoGenerateColumns="false"

DataKeyNames="SID" Width="100%" TableLayout="Fixed">

<CommandItemTemplate>

<div style="display: none;">

<telerik:RadButton ID="btnSave" runat="server" Text="Save" Width="80px" Skin="Sitefinity"

CommandName="Save">

<Icon PrimaryIconUrl="Images/save.png" PrimaryIconTop="3px" PrimaryIconLeft="5px" />

</telerik:RadButton>

</div>

</CommandItemTemplate>

<ItemStyle Wrap="false" BorderColor="Red" />

<HeaderStyle BackColor="#941922" ForeColor="White" />

<Columns>

<telerik:GridBoundColumn UniqueName="Date" HeaderText="Date" ReadOnly="true" DataFormatString="{0:dd-MMM-yyyy}"

DataField="Trans_Date" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="36px">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Day" HeaderText="Day" ReadOnly="true" DataField="Trans_Date"

DataFormatString="{0:ddd}" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="15px">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn UniqueName="Locked" HeaderText="Lock" DataField="Locked"

Visible="true" HeaderStyle-Width="10px">

</telerik:GridCheckBoxColumn>

<telerik:GridCheckBoxColumn UniqueName="Freeze" HeaderText="Freeze" DataField="Freeze"

Visible="true" HeaderStyle-Width="10px">

</telerik:GridCheckBoxColumn>

<telerik:GridTemplateColumn UniqueName="SchIn" HeaderText="SchIn" HeaderStyle-BackColor="#941922"

HeaderStyle-Width="40px">

<HeaderStyle BackColor="#941922"></HeaderStyle>

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<ItemTemplate>

<asp:TextBox ID="TB_SchIn1" Text='<%# DataBinder.Eval(Container.DataItem, "SchIn1") %>'

Width="40px" runat="server"></asp:TextBox>

<br />

<asp:TextBox ID="TB_SchIn2" Text='<%# DataBinder.Eval(Container.DataItem, "SchIn2") %>'

Width="40px" runat="server"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="SchOut" HeaderText="SchOut" HeaderStyle-BackColor="#941922"

HeaderStyle-Width="40px">

<HeaderStyle BackColor="#941922"></HeaderStyle>

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<ItemTemplate>

<asp:TextBox ID="TB_SchOut1" Text='<%# DataBinder.Eval(Container.DataItem, "SchOut1") %>'

Width="40px" runat="server" e></asp:TextBox>

<br />

<asp:TextBox ID="TB_SchOut2" Text='<%# DataBinder.Eval(Container.DataItem, "SchOut2") %>'

Width="40px" runat="server"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="In" HeaderText="In" HeaderStyle-BackColor="#941922"

HeaderStyle-Width="40px" DataField="In1">

<HeaderStyle BackColor="#941922"></HeaderStyle>

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<ItemTemplate>

<asp:TextBox ID="TB_In1" Text='<%# DataBinder.Eval(Container.DataItem, "In1") %>'

Width="40px" runat="server"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Out" HeaderText="Out" HeaderStyle-BackColor="#941922"

HeaderStyle-Width="40px" DataField="Out1">

<HeaderStyle BackColor="#941922"></HeaderStyle>

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<ItemTemplate>

<asp:TextBox ID="TB_Out1" Text='<%# DataBinder.Eval(Container.DataItem, "Out1") %>'

Width="40px" runat="server"></asp:TextBox>

<br />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="FinalWkhr" HeaderText="NRM" HeaderStyle-BackColor="#941922"

HeaderStyle-Width="40px" DataField="FinalWkhr1">

<HeaderStyle BackColor="#941922"></HeaderStyle>

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<ItemTemplate>

<asp:TextBox ID="TB_FinalWkhr1" Text='<%# DataBinder.Eval(Container.DataItem, "TotalFinalWkhr") %>'

Width="40px" runat="server"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Late" HeaderText="Late" HeaderStyle-BackColor="#941922"

HeaderStyle-Width="40px" DataField="Late1">

<HeaderStyle BackColor="#941922"></HeaderStyle>

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<ItemTemplate>

<asp:TextBox ID="TB_Late1" Text='<%# DataBinder.Eval(Container.DataItem, "TotalLate") %>'

Width="40px" runat="server"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="EarlyOut" HeaderText="EarlyOut" HeaderStyle-BackColor="#941922"

HeaderStyle-Width="40px" DataField="EarlyOut1">

<HeaderStyle BackColor="#941922"></HeaderStyle>

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<ItemTemplate>

<asp:TextBox ID="TB_EarlyOut1" Text='<%# DataBinder.Eval(Container.DataItem, "TotalEarlyOut") %>'

Width="40px" runat="server"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="WKOT" HeaderText="WKOT" HeaderStyle-BackColor="#941922"

HeaderStyle-Width="40px" DataField="WKOT">

<HeaderStyle BackColor="#941922"></HeaderStyle>

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<ItemTemplate>

<asp:TextBox ID="TB_WKOT" Text='<%# DataBinder.Eval(Container.DataItem, "WKOT") %>'

Width="40px" runat="server"></asp:TextBox>

<br />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="OFFOT" HeaderText="OFFOT" HeaderStyle-BackColor="#941922"

HeaderStyle-Width="40px" DataField="OFFOT">

<HeaderStyle BackColor="#941922"></HeaderStyle>

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<ItemTemplate>

<asp:TextBox ID="TB_OFFOT" Text='<%# DataBinder.Eval(Container.DataItem, "OFFOT") %>'

Width="40px" runat="server"></asp:TextBox>

<br />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="Part_Time" HeaderText="PTHrs" DataField="Part_Time"

HeaderStyle-Width="50px">

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="Reason" HeaderText="Reason" HeaderStyle-BackColor="#941922"

HeaderStyle-Width="40px">

<HeaderStyle BackColor="#941922"></HeaderStyle>

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<ItemTemplate>

<telerik:RadComboBox ID="RCB_ReasonCode" runat="server" Width="80px" ZIndex="1000000">

</telerik:RadComboBox>

<br />

<telerik:RadComboBox ID="RCB_ReasonCode2" runat="server" Width="80px" ZIndex="1000000">

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Skill" HeaderText="Skill" HeaderStyle-BackColor="#941922"

HeaderStyle-Width="40px">

<HeaderStyle BackColor="#941922"></HeaderStyle>

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<ItemTemplate>

<telerik:RadComboBox ID="RCB_Skill" runat="server" Width="80px" ZIndex="1000000">

</telerik:RadComboBox>

<br />

<telerik:RadComboBox ID="RCB_Skill2" runat="server" Width="80px" ZIndex="1000000">

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Loc" HeaderText="Loc" HeaderStyle-BackColor="#941922"

HeaderStyle-Width="40px">

<HeaderStyle BackColor="#941922"></HeaderStyle>

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<ItemTemplate>

<telerik:RadComboBox ID="RCB_Loc" runat="server" Width="80px" OnItemsRequested="cboLocation_ItemsRequested"

EnableLoadOnDemand="true" ZIndex="1000000">

</telerik:RadComboBox>

<br />

<telerik:RadComboBox ID="RCB_Loc2" runat="server" Width="80px" OnItemsRequested="cboLocation_ItemsRequested"

EnableLoadOnDemand="true" ZIndex="1000000">

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="ReasonCodeTemp" HeaderText="" DataField="ReasonCode"

Visible="false" HeaderStyle-Width="20px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ReasonCodeTemp2" HeaderText="" DataField="ReasonCode2"

Visible="false" HeaderStyle-Width="20px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="LocTemp" HeaderText="" DataField="Location1"

Visible="false" HeaderStyle-Width="20px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="LocTemp2" HeaderText="" DataField="Location2"

Visible="false" HeaderStyle-Width="20px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SkillTemp" HeaderText="" DataField="SchSkill1"

Visible="false" HeaderStyle-Width="20px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SkillTemp2" HeaderText="" DataField="SchSkill2"

Visible="false" HeaderStyle-Width="20px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SchID1" HeaderText="" DataField="SchID1" Display="false"

HeaderStyle-Width="20px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SchID2" HeaderText="" DataField="SchID2" Display="false"

HeaderStyle-Width="20px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SchSubj1" HeaderText="" DataField="SchSubj1"

Visible="false" HeaderStyle-Width="20px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SchSubj2" HeaderText="" DataField="SchSubj2"

Visible="false" HeaderStyle-Width="20px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="TxnRemarks" HeaderText="Remarks" DataField="TxnRemarks"

HeaderStyle-Width="200px">

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn" ReadOnly="true" HeaderText="Clk1" ItemStyle-BackColor="#F6EFD7"

DataField="ClockIn1" HeaderStyle-Width="20px" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut" ReadOnly="true" HeaderText="Clk2"

DataField="ClockOut1" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="20px"

DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn2" ReadOnly="true" HeaderText="Clk3"

DataField="ClockIn2" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="20px" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut2" ReadOnly="true" HeaderText="Clk4"

DataField="ClockOut2" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="20px"

DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn3" ReadOnly="true" HeaderText="Clk5"

DataField="ClockIn3" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="20px" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut3" ReadOnly="true" HeaderText="Clk6"

DataField="ClockOut3" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="20px"

DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn4" ReadOnly="true" HeaderText="Clk7"

DataField="ClockIn4" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="20px" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut4" ReadOnly="true" HeaderText="Clk8"

DataField="ClockOut4" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="20px"

DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn5" ReadOnly="true" HeaderText="Clk9"

DataField="ClockIn5" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="20px" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut5" ReadOnly="true" HeaderText="Clk10"

DataField="ClockOut5" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="20px"

DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn6" ReadOnly="true" HeaderText="Clk11"

DataField="ClockIn6" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="20px" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut6" ReadOnly="true" HeaderText="Clk12"

DataField="ClockOut6" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="20px"

DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnGridCreating="GridCreated4" OnGridCreated="gvViewTransCreated"></ClientEvents>

<Scrolling AllowScroll="true" SaveScrollPosition="true" FrozenColumnsCount="2" UseStaticHeaders="true" />

</ClientSettings>

</telerik:RadGrid>

<telerik:GridDropDownListColumnEditor ID="ddlEditor" DropDownStyle-CssClass="ddl"

runat="server" />

<telerik:GridDropDownListColumnEditor ID="ddlReason" DropDownStyle-CssClass="ddlReasonCss"

runat="server" />

</td>

</tr>

</table>

</div>

5 Answers, 1 is accepted

answered on 23 Sep 2014, 09:42 AM

radgrid_headerlock_2.png

Hi Princy,

I tried to add Header-style width for each columns. But it all squeeze into one page and there is no scroll bar. Did I miss anything?

Thank you.

Best regards,
Ei Wai