This is a migrated thread and some comments may be shown as answers.
The data from the response coming to the MultiSElectFor, but it is not updated.
2 Answers 4 Views
This is a migrated thread and some comments may be shown as answers.
Dmitry
Top achievements
Rank 1
Dmitry asked on 10 Apr 2020, 12:12 PM

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

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 14 Apr 2020, 07:03 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Dmitry
Top achievements
Rank 1
answered on 15 Apr 2020, 01:35 PM

I understand, thank you!)

 
Asked by
Dmitry
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Dmitry
Top achievements
Rank 1
Share this question
or