Bind Kendo Сетка данных с выпадающим значением

Question

У меня есть раскрывающийся список кендо на странице, которая извлекает результаты из базы данных, как показано ниже. У меня также есть сетка на той же странице, в то же время, которая требует значения kendo dropdownlist i.e значение из летнего списка лет, но я не могу получить его в одно и то же время. Это то, как я следую. Где я поступаю неправильно.

<script type="text/javascript"> 

var GridUrl; 

    $("#Years").kendoDropDownList({ 
     dataTextField: "Name", 
     dataValueField: "Id", 

     dataSource: { 
      transport: { 
       read: { 
        dataType: "json", 
        url: "../../Service/GetYears" 

       } 
      } 
     } 
    }); 



    $(document).ready(function() { 
BindGridData(); 
    GridUrl = '@Url.Action("Read", "Home")'; 

}); 

function BindGridData() 
{ 
      GridDataSource = new kendo.data.DataSource({ 
      type: "aspnetmvc-ajax", 
      serverFiltering: true, 
      serverPaging: true, 
      serverSorting: true, 
      pageSize: 10, 
      transport: { 
       read: { 
        url: GridUrl, 
        data: { year: $('#Years').val() } 
       } 
      }, 
      schema: { 
       data: "Data", total: "Total" 
      } 
     }); 
} 

Answer 1

Изменение строки в этой

year: $('#Years').data("kendoDropDownList").value() 

должен сделать трюк. Вам нужно получить экземпляр kendoDropDownListwidget, чтобы получить его значение. Вы должны сделать это, потому что kendoDropDownListwidget значение не сохраняется непосредственно в html элемент

Answer 2

Прежде всего, вам нужно переместить инициализацию kendoDropDownList внутри готовой функции документа. Если вы этого не сделаете, вы можете обратиться к элементам, которые не загружены (пока).

Второе изменение, которое должно быть сделано, - это то, как вы получаете значение от kendoDropDownList. Обычно вы должны обращаться к виджету вместо элемента DOM: $('#Years').data("kendoDropDownList").value()

Наконец, вы не указали, как и когда была привязана сетка, но вы можете обновить данные сетки, если пользователь изменит значение выпадающего списка. Если это так, вы можете использовать событие change выпадающего списка, чтобы обновить данные сетки.

$(document).ready(function() { 

    $("#Years").kendoDropDownList({ 
     dataTextField: "Name", 
     dataValueField: "Id", 
     dataSource: { 
      transport: { 
       read: { 
        dataType: "json", 
        url: "../../Service/GetYears" 
       } 
      } 
     }, 
     change: function(e) { 
      $("#YourGrid").data("kendoGrid").dataSource.read(); 
     } 
    }); 

    BindGridData(); 
    GridUrl = '@Url.Action("Read", "Home")'; 

}); 

function BindGridData() { 
    GridDataSource = new kendo.data.DataSource({ 
     type: "aspnetmvc-ajax", 
     serverFiltering: true, 
     serverPaging: true, 
     serverSorting: true, 
     pageSize: 10, 
     transport: { 
      read: { 
       url: GridUrl, 
       data: { year: $('#Years').data("kendoDropDownList").value() } 
      } 
     }, 
     schema: { 
      data: "Data", total: "Total" 
     } 
    }); 
}