[Solved] Making Grid Responsive Not Working

[Lynn]

I am having an issue trying to make a RadGrid responsive using CSS.  When the browser width is wide, the 6 columns are all visible.  When the user shrinks the browser width, at a certain point two of the columns disappear as they should -- but at the same time a new column shows up that doesn't even have a header visible.  It's very strange.  Any help would be most appreciated. The basic grid is defined in the .aspx as:

<telerik:RadGrid ID="RadGrid1" runat="server" Width="99.7%" AutoGenerateColumns="false" AllowPaging="false" OnItemDataBound="RadGrid1_ItemDataBound"></telerik:RadGrid>

The columns to the grid are defined in the code behind as:

 

GridHyperLinkColumn hypercolumn = null;
GridBoundColumn boundcolumn = null;
RadGrid1.EnableViewState = false;
InitGrid(ref RadGrid1);
RadGrid1.NeedDataSource += new Telerik.Web.UI.GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource);
RadGrid1.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.None;
RadGrid1.MasterTableView.DataKeyNames = new string[] { "FAQ" };

string templateColumnName = "Edit";
GridTemplateColumn templateColumn = new GridTemplateColumn();
templateColumn.ItemTemplate = new MyTemplate(templateColumnName);
templateColumn.AllowFiltering = false;
templateColumn.HeaderText = "Edit";
RadGrid1.MasterTableView.Columns.Add(templateColumn);

boundcolumn = new GridBoundColumn();
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 = new GridBoundColumn();
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 = new GridBoundColumn();
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 = new GridBoundColumn();
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 = new GridTemplateColumn();
templateColumn.ItemTemplate = new MyTemplate2(templateColumnName);
templateColumn.AllowFiltering = false;
templateColumn.HeaderText = "Delete";
RadGrid1.MasterTableView.Columns.Add(templateColumn);

 

I have attached two (2) screen captures -- the first when it is wide, the second after the user shrinks the window.  Any assistance would be most appreciated.  I am running on Windows 10, this project is in Visual Studio 2013.

Thanks in advance.

 

[Kostadin]

Hi Lynn,

Thank you for contacting us.

I examine the provide code and I noticed that you have create the columns on the server while you have added the grid declaration in the mark-up. You should note that when using a template columns you need to create the entire grid on the server on Page_Init event handler. I would recommend you to examine the following help article which elaborates more on this matter.

Regards,
Kostadin
Telerik

[Lynn]

And when I follow the instructions provided, then I can no longer reference the RadGrid in JavaScript.  How do I reconcile this new error ("The name 'RadGrid1' does not exist in the current context")?

[Lynn]

I made the changes recommended by the documentation you referred me to and the problem still exists.  I have add the new .aspx code plus the new code behind.  I think you folks have a true bug here unless you can provide me with specific changes I can make that will correct this.

First, I have attached 2 additional screen captures that show what happens when it is wide, and what happens when it goes narrow (responsive).

Second, my .aspx file source code for the grid placeholder is immediately following and then the code behind source follows that.

 If you should have specific recommendations you can make instead of just pointing me at documentation, I would be most interested in seeing them.

<asp:PlaceHolder id="PlaceHolder1" runat="server">

</asp:PlaceHolder>

 

protected void Page_Init(object sender, System.EventArgs e)
{
    if (!Page.IsPostBack)
    {
        this.CreateNew.Enabled = CheckSecRule(66);
        GridHyperLinkColumn hypercolumn = null;
        GridBoundColumn boundcolumn = null;
        GridTemplateColumn tempcolumn = null;

        RadGrid RadGrid1 = new RadGrid();

        RadGrid1.EnableViewState = false;
        RadGrid1.NeedDataSource += new Telerik.Web.UI.GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource);
        InitGrid(ref RadGrid1);
        RadGrid1.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.None;
        RadGrid1.MasterTableView.DataKeyNames = new string[] { "MAB" };

        string templateColumnName = "Edit";
        GridTemplateColumn templateColumn = new GridTemplateColumn();
        templateColumn.ItemTemplate = new MyTemplate(templateColumnName);
        templateColumn.AllowFiltering = false;
        templateColumn.HeaderText = "Edit";
        RadGrid1.MasterTableView.Columns.Add(templateColumn);

        GridBoundColumn boundColumn1 = new GridBoundColumn();
        boundColumn1.DataField = "MABName";
        boundColumn1.UniqueName = "MABName1";
        boundColumn1.HeaderText = "Master Agent Billing Set1";
        boundColumn1.FilterControlWidth = Unit.Pixel(50);
        RadGrid1.MasterTableView.Columns.Add(boundColumn1);

        boundColumn1 = new GridBoundColumn();
        boundColumn1.DataField = "MABName";
        boundColumn1.UniqueName = "MABName2";
        boundColumn1.HeaderText = "Master Agent Billing Set2";
        boundColumn1.AllowFiltering = false;
        boundColumn1.HeaderStyle.CssClass = "mediumgridcol";
        boundColumn1.ItemStyle.CssClass = "mediumgridcol";
        boundColumn1.FooterStyle.CssClass = "mediumgridcol";
        RadGrid1.MasterTableView.Columns.Add(boundColumn1);

        boundColumn1 = new GridBoundColumn();
        boundColumn1.DataField = "MABName";
        boundColumn1.UniqueName = "MABName3";
        boundColumn1.HeaderText = "Master Agent Billing Set3";
        boundColumn1.AllowFiltering = false;
        boundColumn1.HeaderStyle.CssClass = "mediumgridcol";
        boundColumn1.ItemStyle.CssClass = "mediumgridcol";
        boundColumn1.FooterStyle.CssClass = "mediumgridcol";
        RadGrid1.MasterTableView.Columns.Add(boundColumn1);

        templateColumnName = "Delete";
        templateColumn = new GridTemplateColumn();
        templateColumn.ItemTemplate = new MyTemplate2(templateColumnName);
        templateColumn.AllowFiltering = false;
        templateColumn.HeaderText = "Delete";
        RadGrid1.MasterTableView.Columns.Add(templateColumn);

        RadGrid1.AllowPaging = Convert.ToBoolean(Session["ShowListsWithPaging"]);
        PlaceHolder1.Controls.Add(RadGrid1);
    }
}

 

 

[Lynn]

I think it is obvious that I can set the cssclass for the heading, the data contents, and the footer for a given column to "{ display: none;}", but there appears to be no way to do the same for the Filter cell.  Is that correct?

I have tested this by only trying to make one column hidden.  When I do this, only one of these weird cells is displayed at the far right end of the grid.

If I make 2 of the columns hidden when the browser width is decreased, then I have 2 of these weird cells that show up.

How do I make these "ghost filter cells" go away, hide, etc.?

[Kostadin]

Hi Lynn,

Could you please share the CSS that you are using and also the code where you hide the columns? I prepared a small sample based on the provided code but when I shrink the browser window the columns is not hide and also their size its change. Please try to replicate the issue in the attached sample and let me know what else I should include.

Regards,
Kostadin
Telerik

[Lynn]

Kostadin,
 Thank you for your efforts!  I had some difficulties using the project you sent.  For some odd (and unexplained) reason, I could not add JavaScript files and CSS files to the project and get the webpage to load them.  I kept getting an HTTP 500 error.
I created a new project, made it a Telerik project, created a Default.aspx, and then added the exact code to it that you had in your project.  I added the relevant Bootstrap files (JavaScript and CSS) and some additional CSS classes used in the responsive Bootstrap functionality and was able to re-create the issue.
It appears to me that the "key" to re-creating the issue is to add "column filtering" to the grid, and then to use the included CSS to make certain columns disappear (see the class .mediumgridcol definition in the extra CSS file.  This class is used to make the header, footer, and data column entries disappear, but because there is no similar aggregate method of making the filter column disappear it remains.  The odd things are that the grid actually relocates the almost hidden column to the far right-hand end of the grid when the issue presents itself.
 You should have no difficulty recreating this issue with the attached Visual Studio 2013 project.
 Thanks!
Ooops!  After I zipped the file containing the entire solution and tried to upload it, I discovered your 2MB limit on attached files.  I have to remove all .bin entries and the entire .lib folder from the project to get the project under the 2MB limit.  You should be able to re-construct with what is still in the project.

Sorry........you ask me to re-create the problem using your project.  I had to create a new project to get a workable solution.  I cannot upload it because your forum file uploader will not allow me to upload a .zip file.  It only seems to allow a graphic.  Do you want me to "rename" the file to .png or what?

 

Lynn

 

[Kostadin]

Hello Lynn,

It would be best if you can open a new support ticket and attach the files there. The limit of the file is 20 MB and you are allowed to upload a zip archive.

Regards,
Kostadin
Telerik