Data duplication when using ajax call for remote treeview

[Arshad]

Data duplication when using ajax call for remote treeview .

When The search is selected everytime , a new tree node is created.

ej.base.enableRipple(true);

//  S E A R C H     B A R

// initialize AutoComplete component

var atcObj1 = new ej.dropdowns.AutoComplete({

    // bind the DataManager instance to dataSource property

    dataSource: new ej.data.DataManager({ url: 'https://icdsearchjsonservice.azurewebsites.net/api/ICD10CM', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true }),

    // set the count for displays the suggestion items.

    suggestionCount: 50,

    // bind the Query instance to query property

    query: new ej.data.Query().from('getsearchautocomplete1').select(['full_title', 'code']).take(10).requiresCount(),

    // map the appropriate columns to fields property

    fields: { value: "full_title" },

    itemTemplate: "<span>${full_title} - <b>${code}</b></span>",

    // set the placeholder to AutoComplete input element

    placeholder: 'Search for an ICD 10 CM Code or free text...',

    // sort the resulted items

    sortOrder: 'Ascending',

    // enable the autofill property to fill a first matched value in input when press a down key

    autofill: false,

    // set the filterType to searching operation

    filterType: 'Contains',

    // text highlight

    highlight: true,

    floatLabelType: "Auto",

    autoFocus: true,

    select: function(argument) {

        console.log("New value selected is " + argument.itemData.value);

        var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200) {

                //Use parse() method to convert JSON string to JSON object

                var responseJsonObj = JSON.parse(this.responseText);

                // Render the TreeView with hierarchical data source

                var treeObj = new ej.navigations.TreeView({

                    fields: { dataSource: responseJsonObj.result, id: 'code', text: 'title', child: 'children' }

                });

                treeObj.appendTo('#tree');

                console.log("Data Received is ");

                console.log(responseJsonObj);

            }

        };

        xmlhttp.open("GET", "https://icdsearchjsonservice.azurewebsites.net/api/ICD10CM/getindextitleset1?", true);

        xmlhttp.send();

    }

});

atcObj1.appendTo('#search-bar');

// initialize AutoComplete component

//  S E A R C H     B A R

//  T R E E V I E W

// var data = new ej.data.DataManager({

//     url: 'https://icdsearchjsonservice.azurewebsites.net/api/ICD10CM/getindextitleset1?',

//     adaptor: new ej.data.ODataV4Adaptor(),

//     crossDomain: true,

// });

// // Render the TreeView with hierarchical data source

// var treeObj = new ej.navigations.TreeView({

//     fields: { dataSource: data.result, id: 'code', text: 'title', child: 'children' }

// });

// treeObj.appendTo('#tree');

// //  T R E E V I E W

//  G R I D   1

ej.base.enableRipple(true);

var hostUrl = '';

var data = new ej.data.DataManager({

    url: 'https://icdsearchjsonservice.azurewebsites.net/api/ICD10CM/getbillablecodes1?',

    adaptor: new ej.data.WebApiAdaptor(),

    offline: true,

    crossDomain: true

});

var grid = new ej.grids.Grid({

    dataSource: data.result,

    allowFiltering: true,

    allowPaging: true,

    enableResponsiveRow: true,

    columns: [

        { field: 'billable', headerText: 'Order ID', width: 10, textAlign: 'Center' },

        { field: 'code', headerText: 'Customer ID', width: 20, textAlign: 'Center' },

        { field: 'title', headerText: 'Employee ID', width: 20, textAlign: 'Center' },

    ],

    pageSettings: { pageCount: 5 }

});

grid.appendTo('#Grid1');

//  G R I D   1

//  G R I D   2

var grid = new ej.grids.Grid({

    dataSource: data,

    allowPaging: true,

    enableResponsiveRow: true,

    columns: [

        { field: 'OrderID', headerText: 'Order ID', width: 10, textAlign: 'Center' },

        { field: 'CustomerID', headerText: 'Customer ID', width: 20, textAlign: 'Center' },

        { field: 'EmployeeID', headerText: 'Employee ID', width: 20, textAlign: 'Center' },

        { field: 'Freight', headerText: 'Freight', width: 20, textAlign: 'Center' },

        { field: 'ShipCountry', headerText: 'Ship Country', width: 10, textAlign: 'Center' },

    ],

    pageSettings: { pageCount: 3 }

});

grid.appendTo('#Grid2');

//  G R I D   2

//  G R I D   3

var grid = new ej.grids.Grid({

    dataSource: data,

    allowPaging: true,

    enableResponsiveRow: true,

    columns: [

        { field: 'OrderID', headerText: 'Order ID', width: 10, textAlign: 'Center' },

        { field: 'CustomerID', headerText: 'Customer ID', width: 20, textAlign: 'Center' },

        { field: 'EmployeeID', headerText: 'Employee ID', width: 20, textAlign: 'Center' },

        { field: 'Freight', headerText: 'Freight', width: 20, textAlign: 'Center' },

        { field: 'ShipCountry', headerText: 'Ship Country', width: 10, textAlign: 'Center' },

    ],

    pageSettings: { pageCount: 3 }

});

grid.appendTo('#Grid3');

//  G R I D   3

//  G R I D   4

var grid = new ej.grids.Grid({

    dataSource: data,

    allowPaging: true,

    enableResponsiveRow: true,

    columns: [

        { field: 'OrderID', headerText: 'Order ID', width: 10, textAlign: 'Center' },

        { field: 'CustomerID', headerText: 'Customer ID', width: 20, textAlign: 'Center' },

        { field: 'EmployeeID', headerText: 'Employee ID', width: 20, textAlign: 'Center' },

        { field: 'Freight', headerText: 'Freight', width: 20, textAlign: 'Center' },

        { field: 'ShipCountry', headerText: 'Ship Country', width: 10, textAlign: 'Center' },

    ],

    pageSettings: { pageCount: 3 }

});

grid.appendTo('#Grid4');

//  G R I D   4

//  G R I D   5

var grid = new ej.grids.Grid({

    dataSource: data,

    allowPaging: true,

    enableResponsiveRow: true,

    columns: [

        { field: 'OrderID', headerText: 'Order ID', width: 10, textAlign: 'Center' },

        { field: 'CustomerID', headerText: 'Customer ID', width: 20, textAlign: 'Center' },

        { field: 'EmployeeID', headerText: 'Employee ID', width: 20, textAlign: 'Center' },

        { field: 'Freight', headerText: 'Freight', width: 20, textAlign: 'Center' },

        { field: 'ShipCountry', headerText: 'Ship Country', width: 10, textAlign: 'Center' },

    ],

    pageSettings: { pageCount: 3 }

});

grid.appendTo('#Grid5');

//  G R I D   5

[Muthukrishnan Kandasamy]

 

Hi Arshad, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your reported problem in TreeView component with your shared code. We have found that in your code, you have rendered tree view component each time when selecting the item in AutoComplete component son that duplicate tree node was added. You can prevent this based on your requirement.  

 

Description	Link
Getting started	https://ej2.syncfusion.com/javascript/documentation/treeview/es5-getting-started/
Data binding	https://ej2.syncfusion.com/javascript/documentation/treeview/data-binding/
How to section	https://ej2.syncfusion.com/javascript/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu/
API reference	https://ej2.syncfusion.com/documentation/api/treeview
Live demo	https://ej2.syncfusion.com/javascript/demos/#/material/treeview/local-data.html

 

Since, we were not able to understand your real time scenario with dynamic tree view creation. Please share some additional details, it will help us to provide you prompt solution. 

 

1)     Real time use case scenario with TreeView component. 

2)     Whether you want to create different TreeView with different data source. 

3)     Share the video footage about your requirement. 

4)     If possible, share the images about your requirement. 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K