Change datasource url on Grid

[Tycho]

Hi,

I've got a dropdown and a grid. The idea is to change the data displayed in the grid depending on the selection made in the dropdown.
The datasource uses a json service. When the page is loaded the grid is filled with the data from the json service. After changing the selection in the dropdown the transport url is changed according to the alert. But capturing the network traffic reveals that the original url is called instead of the one with the new parameter. 

The html excerpt:

<input id="ddlFacility" />

 

<div id="SiteOverviewTabStrip">

            <ul>

                <li class="k-state-active">Regional dashboard</li>

                <li>Production summary</li>

            </ul>

            <div class="placeholder table">

                <div id="regionalGrid">

                </div>

            </div>

            <div class="placeholder graph">

                <div id="productionGrid">

                </div>

            </div>

</div>

The script:

// bind to the change event and update the data source url

 var ddlFacility = $("#ddlFacility").data("kendoDropDownList");

ddlFacility.bind("change", function () {

     var grid = $("#regionalGrid").data("kendoGrid");

     grid.dataSource.options.transport.read.url = "/_layouts/SharePoint.Services/ProxyService.svc/GetFacilityRegionalData?origin=" + this.value();

 

  grid.dataSource.read();
      grid.refresh();

  alert(grid.dataSource.options.transport.read.url);
});

Any suggestions?

Kind regards,
Tycho

[Joel]

You have transport and options reversed. Here's what you want set

dataSource.transport.options.read.url = "/_layouts/SharePoint.Services/ProxyService.svc/GetFacilityRegionalData?origin="+ this.value(); 


Joel

[Tycho]

Thanks! That did it.

[Tycho]

Is there a way to update the columns after changing the datasource on a grid?
I'm changing the url to another json call that returns other data so i would like to update the column names.

I tried the following but that didn't update the column names. 

var grid = $(gridname).data("kendoGrid");

grid.columns =[ { title: "NewNameColumn1" },{ title: "Column 2" },{ title: "Column 3" }] ;

grid.refresh();

[Joel]

Hmm, interesting ... I've wondered about this in the past. I haven't tried it as yet but I'm willing to bet the only way to do this right now is to reconfigure/build the entire grid.

[Tycho]

Would you happen to have an example on how to rebuild/reconfigure a grid ?

I've tried adding a placeholder div around the grid, call $('PlaceHolder').empty(), append a new div and create the grid again, but can't get it working.

[Rahul]

wow thanks guys, this kept me hooked up for a while. Works perfect. thanks tycho and Joel !

[Shaun]

Thanks for this. 

[Mohammed]

this is not working bcz datasource.transport does not exist.

[T. Tsonev]

Hello Mohammed,

Please open a separate thread with more details for your case.

Without a reproduction case it's hard to tell if the problems you're experiencing are related to the discussion here.

Regards,
T. Tsonev
Telerik by Progress