MVC Grid Hide Column Bootstrap

3 posts, 0 answers
  1. Mike
    Mike avatar
    16 posts
    Member since:
    Feb 2014

    Posted 02 May 2014 Link to this post

    Is it possible to hide grid columns using the css from Bootstrap. I have the following grid control and the data hides as expected but the column names don't.

    .Columns(c =>
        {
            c.Bound(col => col.ActiveBool).Width(12).Title("Active").HtmlAttributes(new { @class = "visible-xs visible-lg visible-sm" });
            c.Bound(col => col.District).Width(12).Title("Dist").HtmlAttributes(new { @class = "visible-xs visible-lg visible-sm" });
            c.Bound(col => col.ContractId).ClientTemplate(@Html.ActionLink("#= ContractId #", "ActiveContracts", "ActiveContracts", new { id = "#= ContractId #", @class = "visible-sm visible-lg visible-xs" }, null).ToHtmlString()).Width(16);
            c.Bound(col => col.Status).Width(23).HtmlAttributes(new { @class = "visible-lg" });
            c.Bound(col => col.WorkBeginDate).Width(17).Title("Work Begin").HtmlAttributes(new { @class = "visible-lg" });
            c.Bound(col => col.CurrentAmount).Width(20).HtmlAttributes(new { @class = "visible-lg" });
            c.Bound(col => col.ProjectId).Width(18).HtmlAttributes(new { @class = "visible-lg" });
            c.Bound(col => col.DescriptionTrimmed).Width(33).HtmlAttributes(new { title = "<#=Description#>" }).Title("Description").HtmlAttributes(new { @class = "visible-lg" });
            c.Bound(col => col.County).Width(15).HtmlAttributes(new { @class = "visible-lg" });
            c.Bound(col => col.WorkMixTrimmed).Width(22).HtmlAttributes(new { title = "<#=WorkMix#>" }).Title("Work Mix").HtmlAttributes(new { @class = "visible-lg" });
            c.Bound(col => col.VendorNameTrimmed).Width(22).HtmlAttributes(new { title = "<#=VendorName#>" }).Title("Vendor Name").HtmlAttributes(new { @class = "visible-xs  visible-lg  visible-sm" });
            c.Bound(col => col.ViewMap).Width(15).HtmlAttributes(new { @class = "visible-xs  visible-lg visible-sm" });
        })
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 06 May 2014 Link to this post

    Hello Mike,


    The reason for the issue is that the Grid column headers are rendered in a separate table, which is why the applied classes do not influence them. As a solution you could also use the HeaderHtmlAttributes method, which will add the required classes to the headers too.

    I hope this information helps.

    Regards,
    Dimiter Madjarov
    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Mike
    Mike avatar
    16 posts
    Member since:
    Feb 2014

    Posted 07 May 2014 in reply to Dimiter Madjarov Link to this post

    Thanks, that did the trick.
Back to Top