2015-02-07 2 views
1

У меня есть сетка, содержащая все имена учеников и их кампус. Теперь я хочу сортировать сетку по именам студентов и кампуса с помощью DropDownList. Вот выпадающий список:Kendo MVC UI сортировать сетку с помощью DropDownList

@(Html.Kendo().DropDownList() 
     .Name("sorter") 
     .DataTextField("Text") 
     .DataValueField("Value") 
     .Events(e => e.Change("change")) 
     .BindTo(new List<SelectListItem>() { 
      new SelectListItem() { 
       Text = "Sort by Name", 
       Value = "1" 
      }, 
      new SelectListItem() { 
       Text = "Sort by Campus", 
       Value = "2" 
      } 
     }) 
     .Value("1") 
) 

Вот событие изменения для DropDownList:

function change() { 
    var value = $("#sorter").val(); 
    alert(value); 

}; 

вы можете сказать мне, как я могу командовать сетку сортировать либо по имени студента или имени университетского городка. Заранее спасибо.

ответ

2

Я просто решить сам, используя JavaScript, как:

function change() { 
    var value = $("#sorter").val(); 
    if (value == "1") 
    { 
     // sort grid by student names 
     var kendoGrid = $("#grid").data("kendoGrid"); 
     var dsSort = []; 
     dsSort.push({ field: "DisplayName", dir: "asc" }); 
     kendoGrid.dataSource.sort(dsSort); 
    } 
    elseif(value == "2") 
    { 
     // sort grid by campus 
     var kendoGrid = $("#grid").data("kendoGrid"); 
     var dsSort = []; 
     dsSort.push({ field: "Campus", dir: "asc" }); 
     kendoGrid.dataSource.sort(dsSort); 

    } 
} 
1

Если вы используете как кэндо MVC UI сетки и Выпадающий список:

$function change() { 
    var value = $("#sorter").val(); 

if(value==1){ 

    var gridsort = "@(Html.Kendo().Grid<GiveyourModelHere>() 
     .Name("grid") 
     .Columns(columns => 
     { 
      columns.Bound(c => c.StudentName); 
      columns.Bound(c => c.StudentCampus).Sortable(false); 
     }) 
     .Sortable())"; 
} 
else{ 

    var gridsort = "@(Html.Kendo().Grid<Model>() 
     .Name("grid") 
     .Columns(columns => 
     { 
      columns.Bound(c => c.StudentName).Sortable(false); 
      columns.Bound(c => c.StudentCampus); 
     }) 
     .Sortable())"; 

} 

}; 

использование @gridsort в представлении для отображения сетки Kendo.

+0

Спасибо за ваш ответ. Я тоже попробую. –

Смежные вопросы