This is a migrated thread and some comments may be shown as answers.

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

5 Answers 451 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
kumdoin
Top achievements
Rank 1
kumdoin asked on 10 Mar 2013, 07:55 PM
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");

5 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 12 Mar 2013, 10:02 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
kumdoin
Top achievements
Rank 1
answered on 12 Mar 2013, 06:34 PM
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
0
Alexander Valchev
Telerik team
answered on 14 Mar 2013, 10:16 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nick
Top achievements
Rank 1
answered on 04 Nov 2015, 09:12 PM
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?
0
Alexander Valchev
Telerik team
answered on 06 Nov 2015, 04:47 PM
Hi Nick,

Please check this help topic:


Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Data Source
Asked by
kumdoin
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
kumdoin
Top achievements
Rank 1
Nick
Top achievements
Rank 1
Share this question
or