How do I specify a variable in the middle of data source read?

[kumdoin]

Hi,

I am implementing a cascading dropdown list slightly differently using my existing REST service.  Let's say a user selected category 1 and I want to display all the products in the second dropdown menu.       The following rest service will return all the products for category 1 .

             myhost:8080/myapp/categories/1/products.json    

Note that I hardcoded the '1'.     How can I pass the selected category id to the middle of the read URL?    

$("#categories").kendoDropDownList({

    optionLabel: "Select Category...",

    dataTextField: "name",

    dataValueField: "id",

    select: onSelect,

    dataSource: {

        //serverFiltering: true,

        transport: {

            read: "/myapp/categories"

        }

    }

});

var products = $("#products").kendoDropDownList({

    autoBind: false,

    cascadeFrom: "categories",

    optionLabel: "Select product...",

    dataTextField: "name",

    dataValueField: "id",

    dataSource: {

        // serverFiltering: true,

        transport: {
           //HARDCODED '1' SHOULD BE REPLACED WITH A SELECTED CATEGORY ID

            read:

                "/myapp/categories/1/products"

        }

    }

}).data("kendoDropDownList");

[Alexander Valchev]

Hi Kumdoin,

As I understood it you would like to modify the read url dynamically. In this case, you should define it as a function. In the corresponding documentation you will find an example that demonstrates the syntax.

You can get selected category ID from the function arguments:

transport: {
    read: {
        url: function(params) {
            var filters = params.data.filter.filters; //array of filters
            //build the url
            return url;
        }
    }
}

I hope this will help.

Regards,
Alexander Valchev
the Telerik team

[kumdoin]

Hi Alexander,

Thanks for the quick response. 

Your suggested $params approach didn't work but that gave me a hint and now I can construct correct url. 

var products = $("#products").kendoDropDownList({

    autoBind: false,

    cascadeFrom: "categories",

    optionLabel: "Select product...",

    dataTextField: "name",

    dataValueField: "id",

    dataSource: {

        serverFiltering: true,

        transport: {           

                 read:

                "/myapp/categories/" + $("#categories").val() + "/products"

        }

    }

}).data("kendoDropDownList");

By the way, it will be nice if Kendo UI supports the above REST url pattern.  It's more RESTful and easy to read and code.   

Here's a great article about REST resource URL pattern. 

http://blog.apigee.com/detail/simplify_associations_sweep_complexities_under_the_http/
 
Thanks!

Kumdoin

[Alexander Valchev]

Hello Kumdoin,

Thank you for the feedback.

In the way read transport is currently defined, the url will be build correctly initially but will not change at a later point. If you want to change the url dynamically you should define it as a function:

read: function() {
    return "/myapp/categories/" + $("#categories").val() + "/products"
}

All the best,
Alexander Valchev
the Telerik team

[Nick]

I am trying to do something similar as above however i am doing all of this in a MVC wrapper and i don't understand how to translate the above suggestion to the MVC Wrapper. How do i define a custom object for the read.url in the wrapper?

[Alexander Valchev]

Hi Nick,

Please check this help topic:

• http://docs.telerik.com/kendo-ui/aspnet-mvc/custom-datasource#using-the-clienthandlerdescriptor-class-to-a-set-javascript-function-or-object-as-an-option-for-datasource

Regards,
Alexander Valchev
Telerik