This is a migrated thread and some comments may be shown as answers.

Reloading the local data binding tree view

3 Answers 347 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Dharmalingam
Top achievements
Rank 1
Dharmalingam asked on 18 May 2015, 10:12 AM

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"))
)

3 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 20 May 2015, 12:48 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Dharmalingam
Top achievements
Rank 1
answered on 21 May 2015, 06:29 AM

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

 

 

 

0
Accepted
Alexander Popov
Telerik team
answered on 25 May 2015, 06:56 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
TreeView
Asked by
Dharmalingam
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Dharmalingam
Top achievements
Rank 1
Share this question
or