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

6 posts, 0 answers
  1. kumdoin
    kumdoin avatar
    2 posts
    Member since:
    Mar 2013

    Posted 10 Mar 2013 Link to this post

    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");
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 12 Mar 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. kumdoin
    kumdoin avatar
    2 posts
    Member since:
    Mar 2013

    Posted 12 Mar 2013 Link to this post

    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
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 14 Mar 2013 Link to this post

    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!
  6. Nick
    Nick  avatar
    2 posts
    Member since:
    Jul 2015

    Posted 04 Nov 2015 in reply to Alexander Valchev Link to this post

    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?
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 06 Nov 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready