Кендо UI сетка, окно поиска в панели инструментов в Mvc

Question

Кендо сетку окна поиска в панели инструментов в MVC с синтаксисом бритвы,

Я столкнулся я нужна панель инструментов, в которой испытующа окне, этот поиск поиска в окне данных сетки.

Answer 1

Просто скопируйте и вставьте этот код привязки с MVC модели и пользовательские кнопки (CRUD) и поле поиска на панели инструментов в кендо шаблон сетки

<div> 
    @(Html.Kendo().Grid(Model) 
    .Name("DiagnosisTestGrid") 
    .Columns(columns => 
    { 
     columns.Bound(c => c.Description).Title("Description"); 
     columns.Bound(c => c.Cost).Title("Cost"); 
     columns.Bound(c => c.CostingRequired).Title("Cost Req."); 
     columns.Bound(c => c.DxTestId).ClientTemplate(@" 
    <a href='/DiagnosisTest/Details/#=DxTestId#' class = 'dialog-window'>Detail</a> | 
    <a href='/DiagnosisTest/Edit/#=DxTestId#' class = 'dialog-window' >Edit</a> | 
    <a href='/DiagnosisTest/Delete/#=DxTestId#' class = 'dialog-window'>Delete</a> 
      ").Title(""); 
    }) 

     .ToolBar(toolbar => 
     { 
      toolbar.Template(@<text> 
       <div class="toolbar"> 

        <div class="row"> 
         <div class="col-md-4"> 
          <div class="input-group"> 
           <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span> 
           <input type="text" class="form-control" id='FieldFilter' placeholder="Search for..."> 
           <span class="input-group-btn"> 
            <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button> 
           </span> 
          </div> 
         </div> 
        </div> 
       </div> 
      </text>); 
     }) 

    .Resizable(resizing => resizing.Columns(true)) 
    .Sortable(sorting => sorting.Enabled(true)) 
    .Reorderable(reorder => reorder.Columns(true)) 
    .Pageable() 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .PageSize(5) 
     .ServerOperation(false) 
     )) 
</div> 

Сценарий для поиска. и элементы фильтра сетки

<script> 
$(document).ready(function() { 
    $("#FieldFilter").keyup(function() { 

     var value = $("#FieldFilter").val(); 
     grid = $("#DiagnosisTestGrid").data("kendoGrid"); 

     if (value) { 
      grid.dataSource.filter({ field: "Description", operator: "contains", value: value }); 
     } else { 
      grid.dataSource.filter({}); 
     } 
    }); 
}); 

Answer 2

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

.ToolBar(toolBar => toolBar.Template(@<text><input class='k-textbox' value="Search..." onfocus="if (this.value=='Search...') this.value='';" onblur="this.value = this.value==''?'Search...':this.value;" id='searchbox'/></text>)) 

Затем скрипт

<script type="text/javascript"> 
    function addSearch() { 
     return { searchbox: $('#searchbox').val() }; 
    } 
    $('#searchbox').keyup(function() { 
     $('#gridWorkflows').data('kendoGrid').dataSource.read(); 
    }); 
</script> 

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