DataSource.sync is not updating as I'm expecting

2 posts, 0 answers
  1. Justin
    Justin avatar
    1 posts
    Member since:
    Aug 2017

    Posted 12 Apr 2019 Link to this post

    I am using the kendo Treeview with check boxes to control what is displayed on a map. The Data in the tree view has many children. In some cases 6 layers deep or more. This caused the treeview to populate very slowly. I decided to use load on demand but now when i disable a check box the children are not affected. So then i tried to load the nodes when the user tries to disable them and is very slow. Currently I resorted to storing a copy of the data in localStorage. Then on change i modify all of the relevant nodes and their checked values in localStorage. Then I try to sync the dataSource which then runs the update function defined as part of a custom transport. All of this works perfectly unless I have unchecked the parents at least 2 levels up and then i try to check just one child in the lowest level. Below is the javascript code i have so far. When debugging I have observed the state of the dataSource and everything looks as expected(the nodes checked values are set as expected and they are marked as dirty).  I would appreciate some direction here. I feel i am missing something. Maybe there is a better way to implement this solution altogether. Thanks in advance!

    function populateVehicleTree(data, isServerData) {
        //If the data was populated from server data then we need to initialize local storage. Otherwise the data came from localStorage.
        if (isServerData) {
            localStorage.setItem("kendoTree", data)//saved kendo treeview data
        }
        //Create DataSource
        var timer1 = performance.now();
        var dataSource = new kendo.data.HierarchicalDataSource({
            transport: {
                read: function (e) {
                    var localData = JSON.parse(localStorage.getItem("kendoTree"));
                    e.success(localData);
                },
                update: function (e) {
                    e.success(e.data);
                }
            },
            schema: {
                model: {
                    id: "VehicleId",
                    children: "ChildGroups",
                }
            },
        });
        dataSource.read();
        var timer2 = performance.now();
        console.log("Time to create hierarchical datasource:" + (timer2 - timer1).toString());

        //populate the Kendo treeView
        timer1 = performance.now();
        $("#vehicletreeview").kendoTreeView({
            checkboxes: {
                checkChildren: true
            },
            check: onChange,
            expand: onExpand,
            dataSource: dataSource,
            dataTextField: "Name",
            loadOnDemand: true
        });
        timer2 = performance.now();
        console.log("Time to populate vehicle tree view:" + (timer2 - timer1).toString());
    }

    function onChange(e) {
        //Find the node that is being changed.
        var treeViewDataSource = $("#vehicletreeview").data('kendoTreeView').dataSource;
        var treeView = $("#vehicletreeview").data('kendoTreeView');
        var changedNode = $("#vehicletreeview").data('kendoTreeView').dataItem(e.node);

        //Update local storage appropriately. Then when the user expands the tree i will use the OnExpand event to set the most immediate childrens checkbox states to match localStorage definitions. 
        var temp = localStorage.getItem("kendoTree");
        var currentLocalStorageJsonObject = JSON.parse(temp);
        //Find the node in local storage that needs to be updated and update it.
        currentLocalStorageJsonObject[0] = updateLocalStorageCheckBoxStates(currentLocalStorageJsonObject[0], changedNode);
        //Now set local storage equal to the stringified version of the updated currentLocalStorageJsonObject
        localStorage.setItem("kendoTree", JSON.stringify(currentLocalStorageJsonObject));//saved kendo treeview data

        treeViewDataSource.sync() 

        //update the map.
        var checkedNodes = [];
        var matchingNode = [];
        var matchingNode = lookupLocalStorageNode(currentLocalStorageJsonObject[0], changedNode, matchingNode);//I need to pass the localStorage node because the treeView node doesn't have any children loaded and im trying to avoid having to load them
        checkedNodes = getLowestLevelNodesAsArray(matchingNode[0], checkedNodes);
        if (changedNode.checked) {
            addPins(checkedNodes);
        }
        else {
            removePins(checkedNodes);
        }
    }

     

  2. Joana
    Admin
    Joana avatar
    205 posts

    Posted 16 Apr 2019 Link to this post

    Hello Justin,

    May I ask you to isolate the issue in a sample project where we could examine the issue? I am not sure that I understand the use case when child elements do not get affected by parent change. Here is a dojo for reference: 

    https://dojo.telerik.com/AHozAzix

    Also, you might find useful the following article that illustrates how to load asynchronously nodes if required:

    https://docs.telerik.com/kendo-ui/controls/navigation/treeview/how-to/nodes/node-async-expand

    Regards,
    Joana
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top