The data from the response coming to the MultiSElectFor, but it is not updated.

[Dmitry]

Hello!
I have a controller for editing a treeview. The view contains a grid with the fields of the node.
The node has a list of groups that can be selected in MultiSelectFor “Gruops”.
A node should have only those groups that its parent has.
Therefore, after selecting a new parent in the parent list "Parent", "Gruops" should contain only the groups of the selected parent.
I implement this with an event "onChange".

 

After choosing a new parent, the list of groups of this parent falls into the "Groups". But the "Groups" are not updated (see. image).

 

Parent

01.@(Html.Kendo().DropDownListFor(x=>x.ParentId)
02.    .DataTextField("Name")
03.    .DataValueField("Id")
04.    .OptionLabel("Set as root")
05.    .Height(400)
06.    .Value(Model.Name)
07.    .Text(Model.Name)
08.    .Template(altParentItem)
09.    .DataSource(x => x
10.        .Custom()
11.        .Group(g => g.Add("ParentName", typeof(string)))
12.        .Transport(t => t.Read(read => read.Action("AlterParents", "TreeView").Data("getSelectedRowId")))
13.    )
14.    .Filter(FilterType.Contains)
15.
16.    // !!!
17.    .Events(x =>
18.    {
19.        x.Change("onChange");
20.    })
21.
22.    .HtmlAttributes(new { data_value_primitive = "true" })
23.)

 

onChange

01.function onChange(e) {
02.    var altParent = this.dataItem(e.item);
03.    $.ajax({
04.        url: "/TreeView/Groups",
05.        type: 'GET',
06.        data: { selectedRow_ParentId: altParent.Id },
07.        success: function (data) {
08.            console.log(data);
09.        },
10.        error: function (er) {
11.            console.log(er);
12.        }
13.    })
14.}

 

Group

1.@(Html.Kendo().MultiSelectFor(x => x.Groups)
2.        .DataTextField("Name")
3.        .DataValueField("Id")
4.        .DataSource(x => x.Read(read => read.Action("Groups", "TreeView").Data("getSelectedRowId"))
5.    ))

 

Action Group

01.public JsonResult Groups(string selectedRow_ParentId)
02.{
03.    using (TreeViewEntities context = new TreeViewEntities())
04.    {
05.        if (string.IsNullOrEmpty(selectedRow_ParentId))
06.        {
07.            var allGroups = context.Group
08.                .AsEnumerable()
09.                .Select(x => new
10.                {
11.                    Id = x.Id.ToString(),
12.                    Name = x.Name
13.                })
14.                .ToList();
15.
16.            return Json(allGroups, JsonRequestBehavior.AllowGet);
17.        }
18.
19.        var nodeGroups = context.Node
20.            .AsEnumerable()
21.            .First(x => x.Id == long.Parse(selectedRow_ParentId)).Group
22.            .Select(x => new
23.            {
24.                Id = x.Id.ToString(),
25.                Name = x.Name
26.            })
27.            .ToList();
28.
29.        return Json(nodeGroups, JsonRequestBehavior.AllowGet);
30.    }
31.}

 

[Veselin Tsvetanov]

Hello Dmitry,

Handling the change event of the parent DropDownList is the appropriate approach in the scenario in question. Nevertheless, instead of directly calling the remote read endpoint with an AJAX request, you will need to call the read() method of the DataSource itself:

function onChange(e) {
  var multiSelect = $("Groups").getKendoMultiSelect();
  multiSelect.dataSource.read();
}

This way the MultiSelect will know it has to alter its items. In addition, I can see that you have defined a Data() function for the MultiSelect Read call. That Data() function should take care to return the proper parameter (the parent widget selected value) as a part of the remote request:

function getSelectedRowId(e) {
  var DropDownList = $("#ParentId").getKendoDropDownList();
  var value = DropDownList.value();

  return {
    selectedRow_ParentId: value
  };
}

Regards,
Veselin Tsvetanov
Progress Telerik

[Dmitry]

I understand, thank you!)