Geek Answers Handbook

Multiple Kendo Grid Inline Editing

I need to use the multiselect list in the kendo grid (inline editing) so that the user can select multiple values ​​from the list in a row.

Following are my requirements:

  • During display, the kendo grid should display a list of all selected values, separated by commas.
  • During the addition, the kendo grid should display a list of multi-selects and allow multiple values ​​to be selected.
  • During editing, the kendo grid should display a list of multi-selections with the values ​​already selected. The user should be able to change the selection and add / remove from the list.

When the user presses the update / save button, the selected values ​​from the multi-selection list should be available in the code behind (in the ajax update) along with the row identifier.

Following what I am doing now:

I use an approach similar to using a dropdown in the built-in kendo grid.

I created an editor template to display multiselect during add / edit.

Below is the code:

@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)

Explanation: I bind the model class list to a multi-selector and specify the data source in the read action. To select the selected values ​​during editing, I created a function that returns the identifiers of the selected values ​​and places them in the "View data" in the read action.

I used this editor template on my index page as the following code:

@{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 . .

? , , , ?

+4
2

:

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 as.

+1

:

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

js:

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;
    }

>

0

More articles:


All Articles