ToDataSourceResult Binding

Below are listed the steps for you to follow when configuring the Kendo UI DropDownList to use a custom DataSource and thus bind to a ToDataSourceResult instance.

  1. Create an action method which renders the view.

    Example
    public ActionResult Index()
    {
        return View();
    }
    
  2. Create a new action method and pass the Products table as JSON result.

    Example
    public JsonResult GetProducts([DataSourceRequest] DataSourceRequest request)
    {
        NorthwindDataContext northwind = new NorthwindDataContext();
    
        return Json(northwind.Products.ToDataSourceResult(request));
    }
    
  3. Add an Ajax-bound DropDownList.

    Example
    @(Html.Kendo().DropDownList()
        .Name("productDropDownList") //The name of the DropDownList is mandatory. It specifies the "id" attribute of the widget.
        .DataTextField("ProductName") //Specify which property of the Product to be used by the DropDownList as a text.
        .DataValueField("ProductID") //Specify which property of the Product to be used by the DropDownList as a value.
        .DataSource(source =>
        {
            source.Custom()
                    .ServerFiltering(true)
                    .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances.
                    .Transport(transport =>
                    {
                        transport.Read("GetProducts", "Home");
                    })
                    .Schema(schema =>
                    {
                        schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                            .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                    });
        })
    )
    
In this article
Not finding the help you need? Improve this article