I am trying to make the RadGrid responsive through the use of CSS. I have a grid with six (6) columns. When the user shrinks the browser width I want columns 2 and 3 to hide (2 and 3 relative to 1).
While this does seem to be working perfectly, I have an additional issue when the browser width is reduced...an additional column becomes visible without a heading. It's very strange and I'm hoping you all have seen this problem before. I cannot go live with this kind of issue.
The grid is defined in the .aspx very simply:
<telerik:RadGridID="RadGrid1"runat="server"Width="99.7%"AutoGenerateColumns="false"AllowPaging="false"OnItemDataBound="RadGrid1_ItemDataBound"></telerik:RadGrid>The columns are bound/defined in the code behind:
GridHyperLinkColumn hypercolumn = null;GridBoundColumn boundcolumn = null;RadGrid1.EnableViewState = false;InitGrid(refRadGrid1);RadGrid1.NeedDataSource += newTelerik.Web.UI.GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource);RadGrid1.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.None;RadGrid1.MasterTableView.DataKeyNames = newstring[] { "FAQ"};stringtemplateColumnName = "Edit";GridTemplateColumn templateColumn = newGridTemplateColumn();templateColumn.ItemTemplate = newMyTemplate(templateColumnName);templateColumn.AllowFiltering = false;templateColumn.HeaderText = "Edit";RadGrid1.MasterTableView.Columns.Add(templateColumn);boundcolumn = newGridBoundColumn();this.RadGrid1.Columns.Add(boundcolumn);boundcolumn.UniqueName = "FAQPublic";boundcolumn.DataField = "FAQPublic";boundcolumn.HeaderText = "Public?";boundcolumn.HeaderStyle.CssClass = "mediumgridcol";boundcolumn.ItemStyle.CssClass = "mediumgridcol";boundcolumn.AllowFiltering = false;boundcolumn.Visible = true;boundcolumn = null;boundcolumn = newGridBoundColumn();this.RadGrid1.Columns.Add(boundcolumn);boundcolumn.UniqueName = "FAQIntranet";boundcolumn.DataField = "FAQIntranet";boundcolumn.HeaderText = "Intranet?";boundcolumn.HeaderStyle.CssClass = "mediumgridcol";boundcolumn.ItemStyle.CssClass = "mediumgridcol";boundcolumn.AllowFiltering = false;boundcolumn.Visible = true;boundcolumn = null;boundcolumn = newGridBoundColumn();this.RadGrid1.Columns.Add(boundcolumn);boundcolumn.UniqueName = "FAQTopic";boundcolumn.DataField = "FAQTopic";boundcolumn.FilterControlWidth = Unit.Pixel(50);boundcolumn.HeaderText = "Topic";boundcolumn.Visible = true;boundcolumn = null;boundcolumn = newGridBoundColumn();this.RadGrid1.Columns.Add(boundcolumn);boundcolumn.UniqueName = "FAQQuestion";boundcolumn.DataField = "FAQQuestion";boundcolumn.HeaderText = "Question";boundcolumn.FilterControlWidth = Unit.Pixel(50);boundcolumn.Visible = true;boundcolumn = null;templateColumnName = "Delete";templateColumn = newGridTemplateColumn();templateColumn.ItemTemplate = newMyTemplate2(templateColumnName);templateColumn.AllowFiltering = false;templateColumn.HeaderText = "Delete";RadGrid1.MasterTableView.Columns.Add(templateColumn);
I have attached two (2) screen captures of the grid. The first when it is wide. The second from when the user shrinks the browser window.
If anyone has any ideas of how I can resolve this or how I could be causing this to happen, please let me know.