ASP.NET Core Grid Setup

Shield UI Grid for ASP.NET Core is a server-side wrapper component implemented as an ASP.NET Core MVC Helper.

For a detailed guide how to setup Shield UI for your ASP.NET Core project, check out this page.

The ASP.NET Core MVC helper API is a 1:1 mapping of the JavaScript Grid widget configuration, so you only have to get familiar with a single set of configuration options:

// JavaScript Grid demo
$("#grid").shieldGrid({
    dataSource: {
        data: gridData                 
    },
    sorting:{
        multiple: true
    },
    paging: {
        pageSize: 12,
        pageLinksCount: 10
    },
    selection:{
        type: "row",
        multiple: true,
        toggle: false
    },
    columns: [                
        { field: "id", width: "70px", title: "ID" },
        { field: "name", title: "Person Name"},
        { field: "company", title: "Company Name"},
        { field: "email", title:"Email Address", width: "270px"}
    ]
});

// ASP.NET Core Grid demo
@(Html.ShieldGrid()
    .Name("grid")
    .DataSource(ds => ds.Data(@gridData))
    .SortingConfiguration(sb => sb.Multiple(true))
    .PagingConfiguration(pb => pb.PageSize(12).PageLinksCount(10))
    .SelectionConfiguration(sb => sb
        .Type(Shield.Mvc.UI.Grid.SelectionTypeOptions.Row)
        .Multiple(true)
        .Toggle(false))
    .Columns(cb => cb.Field("id").Width(70).Title("ID"))
    .Columns(cb => cb.Field("name").Title("Person Name"))
    .Columns(cb => cb.Field("company").Title("Company Name"))
    .Columns(cb => cb.Field("email").Title("Email Address").Width(270))
)

To see the configuration options in action, please refer to our online demos.