Tengo una cuadrícula y una lista desplegable. Cuando selecciono un valor de la lista desplegable, necesito cambiar los datos en la cuadrícula. Tengo 4 JSON diferentes para los 4 valores diferentes en el menú desplegable. No puedo averiguar cómo cambiar la fuente de datos de la cuadrícula en el cambio del valor de la lista desplegable. Traté de poner mi URL en el valor del menú desplegable, pero sin resultado.

Aquí está mi 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>

y el guion

 $("#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");