I hava a grid and a dropdownlist. When I select one value from the dropdown list I need to change the data on the grid. I have 4 different JSON for the 4 different values in the dropdown. I can't find out how to change the datasource of the grid on the change of the value of the dropdown list. I tried to put my URL on the value on the dropdown, but with no result.
Here is my html
<div class="sceltaApp">
<label for="sceltaApp">Application</label>
<select name="sceltaApp" id="sceltaApp"></select>
</div>
<div>
<div class="gridHeader">Lista Utenti</div>
<div id="Appgrid"></div>
</div>
and the script
$("#sceltaApp").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Report", value: "http://localhost/TK/API/Report" },
{ text: "User", value: "http://localhost/TK/API/User" },
{ text: "Portal", value: "http://localhost/TK/API/Portal" },
{ text: "Roles", value: "http://localhost/TK/API/Roles"},
],
suggest: true,
index: 4
});
var cambioDatabase = $("#Appgrid").data("kendoDropDownList");
cambioDatabase.bind("change", function () {
var grid = $("#Appgrid").data("kendoGrid");
grid.dataSource.transport.read.url = this.value();
grid.dataSource.read();
grid.refresh();
});
//Griglia Utente
$("#Appgrid").kendoGrid({
toolbar: ["search"],
dataSource: cambioDatabase,
search: {
fields: ["descrizioneUtente"],
fields: ["dataScadenza"],
fields: ["usernameUtente"],
fields: ["dataAttivazione"],
},
autobind: false,
navigatable: true,
pageable: true,
sortable: true,
height: 550,
columns: [
{ field: "USERNAME", title: "Username"},
{ field: "DESC", title: "Descrizione Utente"},
{ field: "DATAFINE", title: " Data Scadenza"},
{ field: "DATAINIZIO", title: "Data Inizio Validità"},
{ command: [
{ name: "view", text: "Visualizza", click: visualizzaUtente},
],title: " ", width: "180px"}
],
}).data("kendoGrid");