Search code examples
jqueryasp.net-mvcasp.net-mvc-4razorwebgrid

How to render webgrid at third column and without headers

ASP.NET MVC4 Razor application page contains table. Table first two columns have fixed names. Other columns have variable names created dynamically from pivot table.

Code below renders all columns and created table header with property names.

How to rendel table starting at third column so first two columns are not shown ? How to render table without column headers ?

View:

@inherits ViewBase<ViewModels.CustomerCardViewModel>

@{
var gd = new WebGrid(source: Model.Rows.Skip(1), canPage: false, canSort: false, rowsPerPage: 1000);
}

<!DOCTYPE HTML>
<html>
... head skipped
<body>
        @gd.GetHtml()
    </div>
    <hr />
</body>
</html>

ViewModel:

    public class CustomerCardViewModel : ViewModelBase
    {
        public IEnumerable<dynamic> Rows { get; set; }
...
}

ASP.NET MVC4, Razor, Bootstrap 3, jquery are used.

Solution

  • 1.To render a table without column headers:

       @gd.GetHtml(
        displayHeader:false
    )

    2.To hide columns - If you have a static list of columns you can use How to hide a column in the Webgrid in aspasp.net MVC? but if it's dynamic then just write a little function using jQuery to hide the desired columns:

    $('.table tr').each(function () {
    var tr = $(this);
    var children = tr.children();
    $(children[0]).hide();
    $(children[1]).hide();
});