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.
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
>