Binding and Filtering

by Sachin Singh


Posted on Friday, 28 February 2020

Tags: How to bind Kendo UI controls with server side data Client side and server side binding Kendo UI Bindings in Kendo UI

Sometimes we need to bind the controls with data, like an Html Select is useless without options and if we want to offer filtering then we have to do a lot of Jquery or CSharp work.

But Kendo UI offers easy mechanism for binding and filtering with it's components.

Binding and Filtering can be done either at the compile time (design time) which is called as client side binding and filtering or at run time with server side data which is called as server side binding and filtering.

Client Side Binding

For client side binding we use BindTo Option of Kendo UI Component and specify the List of object or string etc with which we want to bind the control.

Let's take an example of Kendo DropDownList

    
        @(Html.Kendo().DropDownList().Name("ddlFruits").BindTo(new List<string>() {
        "Mango","Banana","Apple","Grapes"
      }).OptionLabel("select.."))
    
    

You will get the below output

Kendo DropDownList Client Side Binded
DropDownList with client side data
    
      @(Html.Kendo().DropDownList().Name("ddlSports").BindTo(new List<SelectListItem>() {
       new SelectListItem(){Text="Cricket",Value="0"},
        new SelectListItem(){Text="Football",Value="1"},
          new SelectListItem(){Text="Hockey",Value="2"},
            new SelectListItem(){Text="Basketball",Value="3"},
     }).OptionLabel("select"))
    
    

Now you will get a dropdownList like below figure

Kendo DropDownList Client Side Binded
DropDownList with client side data

Server Side Binding

For Server Side Binding we use DataSource option and specify the Action and Controller name in the Read method .

Lets again take the example of DropDownList and Bind it with server side data.

Steps:-

1.Create two Action Method as given below,under any controller ,I am making it in HomeController.

    
           public ActionResult GetMovies()
            {
                List<movie> Movies = new List<movie>(){
                   new  Movie(){Id=1,MovieName="3 Idiots"},
                    new  Movie(){Id=2,MovieName="4 Idiots"},
                     new  Movie(){Id=3,MovieName="5 Idiots"},
                      new  Movie(){Id=4,MovieName="6 Idiots"},
                };
                return Json(Movies, JsonRequestBehavior.AllowGet);
            }
    
    
Create another action method that just returns a view. The view where you want a DropDownList like below Here I have used the Movie class object, you can make any class with any type of property or you can simply make a list of strings, etc.
    
      public class Movie
        {
            public int Id { get; set; }
            public string MovieName { get; set; }
        }
    

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

2.Now in this view create on DropDownList as below

    
         @(Html.Kendo().DropDownList()
              .Name("ddlMovies")
              .OptionLabel("Select")
              .DataTextField("MovieName")
              .DataValueField("Id")
              .DataSource(d => d.Read("GetMovies", "Home")))
    
    

Client side Filtering

for Client side filtering we have to set the ServerFiltering option to false if we are binding the control with server side data.

We need to specify the Filter option with Filter Type .Filter Type is nothing but the way you want to filter the data like startswith ,contains etc.

You can also specify theMin Length that is the length after which filtering should happen by using the MinLength option.If you will not specify the MinLength then filtering will start happening as soon as you start typing.

Let's take few examples :-

1.

Client Side filtering when DropDownList is binded with Client Side or Static data.

    
            @(Html.Kendo().DropDownList().Name("ddlFruits").Filter("Contains").BindTo(new List<string>() {
                           "Mango","Banana","Apple","Grapes"
              }).OptionLabel("select.."))
    
    

2.

Client Side Filtering when DropDownList is binded with Server Side data.

    
        @(Html.Kendo().DropDownList()
            .Name("ddlMovies")
            .Filter("Contains")
            .OptionLabel("Select")
            .DataTextField("MovieName")
            .DataValueField("Id")
            .DataSource(d => d.Read("GetMovies", "Home")
            .ServerFiltering(false)
         )
        )
    
    

Server Side Filtering

for Server side filtering we have to set the ServerFiltering option to True

We need to specify the Filter option with Filter Type .Filter Type is nothing but the way you want to filter the data like startswith ,contains etc.

we also need to specify one additional option i.e Data which accepts function. Through this function we get the value or text of the control,and this value is sent to the server for filtering.

Lets understand with the same example.

Modify the Action method as below ,now the action should accept a parameter,it is the parameter we use for filtering.

    
      public ActionResult GetMovies(String text)
            {
                List<movie> Movies = new List<movie>(){
                   new  Movie(){Id=1,MovieName="3 Idiots"},
                    new  Movie(){Id=2,MovieName="4 Idiots"},
                     new  Movie(){Id=3,MovieName="5 Idiots"},
                      new  Movie(){Id=4,MovieName="6 Idiots"},
                };

                if (!string.IsNullOrEmpty(text))
                {
                    Movies = Movies.Where(p => p.MovieName.Contains(text)).ToList();
                }
                return Json(Movies, JsonRequestBehavior.AllowGet);
            }
    
    

Modify the DropDownList to specify the Data option as below and also create a function like below.

    
          @(Html.Kendo().DropDownList()
            .Name("ddlMovies")
            .OptionLabel("Select")
            .DataTextField("MovieName")
            .DataValueField("Id")
            .Filter("contains")
            .MinLength(3)
            .DataSource(source =>
              {
                source.Read(read =>
              {
                 read.Action("GetMovies", "Home")
                .Data("DataTobeSent");
              })
              .ServerFiltering(false);
        }))
    
    
    
    
    
    

Run the application and you will get below output.

Kendo DropDownList server Side Filtering
DropDownList with server side filtering
Kendo DropDownList server Side Filtering
DropDownList with server side filtering