I have a Radgrid with scrolling enabled and gouping.
There are some issues I am facing with the grid.
I want to hide or show some columns based on some preferences. I have all the columns in the grid structure and I just make them visible based on the preferences. Howevere I have two columns which I want visible all the time. I have a fixed width specified for those columns in the grid declaration. For the rest of the columns I change the width in the code behind.
The issue I am having is when I have more number of columns to show the width of the first two columns changes and the grid resizes to fit all the columns in the grid width. It does not give me a horizontal scrollbar. I want those two columns to always have the fixed width i specified and have the scrollbar visible when the column count increases.
This is my grid declaration:
.cs code:
Any thoughts on what I might be doing wrong?
Is it also possible to hide the horizontal scrolling completely?
There are some issues I am facing with the grid.
I want to hide or show some columns based on some preferences. I have all the columns in the grid structure and I just make them visible based on the preferences. Howevere I have two columns which I want visible all the time. I have a fixed width specified for those columns in the grid declaration. For the rest of the columns I change the width in the code behind.
The issue I am having is when I have more number of columns to show the width of the first two columns changes and the grid resizes to fit all the columns in the grid width. It does not give me a horizontal scrollbar. I want those two columns to always have the fixed width i specified and have the scrollbar visible when the column count increases.
This is my grid declaration:
| <telerik:RadGrid ID="RadGridCalendar" runat="server" GridLines="None" AllowPaging="true" |
| AllowFilteringByColumn="true" Width="975px" ShowHeader="true" OnColumnCreated="RadGridCalendar_ColumnCreated" |
| OnItemCreated="RadGridCalendar_ItemCreated" OnItemDataBound="RadGridCalendar_ItemDataBound" |
| AutoGenerateColumns="False" EnableLinqExpressions="false" ShowGroupPanel="false" |
| OnItemCommand="RadGridCalendar_ItemCommand" AllowSorting="true" AllowCustomPaging="false" |
| OnNeedDataSource="RadGridCalendar_NeedDataSource"> |
| <ClientSettings Resizing-AllowColumnResize="true"> |
| <ClientEvents OnGridCreated="GridCreated" /> |
| <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="2" ScrollHeight="450px" /> |
| </ClientSettings> |
| <MasterTableView TableLayout="Fixed" HierarchyDefaultExpanded="true" ClientDataKeyNames="ActivityID" |
| CommandItemDisplay="Top" DataKeyNames="ActivityID"> |
| <GroupByExpressions> |
| <telerik:GridGroupByExpression> |
| <SelectFields> |
| <telerik:GridGroupByField FieldName="ActivityDate"></telerik:GridGroupByField> |
| </SelectFields> |
| <GroupByFields> |
| <telerik:GridGroupByField FieldName="Date" FormatString="{0:d}" SortOrder="Descending"> |
| </telerik:GridGroupByField> |
| <telerik:GridGroupByField FieldName="ActivityDate" FormatString="{0:d}" SortOrder="None"> |
| </telerik:GridGroupByField> |
| </GroupByFields> |
| </telerik:GridGroupByExpression> |
| </GroupByExpressions> |
| <Columns> |
| <telerik:GridTemplateColumn UniqueName="TimeColumn" HeaderText="Time"> |
| <ItemStyle Width="130px" BorderStyle="None"></ItemStyle> |
| <HeaderStyle Width="130px" /> |
| <ItemTemplate> |
| <div> |
| <%# DataBinder.Eval(Container.DataItem, "StartTime") %> |
| <asp:Label ID="Label1" runat="server">-</asp:Label> |
| <%# DataBinder.Eval(Container.DataItem, "EndTime") %> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="Subject" HeaderText="Subject"> |
| <ItemStyle BorderStyle="None" Width="250px"></ItemStyle> |
| <HeaderStyle Width="250px" /> |
| <ItemTemplate> |
| <div> |
| <asp:LinkButton ID="LinkButtonActivity" runat="server" ForeColor="#73abc9" Font-Size="9pt" |
| CommandName="ShowActivity" Font-Bold="true"> |
| <%# Eval("Subject")%></asp:LinkButton> |
| <asp:Label ID="LabelSubject" runat="server" CssClass="label" Width="1px" Visible="false"><%# Eval("Subject")%></asp:Label> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="Location" HeaderText="Location" Display="false"> |
| <ItemStyle BorderStyle="None" ></ItemStyle> |
| <ItemTemplate> |
| <div> |
| <%# Eval("Location")%> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="DueDate" HeaderText="Due Date" Visible="false" |
| Display="false"> |
| <ItemStyle BorderStyle="None"></ItemStyle> |
| <ItemTemplate> |
| <div> |
| <%# Eval("DueDate")%> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="Contact" HeaderText="Contact" Visible="false" |
| Display="false"> |
| <ItemStyle BorderStyle="None"></ItemStyle> |
| <ItemTemplate> |
| <div> |
| <%# Eval("Contact")%> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="Description" HeaderText="Description" Visible="false" |
| Display="false"> |
| <ItemStyle BorderStyle="None"></ItemStyle> |
| <ItemTemplate> |
| <div> |
| <%# Eval("Description")%> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="ActivityStatus" HeaderText="Status" Visible="false" |
| Display="false"> |
| <ItemStyle BorderStyle="None"></ItemStyle> |
| <ItemTemplate> |
| <div> |
| <%# Eval("ActivityStatus")%> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="ActivityType" HeaderText="Type" Visible="false" |
| Display="false"> |
| <ItemStyle BorderStyle="None"></ItemStyle> |
| <ItemTemplate> |
| <div> |
| <%# Eval("ActivityType")%> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="ActivitySubType" HeaderText="Sub-Type" Visible="false" |
| Display="false"> |
| <ItemStyle BorderStyle="None"></ItemStyle> |
| <ItemTemplate> |
| <div> |
| <%# Eval("ActivitySubType")%> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="Keywords" HeaderText="Keywords" Visible="false" |
| Display="false"> |
| <ItemStyle BorderStyle="None"></ItemStyle> |
| <ItemTemplate> |
| <div> |
| <%# Eval("Keyword")%> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="Priority" HeaderText="Priority" Visible="false" |
| Display="false"> |
| <ItemStyle BorderStyle="None"></ItemStyle> |
| <ItemTemplate> |
| <div> |
| <%# Eval("Priority")%> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="Participants" HeaderText="Participants" Visible="false" |
| Display="false"> |
| <ItemStyle BorderStyle="None"></ItemStyle> |
| <ItemTemplate> |
| <div> |
| <%# Eval("Participants")%> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="TimeSpent" HeaderText="TimeSpent" Visible="false" |
| Display="false"> |
| <ItemStyle BorderStyle="None"></ItemStyle> |
| <ItemTemplate> |
| <div> |
| <%# Eval("TimeSpent")%> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="PercentComplete" HeaderText="% Complete" |
| Visible="false" Display="false"> |
| <ItemStyle BorderStyle="None"></ItemStyle> |
| <ItemTemplate> |
| <div> |
| <%# Eval("PercentComplete")%> |
| </div> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridBoundColumn DataField="ActivityID" Visible="false" UniqueName="ActivityID"> |
| </telerik:GridBoundColumn> |
| <telerik:GridDateTimeColumn DataField="Date" AllowFiltering="true" Visible="false" |
| DataFormatString="{0:MM/dd/yyyy}" UniqueName="Date"> |
| </telerik:GridDateTimeColumn> |
| <telerik:GridBoundColumn DataField="ActivityPrimaryParticipant" AllowFiltering="true" |
| Visible="false" UniqueName="ActivityPrimaryParticipant"> |
| </telerik:GridBoundColumn> |
| </Columns> |
| <CommandItemTemplate> |
| <asp:ImageButton ID="ImageButtonAdd" runat="server" ImageUrl="~/App_Themes/MLightning/Layout/plus-icon.png" |
| AlternateText="Add" PostBackUrl="~/Calendar/CalendarActivityAddSettings.aspx" /> </CommandItemTemplate> |
| <PagerStyle Position="TopAndBottom" PrevPageText="Prev" NextPageText="Next" Mode="NextPrev" /> |
| </MasterTableView> |
| </telerik:RadGrid> |
.cs code:
| private void ConfigureGridColumns() |
| { |
| DataTable dtCalendarSettings = LoadCalendarSettings(); |
| if (dtCalendarSettings.Rows.Count > 0) |
| { |
| foreach (DataRow row in dtCalendarSettings.Rows) |
| { |
| int width = 0; |
| GridTemplateColumn col; |
| #region Add Columns For user Settings |
| switch (row["FieldName"].ToString().ToLower()) |
| { |
| case "status": |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("ActivityStatus"); |
| int.TryParse(row["FieldWidth"].ToString(), out width); |
| col.HeaderStyle.Width = Unit.Pixel(width); |
| col.ItemStyle.Width = Unit.Pixel(width); |
| col.Display = true; |
| col.Visible = true; |
| width = 0; |
| break; |
| case "type": |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("ActivityType"); |
| int.TryParse(row["FieldWidth"].ToString(), out width); |
| col.HeaderStyle.Width = Unit.Pixel(width); |
| col.ItemStyle.Width = Unit.Pixel(width); |
| col.Display = true; |
| col.Visible = true; |
| width = 0; |
| break; |
| case "subtype": |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("ActivitySubType"); |
| int.TryParse(row["FieldWidth"].ToString(), out width); |
| col.HeaderStyle.Width = Unit.Pixel(width); |
| col.ItemStyle.Width = Unit.Pixel(width); |
| col.Display = true; |
| col.Visible = true; |
| width = 0; |
| break; |
| case "keywords": |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("Keywords"); |
| int.TryParse(row["FieldWidth"].ToString(), out width); |
| col.HeaderStyle.Width = Unit.Pixel(width); |
| col.ItemStyle.Width = Unit.Pixel(width); |
| col.Display = true; |
| col.Visible = true; |
| width = 0; |
| break; |
| case "priority": |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("Priority"); |
| int.TryParse(row["FieldWidth"].ToString(), out width); |
| col.HeaderStyle.Width = Unit.Pixel(width); |
| col.ItemStyle.Width = Unit.Pixel(width); |
| col.Display = true; |
| col.Visible = true; |
| width = 0; |
| break; |
| case "contact name": |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("Contact"); |
| int.TryParse(row["FieldWidth"].ToString(), out width); |
| col.HeaderStyle.Width = Unit.Pixel(width); |
| col.ItemStyle.Width = Unit.Pixel(width); |
| col.Display = true; |
| col.Visible = true; |
| width = 0; |
| break; |
| case "location": |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("Location"); |
| int.TryParse(row["FieldWidth"].ToString(), out width); |
| col.HeaderStyle.Width = Unit.Pixel(width); |
| col.ItemStyle.Width = Unit.Pixel(width); |
| col.Display = true; |
| col.Visible = true; |
| width = 0; |
| break; |
| case "description": |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("Description"); |
| int.TryParse(row["FieldWidth"].ToString(), out width); |
| col.HeaderStyle.Width = Unit.Pixel(width); |
| col.ItemStyle.Width = Unit.Pixel(width); |
| col.Display = true; |
| col.Visible = true; |
| width = 0; |
| break; |
| case "participants": |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("Participants"); |
| int.TryParse(row["FieldWidth"].ToString(), out width); |
| col.HeaderStyle.Width = Unit.Pixel(width); |
| col.ItemStyle.Width = Unit.Pixel(width); |
| col.Display = true; |
| col.Visible = true; |
| width = 0; |
| break; |
| case "due date": |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("DueDate"); |
| int.TryParse(row["FieldWidth"].ToString(), out width); |
| col.HeaderStyle.Width = Unit.Pixel(width); |
| col.ItemStyle.Width = Unit.Pixel(width); |
| col.Display = true; |
| col.Visible = true; |
| width = 0; |
| break; |
| case "percentage complete": |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("PercentComplete"); |
| int.TryParse(row["FieldWidth"].ToString(), out width); |
| col.HeaderStyle.Width = Unit.Pixel(width); |
| col.ItemStyle.Width = Unit.Pixel(width); |
| col.Display = true; |
| col.Visible = true; |
| width = 0; |
| break; |
| case "time spent": |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("TimeSpent"); |
| int.TryParse(row["FieldWidth"].ToString(), out width); |
| col.HeaderStyle.Width = Unit.Pixel(width); |
| col.ItemStyle.Width = Unit.Pixel(width); |
| col.Display = true; |
| col.Visible = true; |
| width = 0; |
| break; |
| } |
| #endregion Add Columns |
| } |
| } |
| else |
| { |
| GridTemplateColumn col; |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("Location"); |
| col.HeaderStyle.Width = Unit.Pixel(120); |
| col.ItemStyle.Width = Unit.Pixel(120); |
| col.Display = true; |
| col.Visible = true; |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("DueDate"); |
| col.HeaderStyle.Width = Unit.Pixel(120); |
| col.ItemStyle.Width = Unit.Pixel(120); |
| col.Display = true; |
| col.Visible = true; |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("Contact"); |
| col.HeaderStyle.Width = Unit.Pixel(120); |
| col.ItemStyle.Width = Unit.Pixel(120); |
| col.Display = true; |
| col.Visible = true; |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("Description"); |
| //col.HeaderStyle.Width = Unit.Pixel(200); |
| //col.ItemStyle.Width = Unit.Pixel(200); |
| col.Display = true; |
| col.Visible = true; |
| col = (GridTemplateColumn)RadGridCalendar.MasterTableView.GetColumn("Participants"); |
| col.HeaderStyle.Width = Unit.Pixel(150); |
| col.ItemStyle.Width = Unit.Pixel(150); |
| col.Display = true; |
| col.Visible = true; |
| } |
| } |
Any thoughts on what I might be doing wrong?
Is it also possible to hide the horizontal scrolling completely?
3 Answers, 1 is accepted
0
newbie
Top achievements
Rank 1
Rank 1
answered on 21 Jun 2010, 07:14 PM
Update:
soon after I posted this i made one change to the code. I removed all the ItemStyle width assignment from code behind and it seems to be working fine. It aligns the headers and columns properly and shows the horizontal scrollbar.
Though I am unable to hide the vertical scrollbar yet. Is there a way I can hide that?
soon after I posted this i made one change to the code. I removed all the ItemStyle width assignment from code behind and it seems to be working fine. It aligns the headers and columns properly and shows the horizontal scrollbar.
Though I am unable to hide the vertical scrollbar yet. Is there a way I can hide that?
0
Manuel Ortiz
Top achievements
Rank 1
Rank 1
answered on 23 Sep 2010, 04:04 PM
Hello, did you find the way of hiding the vertical scrollbar?
0
Hi Manuel,
To render merely the horizontal scroll and avoid the appearance of the vertical scroll, make sure that the height of the records in the grid does not exceed the ClientSettings -> Scrolling -> ScrollHeight scroll setting.
Additionally, please have in mind that it is not recommended to use ItemStyle-Width to set column widths. Only HeaderStyle-Width should be used.
All the best,
Pavlina
the Telerik team
To render merely the horizontal scroll and avoid the appearance of the vertical scroll, make sure that the height of the records in the grid does not exceed the ClientSettings -> Scrolling -> ScrollHeight scroll setting.
Additionally, please have in mind that it is not recommended to use ItemStyle-Width to set column widths. Only HeaderStyle-Width should be used.
All the best,
Pavlina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items