Kendo UI Grid reload data error

Question

I have a Kendo UI Grid with angularjs: when i change an item in the select control, i want reload the data in the grid passing to the url the selected id.

So, in the angular controller i have:

...
var id = 0;
$scope.pers = new kendo.data.DataSource({
    transport: {
        read: {
            url: "api/Pers?role=" + id,
            dataType: "json"
        }
    },
    schema:
    ...
    ...
});

When i select an element in the select control i call correctly this function, passing the id of the selected item and reload the data for the grid

$scope.setRole = function(tmpId){
    id = tmpId;
    $scope.pers.read();
};

When i change the element in the select control is sent a request correctly to the url:

"api/Pers?role=" + id

but the id is always 0 when i change the selection.

How can i resolve this problem?

Answer 1

Try this:

var id = 0;
$scope.pers = new kendo.data.DataSource({
    transport: {
        read: {
            url: function() {
               return "api/Pers?role=" + id;
            },
            dataType: "json"
        }
    },
    schema:
    ...
    ...
});

Basically if your read URL is dynamic, you should define the url by a function so that it regenerates the read URL dynamically.

The way you have currently done it is static so to speak. Kendo has hashed the default id of 0 into your url string and this url remains constant throughout, despite you changing the id value at a later time.