Reloading the local data binding tree view

[Dharmalingam]

Hi

I have multiple tree views named role, responsibility, function using local data binding as in the below attached screen shot.  Below is the html view . I need to reload automatically the RoleListView if any changes made on responsibility tree view. i.e if i drag a function and drop it on Responsibility tree view then rolelist should be reloaded with modified responsibilities data automatically. How can i do this. pls assist .

@using Kendo.Mvc.UI;
@using Kendo.Mvc.UI.Fluent;
@using Msc.UAM.Presentation.ViewModel;
@model List<ResponsibilityListView>

@(Html.Kendo().TreeView()
            .Name("ResponsibilityList")
        .BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
        {
            mappings.For<ResponsibilityListView>
            (binding => binding.ItemDataBound((item, response) =>
            {
                item.Id = response.InternalResponsibilityId.ToString();
                item.Text = response.Description;
                item.SpriteCssClasses = "iconResponsibility";
            })
            .Children(res => res.Functions));
            mappings.For<FunctionListView>(binding => binding.ItemDataBound((item, function) =>
            {
                item.Id = function.InternalFunctionId.ToString();
                item.Text = function.Description;
                item.SpriteCssClasses = "iconFunction";
            }));
        })
        .DragAndDrop(true)
        .Events(events => events.DragStart("OnResponsibilityDragStart")
        .Drop("OnResponsibilityDrop"))
)

@using Kendo.Mvc.UI;
@using Msc.UAM.Presentation.ViewModel;
@model List<FunctionListView>

@(Html.Kendo().TreeView()
        .Name("FunctionList")
        .BindTo(Model, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<TreeViewItem> mappings) =>
        {
            mappings.For<FunctionListView>
            (binding => binding.ItemDataBound((item, function) =>
            {
                item.Id = function.InternalFunctionId.ToString();
                item.Text = function.Description;
                item.SpriteCssClasses = "iconFunction";
            }));
        })
        .DragAndDrop(true)
        .Events(events => events.Drop("OnFunctionDrop"))
)

@using Kendo.Mvc.UI;
@using Kendo.Mvc.UI.Fluent;
@using Msc.UAM.Presentation.ViewModel;
@model List<RoleListView>

@(Html.Kendo().TreeView()
            .Name("RoleList")
            .BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
            {
                mappings.For<RoleListView>
                (binding => binding.ItemDataBound((item, role) =>
                {
                    item.Id = role.InternalRoleId.ToString();
                    item.Text = role.Description;
                    item.SpriteCssClasses = "iconRole";
                })
                .Children(role => role.Responsibilities));
                mappings.For<ResponsibilityListView>(binding => binding.ItemDataBound((item, responsibility) =>
                {
                    item.Id = responsibility.InternalResponsibilityId.ToString();
                    item.Text = responsibility.Description;
                    item.SpriteCssClasses = "iconResponsibility";
                }).Children(res => res.Functions));
                mappings.For<FunctionListView>(binding => binding.ItemDataBound((item, function) =>
                {
                    item.Id = function.InternalFunctionId.ToString();
                    item.Text = function.Description;
                    item.SpriteCssClasses = "iconFunction";
                }));
            })
            .DragAndDrop(true)
            .Events(events => events.DragStart("OnRoleDragStart")
                                    .Drop("OnRoleDrop")
                                    .DragEnd("OnDragEnd")
                                    .Expand("OnRoleExpand"))
)

[Alexander Popov]

Hello Dharmalingam,

I would suggest using Ajax binding instead. This will allow you to update the TreeView's content by simply calling the read method of its DataSource.

Regards,
Alexander Popov
Telerik

[Dharmalingam]

Dear Alex,

Good Day!

Thanks for your suggestion but we don't want to use the ajax binding since it will call server each time of expanding parent node also while if we need to check the duplication on drop we need to call again server to check whether same child node exist or not. That is why we chose the local data binding which will help to load  all the parent child nodes at first time itself and helps to restrict the duplication on drop at client side.

So please let us know if any alternate way to reload the data using local data binding.

Thanks and Regards,

Dharma

 

 

 

[Alexander Popov]

Hi Dharma,

As I mentioned in the support thread you opened, this could be done by passing an array containing items that have "id", "text" and "items" fields. For example: 

var newData = [{
        "id" : "Storage",
        "text" : "Storage",
        "items" : [{
                "text" : "Wall Shelving"
            }, {
                "text" : "Floor Shelving"
            }, {
                "text" : "Kids Storag"
            }
        ]
    }, {
        "id" : "Lights",
        "text" : "Lights",
        "items" : [{
                "text" : "Ceiling"
            }, {
                "text" : "Table"
            }, {
                "text" : "Floor"
            }
        ]
    }
];
treeview.dataSource.data(newData);

Regards,
Alexander Popov
Telerik