Обновление столбцов сетки kendo без перезагрузки страницы в ASP MVC

Question

У меня есть сетка кендо, где пользователь может выбрать список столбцов из сетки и сохранить выделение, указав имя (например, имя вида). Каждый сохраненный выбор (имя вида) будет отображаться как выпадающий над сеткой, чтобы пользователь мог менять столбцы сетки всякий раз, когда они захотят. В текущей реализации каждый раз, когда пользователь выбирает имя представления из одного раскрывающегося списка в другое, я вызываю метод действия, чтобы выбрать это имя представления как текущее имя представления. Затем страница перезагружает, чтобы вызвать метод действия Index для извлечения значений столбцов текущих представлений. Я использую видимый атрибут в сетке, чтобы показывать и скрывать столбцы в сетке.

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

Благодаря Санджив

Скриншот:

Вот мои настройки: ViewModel:

namespace MvcApplicatioin.Models 
{ 
    public class EmployeeViewModel 
    { 
     public EmployeeColumns EmployeeColumns    { get; set; } 
     public IEnumerable<SelectListItem> EmployeeViewNames { get; set; } 
     public long EmployeeSelectedViewId     { get; set; } 
    } 

    public class EmployeeResponse 
    { 
     public int Id   { get; set; } 
     public string FirstName { get; set; } 
     public string LastName { get; set; } 
    } 

    public class EmployeeColumns 
    { 
     public bool Id  { get; set; } 
     public bool FirstName { get; set; } 
     public bool LastName { get; set; } 
    } 
} 

Контроллер:

public class EmployeeController : Controller 
{ 
     // GET: Employee 
     public ActionResult Index() 
     { 
      var service = new EmployeeService(); 
      EmployeeViewModel model = new EmployeeViewModel(); 
      long currentViewId; 

      //setup views and column preferences 
      EmployeeColumns employeeColumns = service.GetCurrentEmployeeColumnsPreferences(); 
      model.EmployeeColumns = employeeColumns; 
      model.EmployeeViewNames = service.GetAllEmployeeViewNames(out currentViewId); 
      model.EmployeeSelectedViewId = currentViewId; 

      return View(model); 
     } 
} 

Razor:

@using Kendo.Mvc.UI 

@{ 
    ViewBag.Title = "Employee Info:"; 
} 

<h3 style="margin-bottom: 10px;">Employee Info</h3> 

<input id="btnSearch" type="button" value="Search" class="btn_Search" /> 

<div class="row"> 
    <div class="col-sm-12"> 
     @(Html.Kendo().Grid<MvcApplicatioin.Models.EmployeeResponse>() 
      .Name("GridEmployee") 
      .Columns(columns => 
      { 
       columns.Bound(e => e.Id).Width("170px").Visible(Model.EmployeeColumns.Id); 
       columns.Bound(e => e.FirstName).Width("190px").Visible(Model.EmployeeColumns.FirstName); 
       columns.Bound(e => e.LastName).Width("170px").Visible(Model.EmployeeColumns.LastName);     
      }) 
      .ToolBar(tools => 
      { 
       tools.Template(@<text> 
        <div class="col-lg-4 col-md-5 col-sm-5 col-xs-7 pull-right" style="padding-right: 0;"> 
         <div class="form-group" style="margin-bottom: 0;"> 
          @Html.Label("Grid View:", new { @class = "col-sm-3 col-xs-4 control-label view" }) 
          <div class="col-sm-7 col-xs-6" style="padding-left: 0;"> 
           @Html.DropDownList("lstEmployeeViewNames", new SelectList(Model.EmployeeViewNames, "Value", "Text", Model.EmployeeSelectedViewId), "- Select View Name -", new { @class = "form-control", @style = "height: auto;" }) 
          </div> 
         </div> 
        </div> 
       </text>); 
      }) 
      .Pageable(x => x.PageSizes(new int[] { 10, 20, 50, 100 }).ButtonCount(4)) 
      .AutoBind(false) 
      .DataSource(dataSource => dataSource 
         .Ajax() 
         .PageSize(10) 
         .ServerOperation(false) 
         .Read(read => read.Action("SearchEmployee", "Employee"))) 
     ) 
    </div> 
</div><!--//row--> 

<script type="text/javascript"> 
    $('#btnSearch').click(function (e) { 
     e.preventDefault(); //This prevent the submit button onclick from submitting by itself 

     $('#GridEmployee').data('kendoGrid').dataSource.read(); 
    }); 

    //Change event for Dropdown placed inside the Grid's Toolbar - To Change the view 
    $("#lstEmployeeViewNames").change(function (e) { 
     var selectedViewId = $('select#lstEmployeeViewNames option:selected').val(); 

     if (selectedViewId == null || selectedViewId == '') { 
      alert("Please select the view name from the dropdown first !!"); 
      return; 
     } 

     $.post("/Employee/SetEmployeeColumnsCurrentPreferences", { viewId: selectedViewId }, function (data) { 
      window.top.location.reload(); 
     }); 
    }); 
</script> 

Answer 1

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

Хитрость заключается в том, чтобы манипулировать $ ("# GridEmployee") вместо публикации.

function search() { 
    var searchCriteria = $("#searchField").val(); 
    var gridData = $("#GridEmployee").data("kendoGrid"); 

    if searchCriteria != "") { 
     gridData.dataSource.filter({ field: "FirstName", operator: "contains", value: searchCriteria }); 
    } else { 
     gridData.dataSource.filter({}); 
    } 
}