Множественный список в встроенном редактировании сетки Kendo

Question

Мне нужно использовать список мультиселектов в сетке кендо (встроенное редактирование), чтобы пользователь мог выбрать несколько значений из списка в строке.

Ниже приведены мои требования:

1. Во время отображения, кендо сетка должна показать запятыми список всех выбранных значений.
2. Во время добавления сетка kendo должна отображать список мультиселектов и позволяет выбирать несколько значений.
3. Во время редактирования сетка kendo должна отображать список мультиселектов с уже выбранными значениями. Пользователь должен иметь возможность изменять элементы выбора и добавлять/удалять из списка.

Когда пользователь нажимает кнопку обновления/сохранения, выбранные значения из списка мультиселекций должны быть доступны в коде позади (в обновлении действия ajax) вместе с идентификатором строки.

После того, что я как сейчас:

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

Я создал шаблон редактора для отображения multiselect во время добавления/редактирования.

Ниже приводится код:

@model List<Namespace.CompanyConnector> 
@using Kendo.Mvc.UI 

@(Html.Kendo().MultiSelectFor(c=>c) 

     .Name("company_connector_id") 
     .DataTextField("connector_name") 
     .DataValueField("company_connector_id") 
     .Placeholder("Select connector...") 

       .AutoBind(false) 
         .Value((List<int>)ViewData["SelectedValues"]) 
       .DataSource(source => 
       { 
        source.Read(read => 
        { 
         read.Action("GetCompanyConnectors", "BrandConnector"); 
        }) 
        .ServerFiltering(true); 
       }) 
      ) 
@Html.ValidationMessageFor(m => m) 

Объяснение: Я связываю список моделей класса до множественного выбора и установить источник данных в действии чтения. Для выбора выбранных значений во время редактирования я создал функцию, которая возвращает идентификаторы выбранных значений и помещает их в View Data в действие чтения.

Я использовал этот шаблон редактора в моей индексной странице, как следующий код:

@{Html.Kendo().Grid<Cee.DomainObjects.DomainObjects.BrandConnector>() 
.Name("BrandConnectorGrid") 
.Filterable() 
.Events(e => e.Edit("onEdit")) 
.DataSource(dataSource => dataSource 
.Ajax() 
.Events(e => e.Error("error_handler").RequestEnd("onRequestEnd")) 
.ServerOperation(false) 
.Model(model => 
{ 
    model.Id(p => p.brand_id); 
    model.Field(e => e.CompanyConnectorList).DefaultValue(new 
    List<Cee.DomainObjects.DomainObjects.CompanyConnector>()); 
}) 
.Read(read => read.Action("_AjaxBinding", "BrandConnector",new{companyID = 0 }).Type(HttpVerbs.Post)) 
.Update(update => update.Action("_UpdateBinding", "BrandConnector").Type(HttpVerbs.Post))) 
           .Columns(columns => 
           { 
            columns.Bound(c => c.brand_connector_id).Width(0).Hidden(true); 
            columns.Bound(c => c.company_id).Width(0).Hidden(true); 
            columns.Bound(c => c.brand_id).Width(0).Hidden(true); 
            columns.Bound(u => u.brand_name).Title("Brand").Width("18%").HtmlAttributes(new { @class = "brkWord", @readonly = "readonly" }); 
            columns.ForeignKey(u => u.connector_name, Model.CompanyConnectorList, "company_connector_id", "connector_name").Title("Connector").Width 

("16%").HtmlAttributes(new { @class = "brkWord"  }).EditorTemplateName("company_connector_id"); 
columns.Command(p => p.Edit().Text("Edit").HtmlAttributes(new { @title = "Edit" })).Width("16%").Title("Edit"); 
           }) 
.Editable(editable => editable.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Top)) 
          .Pageable(pageable => pageable.Refresh(true).PageSizes(GlobalCode.recordPerPageList).ButtonCount(GlobalCode.PageSize).Input(true).Numeric(true)) 
                 .HtmlAttributes(new { @class = "dynamicWidth" }) 
             .Sortable(sorting => sorting.Enabled(true)) 
                 .Render(); 
          } 

Объяснение: Я использовал ForeignKey. Связать его с строковым столбцом «имя_соединения». Connector_name - это список идентификаторов, разделенных запятыми, которые я отправляю с контроллера. Здесь используется шаблон редактора.

Вопрос: Он отлично работает во время просмотра/отображения в индексе, но Edit не отображает выбранное значение. Также мы не получаем обновленное значение в коде позади на клике обновления.

Это правильный способ реализации списка мультиселекций или мне нужно привязать свойство коллекции как столбец в сетке? Если я привязываю свойство коллекции как столбец, то как я смогу показать строку, разделенную запятыми, во время отображения?

Answer 1

Попробуйте ниже код:

function onEdit(e) { 

var multiselect = $("#YourMutliselectDropdown").data("kendoMultiSelect"); 

      var IDArray = []; 

      $(e.model.propertyName).each(function (index) { 
       var ID = e.model.propertyName[index].id; 
       IDArray.push(ID); 
      });  

      multiselect.value(IDArray); 


} 

я предполагаю, что propertyName является Список у наша коллекция и содержит id как собственность.

Answer 2

попробовать:

c.Bound(p => p.CompanyConnectorList).ClientTemplate("#= connectorsToString(data)#").EditorTemplateName("company_connector_id");

и ЯШ:

function connectorsToString(data) { 
     var list = data.company_connector_id; 
     var result = ""; 
     for (var i = 0; i < list.length; i++) { 
      result += list[i].Name + ';'; 
     } 
     return result; 
    }