Change Kendo Grid DataSource Based On Selection In DropDownList

Introduction

In this article, I’ll describe how to change the Kendo Grid DataSource, based on the selected item in Kendo DropDownlist, using ASP.NET MVC and Entity framework. The Application is developed, using Entity framework "Database First" approach and ASP.NET MVC.

Prerequisites

Basic knowledge of ASP.NET MVC, Entity framework and Kendo UI framework.

Creating a Table

For the demo purpose, I am going to create two tables in MS SQL database.

The script, given below is used to create the tables with some records.

CREATE TABLE EmployeeA(
 EmployeeId INT IDENTITY(1,1) CONSTRAINT Pk_Emp_A PRIMARY KEY ,
 FirstName VARCHAR(20),
 LastName VARCHAR(20),
 )
 GO
 INSERT INTO EmployeeA VALUES('Ganesh','Karthick')
 INSERT INTO EmployeeA VALUES('Jai', 'Gugan')
 GO
 CREATE TABLE EmployeeB(
 EmployeeId INT IDENTITY(1,1) CONSTRAINT Pk_Emp_B PRIMARY KEY ,
 FirstName VARCHAR(20),
 LastName VARCHAR(20),
 )
 GO
 INSERT INTO EmployeeB VALUES('Pradeep','Raj')
 INSERT INTO EmployeeB VALUES('Arun', 'Karthick')

Create New MVC Project

Create a new empty ASP.NET MVC Application, as per the figures, given below.

Open Visual Studio -> File -> New Project -> ASP.NET Web Application.

 

 

Select MVC and click OK.



Note -  Please refer to my previous article to learn how to configure Kendo UI in ASP.NET MVC Application.

Generate the Model

Now, we will create Entity framework models from the database tables.

Step 1

Right-click the Models folder, select Add -> ADO.NET Entity Data Model, or select Add->New Item. In the "Add New Item" Window, select data in the left pane and ADO.NET Entity Data Model from the center pane. Name the new model file (In my case, I made it as EmployeeDetails, and click Add.

Step 2

In the Entity Data Model wizard, select EF Designer from the database and click Next.

Step 3

Click the "New Connection" button. The "Connection Properties" Window will open.

Step 4

In the "Connection Properties" Window, provide the name of the local Server, where the database was created (in this case, (DESKTOP-585QGBN)). After providing the Server name, select Employee from the available databases and click OK.

Step 5

You can use the default name for the connection to save the Web.Config file. Now, click Next.

Step 6

Select the table to generate the models for EmployeeA and EmployeeB tables and click Finish.

My database schema is shown in the figure, given below-

 

Create a Controller

Create a new empty controller. Right-click the Controllers folder and select Add –> New Empty Controller. In my case, I named it as GridDataSourceController.cs.

Write the code, given below, in the Controller.

public class GridDataSourceController : Controller
   {
      private EmployeeEntities db = new EmployeeEntities();
        public ActionResult CompanyList()
        {
            return View();
        }
        public ActionResult GetAllEmployeeA([DataSourceRequest]DataSourceRequest request)
        {
            try
            {

                var employee = db.EmployeeAs.ToList();

                return Json(employee.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }

        }
        public ActionResult GetAllEmployeeB([DataSourceRequest]DataSourceRequest request)
        {
            try
            {

                var employee = db.EmployeeBs.ToList();

                return Json(employee.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }

        }
    }

From the Controller, shown above, it is obvious that GetAllEmployeeA and GetAllEmployeeB actions will give a complete employees list of company A and company B, respectively. 

Creating a View

Before going through the View, please check out my previous article Kendo UI Grid with ASP.NET MVC, where I have explained how to implement Kendo Grid, using ASP.NET MVC and Entity framework.

Right click on View-> GridDataSource folder and add new empty View. Write the given code in View.

@model KendoMvcApp.Models.EmployeeA
@{
    ViewBag.Title = "CompanyList";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<br />
<br />
<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <h4> List of Companies </h4>
            @(Html.Kendo().DropDownList()
          .Name("Company")
          .DataTextField("Text")
          .DataValueField("Value")
          .Events(e=>e.Change("onCompanyChange"))
          .BindTo(new List<KendoMvcApp.Models.CompanyList>() {
              new KendoMvcApp.Models.CompanyList() {
                  Text = "Company A",
                  Value = "1"
              },
              new KendoMvcApp.Models.CompanyList() {
                  Text = "Company B",
                  Value = "2"
              }

          })
          .Value("1")
          .HtmlAttributes(new { style = "width: 100%" })
            )
        </div>
        <div class="col-sm-9">
            <h4 id="EmpTitle"> Employees of Company A </h4>

            @(Html.Kendo().Grid<KendoMvcApp.Models.EmployeeA>()
    .Name("EmpGrid")
    .Selectable()
    .Columns(columns =>
    {

        columns.Bound(c => c.FirstName);
        columns.Bound(c => c.LastName);

    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetAllEmployeeA", "GridDataSource"))
        )
            )
        </div>
    </div>
</div>

<script type="text/javascript">
    function onCompanyChange()
    {
        var Company = $("#Company").val();
        var grid = $("#EmpGrid").data("kendoGrid");
        if(Company=='2')
        {
            $("#EmpTitle").text('Employees of Company B ')
        grid.dataSource.transport.options.read.url = "/GridDataSource/GetAllEmployeeB"
        grid.dataSource.read()
        }
        else
        {
            $("#EmpTitle").text('Employees of Company A ')
            grid.dataSource.transport.options.read.url = "/GridDataSource/GetAllEmployeeA"
            grid.dataSource.read()
        }

    }
    var EmployeeBDataSource = new kendo.data.DataSource({
        schema: {
            model: {
                id: "EmployeeId",
                fields: {

                    FirstName: { type: "string" },
                    LastName: { type: "string" }
                }
            }
        },
        batch: true,
        transport: {
            read: {
                url: "/GridDataSource/GetAllEmployeeB",
                dataType: "json"
            },


        }
    })
</script>

From the code, shown above, you can notice that Kendo DropDownList is implemented with the change event. In the change event function definition, we are going to change Kendo Grid datasource, based on the company selection. If company A is selected, the employee of company A will be populated in the Kendo Grid, else, if the company B is selected, the employee of the company B will be populated in Kendo Grid.

Result

Initially the employees of company A will be populated in the Grid.

  

Selecting company B from the dropdownlist of the employees of company B will be populated in the Grid.

 

 

 

I hope you enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome. 

Source Code