Kendo Grid Фильтрация на целочисленной колонке

Question

У меня есть сетка с несколькими столбцами. say Id(integer), Name(string) и т. Д. Событие изменения отлично работает для столбца name. Но для столбца ID он не работает (событие изменения не запускается для числового столбца в кендо).

Я сделал на стороне клиента скрипты. Но я хочу, чтобы эта функциональность была на стороне сервера (Razor).

Я новичок в пользовательском интерфейсе Kendo, и любая помощь в том, как это сделать, будет очень признательна.

Я прилагаю мой код ниже:

@(Html.Kendo().Grid(Model).Name("ViewDataGrid") 

          .Columns(columns => 
          { 
           columns.Bound(c => c.Id).Title(" ID").Width(150); 
           columns.Bound(c => c.Name).Title(" Name").Width(150); 

          }) 
          .HtmlAttributes(new { style = "height: auto; width: 2200px" }) 
          .Filterable(i => i.Mode(GridFilterMode.Menu | GridFilterMode.Row)) 

          .Sortable(s => s.AllowUnsort(false).SortMode(GridSortMode.MultipleColumn)) 
          .Selectable(selecting => selecting.Enabled(true))        
          .Pageable(r => r.PreviousNext(true).PageSizes(new int[] { 10, 20, 30, 40, 50, 100 })) 
          .DataSource(dataSource => dataSource 
          .Ajax() 
          .PageSize(20) 
          .ServerOperation(false) 
          .Events(e => e.Change("call")) 


)) 


function call(e) { 

     debugger; 

       var filterlength = e.sender.filter.arguments[0].filters.length; 
       var ds = $("#ViewDataGrid").data("kendoGrid"); 
       $filter = new Array(); 

       for (var i = 0; i < filterlength; i++) { 
        if (e.sender.filter.arguments[0].filters[i].field == "Id") 
         $filter.push({ field: e.sender.filter.arguments[0].filters[0].field, operator: "eq", value: parseInt(e.sender.filter.arguments[0].filters[0].value) }); 
        else 
         $filter.push({ field: e.sender.filter.arguments[0].filters[0].field, operator: "contains", value: e.sender.filter.arguments[0].filters[0].value }); 
       } 

       $("#ViewDataGrid").data("kendoGrid").dataSource._filter = $filter; 
       $("#ViewDataGrid").data("kendoGrid").dataSource.sync();   



     } 

Model.CS

public int Id { get; set; } 

    public string Name { get; set; } 

Контроллер

public ActionResult Index() 
    { 
     List<GridData> dataList = new List<GridData>(); 
    GridData data1 = new GridData(); 
     data1.Id = 9191919; 
     data1.Name = "XYZ";   
     dataList.Add(data1); 
     return View(dataList);   
    } 

После редактирования: Change Event не стреляя. Не могли бы вы помочь мне решить мою проблему.

@(Html.Kendo().Grid(Model) 
.Name("ViewDataGrid") 
.ToolBar(toolBar => 
{ 
toolBar.Template(
    @<Text> 
    <input type="search" id="searchBox" class="SearchRight SearchTopMargin" /> 
    <b class="FloatRight SearchTopMarginExtra">Search the grid: </b> 
    </Text>); 
}) 

.HtmlAttributes (новый {стиль = "высота: автоматический, ширина: 2200px"}) .Filterable (я => i.Mode (GridFilterMode.Menu | GridFilterMode.Row))

      .Sortable(s => s.AllowUnsort(false).SortMode(GridSortMode.MultipleColumn)) 
          .Selectable(selecting => selecting.Enabled(true)) 
          .Events(e => e.Change("call")) 
          .Pageable(r => r.PreviousNext(true).PageSizes(new int[] { 10, 20, 30, 40, 50, 100 })) 
.DataSource(dataSource => dataSource 
    .Custom() 
    .Type("aspnetmvc-ajax") 
    .PageSize(20) 
    .ServerPaging(false) 
    .ServerSorting(false) 
    .ServerFiltering(false) 
    .Transport(transport => transport 
     .Read(read => read.Action("Read", "Index")) 
    ) 
    .Schema(schema => schema 
     .Data("Data") 
     .Total("Total") 
     .Errors("Errors") 
     .Model(model => 
     { 
      model.Id("Id"); 
      model.Field("Id", typeof(int)); 
      model.Field("Name", typeof(string)); 

     }) 

    ) 
) 

)

Answer 1

Привет я мог бы иметь решение, пожалуйста, дайте мне знать, если это работает для вас:

RAZOR

@(Html.Kendo().Grid(Model).Name("ViewDataGrid") 
    .Columns(columns => 
    { 
     columns.Bound(c => c.Id).Title(" ID").Width(150); 
     columns.Bound(c => c.Name).Title(" Name").Width(150); 
    }) 
    .HtmlAttributes(new { style = "height:550px;" }) 
    .Filterable(i => i.Mode(GridFilterMode.Menu | GridFilterMode.Row)) 
    .Sortable(s => s.AllowUnsort(false).SortMode(GridSortMode.MultipleColumn)) 
    .Selectable(selecting => selecting.Enabled(true))        
    .Pageable(r => r.PreviousNext(true).PageSizes(new int[] { 10, 20, 30, 40, 50, 100 })) 
    .Events(events => events.DataBound("call")) // try to bound the event 
    .DataSource(dataSource => dataSource 
      .Ajax() 
      .PageSize(20) 
      .ServerPaging(false) 
      .ServerSorting(false) 
      .ServerFiltering(false) 
      .Read(read => read.Action("Read", "Index")) 
    ) 
) 

JAVASCRIPT

<script> 
    function call(e) { 

     //debugger; 
     //console.log(e) //Log e and look through the object data. 

     var filterlength = e.sender.filter.arguments[0].filters.length; 
     var ds = $("#ViewDataGrid").data("kendoGrid"); 
     $filter = new Array(); 

     for (var i = 0; i < filterlength; i++) { 
      if (e.sender.filter.arguments[0].filters[i].field == "Id") 
       $filter.push({ field: e.sender.filter.arguments[0].filters[0].field, operator: "eq", value: parseInt(e.sender.filter.arguments[0].filters[0].value) }); 
      else 
       $filter.push({ field: e.sender.filter.arguments[0].filters[0].field, operator: "contains", value: e.sender.filter.arguments[0].filters[0].value }); 
     } 

     $("#ViewDataGrid").data("kendoGrid").dataSource._filter = $filter; 
     $("#ViewDataGrid").data("kendoGrid").dataSource.sync();   
    } 
</script> 

Если это не работает, то там может быть работа какая-то работа вокруг. Может быть, пытаюсь с первоначальной реализацией: Попробуйте разобрать или использовать идентификатор столбец «c.id» в виде строки и обрабатывать его так же, как и поле Имени «c.name», что-то вроде:

e.sender.filter.arguments[0].filters[0].value.toString() 

Это может не лучшая работа, но если вы уже пробовали это, я уверен, что должен быть другой способ. Вы можете найти эту ссылку API также полезны:

Kendo.Mvc.UI.Fluent GridBuilder aspnet-mvc

Я до сих пор смотреть на это с моей стороны попробуйте повторить вопрос, и если я случиться, чтобы найти что-нибудь я буду обновлять свой пост/ответ немедленно.

Удачи.