Multiselect in Grid PopUp gives javascript error

[n/a]

Hi,

I have the following model:

public class SComponent
    {
        public string Id { get; set; }
        public string Name { get; set; }

        public KeyValuePair<string,string>[] Containers { get; set; }
    }

 

which is bound to the Grid:

 

@(Html.Kendo().Grid<SComponent>()
          .Name("grid")
          .ToolBar(toolbar => toolbar.Create())
          .Columns(columns =>
          {
              columns.Bound(p => p.Name).Width(200);
              columns.Command(command => { command.Edit(); command.Destroy(); }).Width(70);
          })
          .Sortable(sortable => { sortable.SortMode(GridSortMode.SingleColumn); })
          .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("SharedLibrary"))
          .DataSource(dataSource => dataSource.Ajax()
              .Model(model =>
              {
                  model.Id(p => p.Id);
              })
              .Read(read => read.Action(nameof(SController.Editing_ReadSharedLibraries), "S", new { key = Model.Product.Keys.First() }))
              .Update(update => update.Action(nameof(SController.Editing_UpdateSharedLibrary), "S", new { key = Model.Product.Keys.First() }))
              .Destroy(update => update.Action(nameof(SController.Editing_DeleteSharedLibrary), "S", new { key = Model.Product.Keys.First() }))
              .Create(update => update.Action(nameof(SController.Editing_CreateNewSharedLibrary), "S", new { key = Model.Product.Keys.First() }))
          )
       )

 

As you can see grid edit mode is a popup which is a custom template looking like this:

@model SComponent

<div class="k-edit-label">
    @Html.LabelFor(model => model.Name)
</div>
<div class="k-edit-field">
    @Html.Kendo().TextBoxFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>

<div class="k-edit-label">
    @Html.LabelFor(model => model.Containers)
</div>
<div class="k-edit-field">
    @(Html.Kendo().MultiSelectFor(model => model.Containers)
         .DataTextField("Value")
         .DataValueField("Key")
         .ValuePrimitive(true)
         .Placeholder("Select containers...")
         .IgnoreCase(true)
         .Filter("contains")
         .DataSource(source =>
         {
             source.Read(read =>
             {
                 read.Action("Editing_ReadContainers", "Structurizr");
             })
             .ServerFiltering(true);
         })
    )
    @Html.ValidationMessageFor(model => model.Containers)
</div>

 

And the controller method returning the multiselect list is like this:

public IActionResult Editing_ReadContainers([DataSourceRequest] DataSourceRequest request)
       {
           var model = new SModel(null, _st.GetWorkspaceAsync(string.Empty).Result);
           var dsResult = model.Containers.Select(x=>KeyValuePair.Create(x.Id, x.Name)).ToDataSourceResult(request);
           var json = JsonConvert.SerializeObject(dsResult);
           return Content(json, "application/json");
       }

 

But when server returns values back to the UI it fails with the javascript error:

 kendo.all.js:7232 Uncaught TypeError: e.slice is not a function
    at init.success (kendo.all.js:7232)
    at success (kendo.all.js:7149)
    at Object.n.success (kendo.all.js:6055)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at y (jquery.min.js:4)
    at XMLHttpRequest.c (jquery.min.js:4)

 

Any idea how this can be fixed ?

[Aleksandar]

Hello Raghu,

The "Uncaught TypeError: e.slice is not a function" error indicates that the response which is received from the remote data source is not an array while the widget expects a simple array for its data source. This is a common error and causes and solutions are explained in detail in this article.

To resolve the issue you need to configure the data source Schema to indicate to the widget which field contains the data:

...
.DataSource(source =>{source
            .Custom()
            .Transport(transport => transport
            .Read(read =>
                {
                    read.Action("Editing_ReadContainers", "Structurizr");
                }))
            .ServerFiltering(true)
            .Schema(schema =>
                {
                    schema.Data("Data")
                        .Total("Total");
                });
         })

Alternatively, you could ensure the controller returns the data as an array, without using the .ToDataSourceResul() method. The ToDataSourceResult() unnecessarily wraps the data in an envelope similar to {data: [the array from your data goes here], total: <the count goes here> }.

I hope this helps. Please get back to me if you have further questions.

Regards,
Aleksandar
Progress Telerik