Multiselect in Grid PopUp gives javascript error

2 posts, 0 answers
  1. Raghu Punnamraju
    Raghu  Punnamraju avatar
    2 posts
    Member since:
    Oct 2019

    Posted 18 Oct 2019 Link to this post

    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 ?

  2. Aleksandar
    Admin
    Aleksandar avatar
    113 posts

    Posted 23 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top