Bind Kendo Grid datasource(RestURL) with dynamic input param

Question

I have an input text box, a button and a kendo grid. The datasource for the kendo grid is Rest webservice url. My Rest web service needs an input parameter on the basis of which it sends the appropriate json data. My requirement is whenever I click on the button it takes the data from the input box, appends it to the Rest url as its input param, fetches and display the corresponding data from web service. If I change the value in input text box and click on button again then the kendo grid should be refreshed with new set of data returned from web service. Below is my code. HTML:

   <div ng-app="myApp">

   <div ng-controller="myCtrl">

   <div>

    <form>

       Enter Param

      <div>

         <input type="text" ng-model="param">

      </div>

    <button type="submit" ng-click="submitParam()">Submit</button>                            

</form>

</div> 

    <div id="grid" kendo-grid k-options="kendoGrid"></div>

</div>

</div>

Controller:

var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', function ($scope, myService) {
    $scope.param = "";
    $scope.kendoGrid = myService.getKGrid();
    $scope.submitParam = function(){
    **//here param should be appended in the Rest URL and kendo grid data should change as per the** new URL.
    }
});

Service:

myApp.service('myService', function () {
this.getKGrid = function () {                
var kGrid = {
       dataSource: {
       transport: {
         read: {
           url: MyRestURL/param,**//Here the param will be appended**
           dataType: "json"
          }
        },
        },
      columns: [{
                field: "Col1",
                title: "Col1"
            },
            {
                field: "Col2",
                title: "Col2"
            }                                
          ]
        };
       return kGrid;
    };
});

pogo22 pogo22 · Accepted Answer · 2014-12-16T11:49:37

I am able to resolve the problem by changing the Datasource URL dynamically by using grid.dataSource.transport.options.read.url property of Grid datasource. Reference link: Kendo UI Dynamically Change Datasource String (XML)

Bind Kendo Grid datasource(RestURL) with dynamic input param

1 Answers