Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

180
Views
Kendo Dropdown value changes datasource of grid

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");
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!