Add Bootstrap class to an asp.net mvc webGrid column

Question

I have the following WebGrid column inside my asp.net mvc web application :-

gridcolumns.Add(new WebGridColumn() { ColumnName ="Description",Header = Html.DisplayNameFor(model => model.Content.FirstOrDefault().Description).ToString(),CanSort=true
,
    Format = @<text>@item.TrimmedDescription</text>});

my question is how i can add hidden-sm bootstrap class to the above column, so that the column will be hidden on small devices ? can anyone advice ?

Thanks

EDIT

i define the Style as follow:-

gridcolumns.Add(new WebGridColumn() { ColumnName ="Description",Header = Html.DisplayNameFor(model => model.Content.FirstOrDefault().Description).ToString(),CanSort=true
,
    Format = @<text>@item.TrimmedDescription</text>,Style="hidden-sm"});
var grid = new WebGrid(
                        canPage: true,
                        rowsPerPage: Model.PageSize,
                        canSort: true,
                        ajaxUpdateContainerId: "skillgrid", fieldNamePrefix: "skill");

            grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
            grid.Pager(WebGridPagerModes.All);

            @grid.GetHtml(htmlAttributes: new { id = "skillgrid" },   // id for ajaxUpdateContainerId parameter
            fillEmptyRows: false,
            tableStyle: "table table-bordered table-hover",
            mode: WebGridPagerModes.All,
            columns: gridcolumns

            );

the above have removed the Description column on small devices ,, but the grid header is still showing "Description" . so now i got wrong overlap between WebGrid headers and WebGrid columns content...

score 1 · Answer 1 · answered Mar 05 '15 at 16:39

1

It has a style property, you have to just set that property of WebGridColumn properties:

style: "yourcssclass"

or:

style = "yourcssclass"

you can also check this article

answered Mar 05 '15 at 16:39

Ehsan Sajjad

61,834
16
105
160

so i can add a css class inside the style , something such as style: "hidden-sm" ??? – John John Mar 05 '15 at 17:20
This have removed the column content on small devices, but the column header is still showing ,, can you please check my edit inside my original question ? – John John Mar 05 '15 at 17:32
1

You have to add class on header as well – Ehsan Sajjad Mar 05 '15 at 17:38
does the WebGrid support defining Style for the header ? – John John Mar 05 '15 at 17:45
I dont know about that @john G sorry for that – Ehsan Sajjad Mar 05 '15 at 17:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72356/discussion-between-ehsan-sajjad-and-john-g). – Ehsan Sajjad Mar 05 '15 at 17:55

Add Bootstrap class to an asp.net mvc webGrid column

1 Answers1