DataSource.sync is not updating as I'm expecting

[Justin]

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);
    }
}

 

[Joana]

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