Populate Row Filter Grid Using Kendo UI and jQuery

Whenever we populate a grid to display data, it always consists of multiple rows and columns in a simple tabular format. But sometimes we need to display a large amount of data within the grid. So for this reason, we sometimes must use search criteria or filtering features within the grid so that we can easily find or filter the data on the basis of the given criteria. The said criteria or condition may be on one column or multiple columns. We can very easily do this using jQuery.

 

Suppose we want to populate a Student details grid, where  we want to provide a row filter option on the Gender and Course Columns. This article will show how to populate this type of grid view using a Kendo UI and jQuery. For this, at first we need to create the model class of Student as in the following: 

public class Student
{
    public int StudentID { get; set; }
    public string StudentName { get; set; }
    public string CourseName { get; set; }
    public string Gender { get; set; }
}

Now, we add a controller class to the project and add the following code to populate the student list. The product list will be called by an Action Method that returns a JSON result to bind the grid as follows:  

public ActionResult GetStudentData()
{
     List<Student> lstData = GenerateStudentData();
     return Json(lstData, JsonRequestBehavior.AllowGet);
}

public List<Student> GenerateStudentData()
{
     List<Student> lstData = new List<Student>();
     Student s = new Student();
     s.StudentID = 1;
     s.StudentName = "Amit";
     s.Gender = "Male";
     s.CourseName = "BCA";
     lstData.Add(s);

     s = new Student();
     s.StudentID = 2;
     s.StudentName = "Swapan";
     s.Gender = "Male";
     s.CourseName = "B.Sc.";
     lstData.Add(s);

     s = new Student();
     s.StudentID = 3;
     s.StudentName = "Anita";
     s.Gender = "Female";
     s.CourseName = "BCA";
     lstData.Add(s);

     s = new Student();
     s.StudentID = 4;
     s.StudentName = "Kalpana";
     s.Gender = "Female";
     s.CourseName = "B.Sc.";
     lstData.Add(s);

     s = new Student();
     s.StudentID = 5;
     s.StudentName = "Susweta";
     s.Gender = "Female";
     s.CourseName = "BA";
     lstData.Add(s);

     s = new Student();
     s.StudentID = 6;
     s.StudentName = "Tirthankar";
     s.Gender = "Male";
     s.CourseName = "BCA";
     lstData.Add(s);

     s = new Student();
     s.StudentID = 7;
     s.StudentName = "Palash";
     s.Gender = "Male";
     s.CourseName = "B.Sc.";
     lstData.Add(s);

     s = new Student();
     s.StudentID = 8;
     s.StudentName = "Kavita";
     s.Gender = "Female";
     s.CourseName = "BCA";
     lstData.Add(s);
     s = new Student();
     s.StudentID = 9;
     s.StudentName = "Rajatabha";
     s.Gender = "Male";
     s.CourseName = "MCA";
     lstData.Add(s);

     s = new Student();
     s.StudentID = 10;
     s.StudentName = "Dipali";
     s.Gender = "Female";
     s.CourseName = "MCA";
     lstData.Add(s);
     return lstData;
}

public  ActionResult RowFilterGrid()
{
     return View();
}

 Now, right-click on the Action Method "RowFilterGrid" and select Add View. Open the view and provide the following code within the view:

@{
    ViewBag.Title = "Row Filter Grid";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Row Filter Grid</h2>
<div>
    <div id="grdProduct"></div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $.post('@Url.Action("GetStudentData", "Grid")')
            .done(function (result) {
                $('#grdProduct').kendoGrid({
                    dataSource: {
                        data: result,
                        scheme: {
                            model: {
                                fields: {
                                    StudentName: { type: "string" },
                                    Gender: { type: "string" },
                                    CourseName: { type: "string" }
                                }
                            }
                        }
                    },
                    height: 550,
                    filterable: {
                        mode: "row"
                    },
                    pageable: true,
                    columns: [{
                        field: "StudentName",
                        title: "Student Name",
                        width: 200,
                        filterable:
                            {
                                cell:
                                    {
                                        operator: "contains"
                                    }
                            }
                    },
                    {
                        field: "Gender",
                        title: "Gender",
                        width: 100,
                        filterable:
                            {
                                cell:
                                    {
                                        operator: "contains"
                                    }
                            }
                    },
                    {
                        field: "CourseName",
                        title: "Course Name",
                        width: 200,
                        filterable:
                            {
                                cell:
                                    {
                                        operator: "contains"
                                    }
                            }
                    }
                    ]
                });
            }).error(function (r) {
                alert('Try Again')
            });
    });
</script>

Now, its done. Now run the code and it will show the output as in the following: