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

[Rich]

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();
            });
        });

[Atanas Korchev]

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

[Rich]

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!

[Daniel Cuba]

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"                
            }
        }