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

RadGrid Squeeze Columns while trying to lock header

5 Answers 75 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ei Wai
Top achievements
Rank 1
Ei Wai asked on 19 Aug 2014, 08:48 AM
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

Sort by
0
Princy
Top achievements
Rank 2
answered on 19 Aug 2014, 10:06 AM
Hi Ei,

Please try setting width for the columns using HeaderStyle. Please note, donot use ItemStyle for setting width.

ASPX:
<HeaderStyle Width="100px" />

Thanks,
Princy
0
Ei Wai
Top achievements
Rank 1
answered on 27 Aug 2014, 08:25 AM
Hi Princy,

Thank you for reply. I've removed all Header Style and Item Style width for each column and put  <HeaderStyle width="100px" /> outside of column tag.  It worked perfectly. But is there any possible way to allow setting width for each column since it is one of my requirement. 

Thank you again for your help.

Best regards,
Ei
0
Princy
Top achievements
Rank 2
answered on 27 Aug 2014, 09:19 AM
Hi Ei,

You can set the HeaderStyle property for each columns in the aspx as follows:

ASPX:
<telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID">
  <HeaderStyle Width="100px" />
</telerik:GridBoundColumn>

Thanks,
Princy

0
Ei Wai
Top achievements
Rank 1
answered on 23 Sep 2014, 09:42 AM
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
0
Angel Petrov
Telerik team
answered on 26 Sep 2014, 05:57 AM
Hi Ei,

From the initial code provided I noticed that the width of the grid and master table view is set to 100 percent. Please try defining it in pixels and test whether this resolves the matter.

Regards,
Angel Petrov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Ei Wai
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Ei Wai
Top achievements
Rank 1
Angel Petrov
Telerik team
Share this question
or