Proper Syntax for transport READ on a GET (ASP.Net MVC)

4 posts, 1 answers
  1. Rich
    Rich avatar
    80 posts
    Member since:
    Jul 2012

    Posted 26 Jul 2012 Link to this post

    Hi There, i cannot get the datasource to work. Specifically the issue is passing the GET parameter. The only way i've gotten the read to work is to place the paramter directly in the READ URL:


    $(document).ready(function () {
                var dsCategories = new kendo.data.DataSource({
                    transport: {
                        read: "/CostDriver/GetCostDriverCategoriesByRegion/" + $("input[name='region']:checked").val() ,
                ...

    The issue is, on the click of radio button from where this value is coming from, the read uses the ORIGINAL value from the radiobuttongroup from when the page initially loads. Onclick of this radiobuttongroup calls the datasource read but the new value is NEVER sent.

    HOW HOW HOW do you properly use the DATA property in the transport? I have tried everything and it does not work.

    $(document).ready(function () {
                var dsCategories = new kendo.data.DataSource({
                    transport: {
                        read: "/CostDriver/GetCostDriverCategoriesByRegion/",
                        data: { "regionId": $("input[name='region']:checked").val() }
                    }
                });
                $("#selectCategory").width(180).kendoComboBox({
                    dataTextField: "CostDriverCategoryName",
                    dataValueField: "CostDriverCategoryId",
                    dataSource: dsCategories
                });

                $("#selectCommodity").width(180).kendoComboBox({ enabled: false });

                $("input[name='region']").click(function () {
                    alert($("input[name='region']:checked").val());
                    dsCategories.read();
                });
            });
  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Jul 2012 Link to this post

    Hi,

    Using the data parameter is as simple as:

    transport: {
           read: {
                 url: "/CostDriver/GetCostDriverCategoriesByRegion/" , 
                 data: {
                   region: $("input[name='region']:checked").val() 
                 }
           }
    }

    Please refer to the documentation for additional info.

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Rich
    Rich avatar
    80 posts
    Member since:
    Jul 2012

    Posted 26 Jul 2012 Link to this post

    Hi Atanas, Yes that does seem to pass the parameter! Thanks. But the parameter is always the same.. set at page load even though i am changing the value. I know it's changing correctly in the page.. please see below (alerted values are correct)

    Here is my current implementation:

    $(document).ready(function () {
                var dsCategories = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/CostDriver/GetCostDriverCategoriesByRegion/",
                            data: {
                                "regionId": $("input[name='region']:checked").val() }
                            }
                        }
                });

                $("#selectCategory").width(180).kendoComboBox({
                    dataTextField: "CostDriverCategoryName",
                    dataValueField: "CostDriverCategoryId",
                    dataSource: dsCategories
                });

                $("#selectCommodity").width(180).kendoComboBox({ enabled: false });

                $("input[name='region']").click(function () {
                    alert($("input[name='region']:checked").val());
                    dataSource.read();
                });
            });


    This syntax works... in that the paramater is actually sent. I must add {} directly after the read: for it to sent the data. The issue now is what i had before. the "regionId": $("input[name='region']:checked").val() } value is NEVER updated. Whatever was set when the page loads is sent everytime $("input[name='region']") is clicked. It's like the value is cached or scope issue?? Does calling dataSource.read() cached or something?



    **** Edit *** ok got it to work by changing the parameter value in the data to a function:

    data: {
                                "regionId": function () { return $("input[name='region']:checked").val(); }
                            }

    Would be nice to have a simple demo that shows this scenario as i'm sure this would be very common. Make ajax call passing value from html element.. thanks!
  4. Daniel Cuba
    Daniel Cuba avatar
    7 posts
    Member since:
    Oct 2012

    Posted 14 Nov 2012 Link to this post

    Rich, thank you very much, it works to me. I wasted a lot of time trying to solve it.

    Is very curious that needed put the value inside a function, no?

    In my case a have a single javascript variable.

    For example:
    var myVar = "testing"
    This not works:
    myDS: new kendo.data.DataSource({
            transport: {
                read: {
                    // the remote service url
                    url: "../../api/MyMethod/",
                    data: {
                        Id: myVar
                    },
                    datatype: "json"                
                }
            }

    But this works:
    myDS: new kendo.data.DataSource({
            transport: {
                read: {
                    // the remote service url
                    url: "../../api/MyMethod/",
                    data: {
                        Id: function () { return myVar; }
                    },
                    datatype: "json"                
                }
            }
Back to Top