State Persistance in JQuery DropDownTree widget

16 Feb 20186 minutes to read

DropDownTree stores its model in the local storage by defining the property enablePersistence.
You can sustain the following functionalities in DropDownTree by enabling the persistence property.

  • Selected items value in the textbox
  • Item’s selection state in the popup list
  • Collapsed/expanded item

Widget model will be stored in the local storage/cookies of the browser before page refresh, and reinitialized with the restored model after refresh.

  • html
  • <input type="text" id="itemList" />
  • javascript
  • var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 6, pid: 1, name: "Anderson" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" },
                        { id: 15, pid: 11, name: "Johnson" },
                        { id: 16, name: "WPF Team", hasChild: true },
                        { id: 17, pid: 16, name: "Rock" },
                        { id: 18, pid: 16, name: "Gospel" },
                        { id: 19, pid: 16, name: "Brown" },
                        { id: 20, pid: 16, name: "Miller" }];
            $(function () {
                $('#itemList').ejDropDownTree({               
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    enablePersistence: true,
                    watermarkText: "Please select"
                });
            });

    Accessing currently stored state

    Persistent state can be accessed through local storage using corresponding key name. Key name formation would be in the following order. It is a combination of plugin name and control id.

  • javascript
  • // DropDownTree state as string
    	var DropDownTreeStateString = window.localStorage.ejDropDownTreeDropDown;
    
    	//DropDownTree state as object
    	var DropDownTreeStateObject = JSON.parse(window.localStorage.ejDropDownTreeDropDown);

    NOTE

    In the above example, ‘ejDropDownTree’ is plugin name and ‘DropDown’ is control id.