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...

Ehsan Sajjad · Accepted Answer · 2023-10-09 23:59:38Z

2

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

style: "yourcssclass"

or:

style = "yourcssclass"

edited Oct 9, 2023 at 23:59

answered Mar 5, 2015 at 16:39

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

John John Over a year ago

so i can add a css class inside the style , something such as style: "hidden-sm" ???

John John Over a year ago

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 ?

Ehsan Sajjad Over a year ago

You have to add class on header as well

John John Over a year ago

does the WebGrid support defining Style for the header ?

Ehsan Sajjad Over a year ago

I dont know about that @john G sorry for that

|

Collectives™ on Stack Overflow

Add Bootstrap class to an asp.net mvc webGrid column

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related