Asp.net core show data in grid using third party tool

There are several third-party grid libraries available for use with ASP.NET Core, each offering different features, customization options, and performance characteristics.

Syncfusion Grid for ASP.NET Core – Complete source code available at Syncfusion_sample

Sample code- Index.cshtml

@{
    var Dropdownlist = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewData["states"], Query = "new ej.data.Query()", AllowFiltering = true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "ID", Text = "Name" } };
}
<ejs-grid id="Grid" dataSource="@ViewData["customers"]" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel","Search" })"
          allowPaging="true" allowSorting="true">
    <e-data-manager crudUrl="/Home/CrudUpdate" adaptor="UrlAdaptor" url="/Home/UrlDatasource"></e-data-manager>
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" newRowPosition="Top"></e-grid-editSettings>
    <e-grid-filtersettings type="Menu"></e-grid-filtersettings>
    <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="EmpName" headerText="EmpName" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="EmpSalary" headerText="EmpSalary" validationRules="@(new { required=true})" width="150"></e-grid-column>
        <e-grid-column field="StateName" headerText="State" width="120" editType="dropdownedit" edit="new {@params = Dropdownlist}"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script src="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js"></script>
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/23.1.36/fluent.css" />
<ejs-scripts></ejs-scripts>

DevExpress ASP.NET Core GridView – Complete source code available at DevExpress_sample

Sample code – Index.cshtml

@(Html.DevExtreme().DataGrid<Customer>()
    .ID("gridContainer")
   .ShowBorders(true)
    .FilterRow(filterRow => filterRow
        .Visible(true)
        .ApplyFilter(GridApplyFilterMode.Auto)
    )
    .SearchPanel(searchPanel => searchPanel
        .Visible(true)
        .Width(240)
        .Placeholder("Search...")
    )
    .HeaderFilter(headerFilter => headerFilter.Visible(true))
    .Paging(paging => paging.Enabled(true))
    .Editing(editing =>
    {
        editing.Mode(GridEditMode.Row);
        editing.AllowAdding(true);
        editing.AllowDeleting(true);
        editing.AllowUpdating(true);
    })
    .Columns(columns =>
    {
        columns.AddFor(m => m.ID);
        columns.AddFor(m => m.EmpName);
        columns.AddFor(m => m.EmpSalary);
        columns.AddFor(m => m.StateID)
            .Width(125)
            .Lookup(lookup => lookup
                .DataSource(d => d.Mvc().Controller("Home").LoadAction("GetStates").Key("ID"))
                .DisplayExpr("Name")
                .ValueExpr("ID")
            );
    })
    .DataSource(d => d.Mvc()
        .Controller("Home")
        .LoadAction("Get")
        .UpdateAction("Put")
        .InsertAction("Post")
        .DeleteAction("Delete")
        .Key("ID")
    )
)

Before choosing a third-party grid tool, consider your specific requirements, such as the features you need, licensing costs, and ease of integration with your ASP.NET Core application. Additionally, make sure to check for the latest versions and updates to ensure compatibility with your project and the ASP.NET Core framework.

-Thank you, happy coding !!

More on ASP.Net

2 Comments

  1. I truly wanted to post a small comment in order to appreciate you for those fantastic instructions you are giving out here. My rather long internet investigation has finally been recognized with beneficial facts to share with my neighbours. I ‘d repeat that we readers actually are undoubtedly fortunate to dwell in a remarkable network with so many awesome people with helpful principles. I feel extremely privileged to have used your web pages and look forward to really more enjoyable minutes reading here. Thanks again for all the details.

Leave a Reply

Your email address will not be published. Required fields are marked *