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?