Binding Kendo Grid in .NET Core with Example

Kendo UI Grid is a powerful component for displaying and manipulating data in web applications. When combined with ASP.NET Core, it provides developers with a highly efficient and flexible grid system. In this article, we will explore how to bind a Kendo Grid to data in .NET Core, covering both local and remote data binding techniques, as well as server-side and client-side binding approaches. By the end, you'll have a thorough understanding of how to configure and use the Kendo Grid in your ASP.NET Core projects.

1. Introduction to Kendo Grid in .NET Core

Kendo UI Grid is a feature-rich, highly customizable grid component that supports a wide range of functionalities such as paging, sorting, filtering, grouping, and editing. It is especially useful for presenting large datasets in a user-friendly and interactive way.

When working with .NET Core, Kendo Grid can be easily integrated by using the Kendo UI for jQuery package. The Kendo Grid allows for various types of data binding, enabling you to choose the best approach based on your application needs.

2. Setting Up Kendo Grid in .NET Core

Before we dive into data binding examples, we need to set up Kendo Grid in your .NET Core application. Here's how to do it:

Install the Kendo UI package: First, you need to install the Kendo UI for jQuery package via NuGet in your project.
```
Install-Package Kendo.UI
```

Include Kendo UI CSS and JS files: Next, add the necessary Kendo UI CSS and JavaScript files to your layout file (_Layout.cshtml).

<link href="https://kendo.cdn.telerik.com/2024.3.914/styles/kendo.default-v2.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2024.3.914/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.3.914/js/kendo.all.min.js"></script>

Create a Grid in the Razor View: Now, you can add the Kendo Grid to your Razor view.

@(Html.Kendo().Grid<CodingvilaModel>()
    .Name("CodingvilaGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Id).Title("ID");
        columns.Bound(c => c.Name).Title("Name");
        columns.Bound(c => c.Description).Title("Description");
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .HtmlAttributes(new { style = "height: 400px;" })
)

In this example, we are binding a simple grid to a model CodingvilaModel, defining its columns, and enabling pagination, sorting, and filtering.

3. Kendo Grid Data Binding Techniques

Kendo Grid can bind data from a variety of sources, such as local static data, remote server data, or even custom sources. Let’s explore different binding techniques in detail.

3.1 Local Data Binding in .NET Core

Local data binding is suitable when your dataset is small and can be managed on the client-side. You can pass the data directly from the controller to the view using a simple ViewData or ViewBag.

Here’s an example of binding a Kendo Grid to local data:

Controller: In your controller, pass the local data to the view.

public IActionResult Index()
{
    var data = new List<CodingvilaModel>
    {
        new CodingvilaModel { Id = 1, Name = "John Doe", Description = "Software Engineer" },
        new CodingvilaModel { Id = 2, Name = "Jane Smith", Description = "Project Manager" },
        new CodingvilaModel { Id = 3, Name = "Sam Wilson", Description = "UX Designer" }
    };
    return View(data);
}

View: Bind the data to the Kendo Grid using the DataSource option.

@(Html.Kendo().Grid<CodingvilaModel>()
    .Name("CodingvilaGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Id).Title("ID");
        columns.Bound(c => c.Name).Title("Name");
        columns.Bound(c => c.Description).Title("Description");
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Read", "Home"))
    )
    .HtmlAttributes(new { style = "height: 400px;" })
)

3.2 Remote Data Binding in .NET Core

Remote data binding is used when the data comes from a server, often through an API call. This method is ideal for large datasets, as it reduces the load on the client-side by loading only the required data.

Controller: In your controller, create an API endpoint to fetch data.

[HttpGet]
public IActionResult Read()
{
    var data = _context.CodingvilaModel.ToList();
    return Json(data);
}

View: Bind the Kendo Grid to the remote data by configuring the DataSource to make an AJAX call.

@(Html.Kendo().Grid<CodingvilaModel>()
    .Name("CodingvilaGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Id).Title("ID");
        columns.Bound(c => c.Name).Title("Name");
        columns.Bound(c => c.Description).Title("Description");
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Read", "Home"))
    )
    .HtmlAttributes(new { style = "height: 400px;" })
)

3.3 Server-Side Binding in .NET Core

For server-side data binding, you handle the paging, sorting, and filtering on the server side. This is particularly useful when dealing with large datasets, where you only want to load a portion of the data at a time.

Controller: Modify the Read method to handle paging and sorting.

[HttpGet]
public IActionResult Read([DataSourceRequest] DataSourceRequest request)
{
    var data = _context.CodingvilaModel
        .OrderBy(m => m.Name)
        .ToDataSourceResult(request);
    return Json(data);
}

View: Configure the Kendo Grid to use server-side data binding.

@(Html.Kendo().Grid<CodingvilaModel>()
    .Name("CodingvilaGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Id).Title("ID");
        columns.Bound(c => c.Name).Title("Name");
        columns.Bound(c => c.Description).Title("Description");
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Read", "Home"))
    )
    .HtmlAttributes(new { style = "height: 400px;" })
)

3.4 Client-Side Binding in .NET Core

In client-side binding, the data is passed to the Kendo Grid in JSON format and is fully handled on the client side. This approach is suitable for smaller datasets that can be processed entirely on the client-side.

4. Custom Data Binding in Kendo Grid

In cases where your data source is not a typical REST API or if you need to customize the data binding behavior, you can use custom binding methods. For example, you can preprocess the data before binding it to the grid or perform additional transformations.

@(Html.Kendo().Grid<CodingvilaModel>()
    .Name("CodingvilaGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Id).Title("ID");
        columns.Bound(c => c.Name).Title("Name");
        columns.Bound(c => c.Description).Title("Description");
    })
    .DataSource(dataSource => dataSource
        .Custom()
        .Read(read => read.Action("CustomRead", "Home"))
    )
    .HtmlAttributes(new { style = "height: 400px;" })
)

5. Conclusion

Binding Kendo Grid in .NET Core is an essential skill for any developer working with data-driven web applications. With its flexible data binding options whether local, remote, server-side, or client-side Kendo Grid allows you to manage and display data efficiently. By using the techniques and examples outlined in this tutorial, you can easily implement Kendo Grid in your .NET Core projects.