Reloading the local data binding tree view

4 posts, 1 answers
  1. Dharmalingam
    Dharmalingam avatar
    5 posts
    Member since:
    May 2015

    Posted 18 May 2015 Link to this post

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

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 20 May 2015 Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dharmalingam
    Dharmalingam avatar
    5 posts
    Member since:
    May 2015

    Posted 21 May 2015 in reply to Alexander Popov Link to this post

    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

     

     

     

  5. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 25 May 2015 Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready