Duped TreeList Records

[Rajaraman]

1) I have the following code snippet from the Kendo Demo http://demos.telerik.com/kendo-ui/treelist/local-data-binding and included it in a chstml file

2) Tree List renders properly first time, when button is clicked second time, the earlier Tree List Data doesnt get refreshed. New DataSource gets appended to earlier one. 

3) using the following  Kendo UI Version   Kendo UI v2015.3.1111,  in AIG

4) Attached is Screenshot

5) you can reach out to me at [e-mail]

Please help me resolve this issue at the earliest, since we are in middle of development

<script type="text/javascript">
    $(document).ready(function () {
        RefreshView();

        $("#refreshTree").click(function () {
            alert('button clicked');
            RefreshView();
        });
    });

    function RefreshView() {
        var dataSource = new kendo.data.TreeListDataSource({
            data: [
              { id: 1, Name: "Daryl Sweeney", Position: "CEO", Phone: "[phone]", parentId: null },
              { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", Phone: "[phone]", parentId: 1 },
              { id: 32, Name: "Buffy Weber", Position: "VP, Engineering", Phone: "[phone]", parentId: 2 },
              { id: 11, Name: "Hyacinth Hood", Position: "Team Lead", Phone: "[phone]", parentId: 32 },
              { id: 60, Name: "Akeem Carr", Position: "Junior Software Developer", Phone: "[phone]", parentId: 11 },
              { id: 78, Name: "Rinah Simon", Position: "Software Developer", Phone: "[phone]", parentId: 11 },
              { id: 42, Name: "Gage Daniels", Position: "Software Architect", Phone: "[phone]", parentId: 32 },
              { id: 43, Name: "Constance Vazquez", Position: "Director, Engineering", Phone: "[phone]", parentId: 32 },
              { id: 46, Name: "Darrel Solis", Position: "Team Lead", Phone: "[phone]", parentId: 43 },
              { id: 47, Name: "Brian Yang", Position: "Senior Software Developer", Phone: "[phone]", parentId: 46 },
              { id: 50, Name: "Lillian Bradshaw", Position: "Software Developer", Phone: "[phone]", parentId: 46 },
              { id: 51, Name: "Christian Palmer", Position: "Technical Lead", Phone: "[phone]", parentId: 46 },
              { id: 55, Name: "Summer Mosley", Position: "QA Engineer", Phone: "[phone]", parentId: 46 },
              { id: 56, Name: "Barry Ayers", Position: "Software Developer", Phone: "[phone]", parentId: 46 }
             
            ],

            schema: {
                model: {
                    id: "id",
                    expanded: true
                }
            }
        });

        $("#treelist").kendoTreeList({
            dataSource: dataSource,
            height: 540,
            columns: [
                { field: "Position" },
                { field: "Name" },
                { field: "Phone" }
            ]
        });
    }
</script>
<div id="treelist"></div>
<button type="button" id="refreshTree">Click Me!</button>

[Georgi]

Hello Rajaraman,

The observed behavior occurs because the widget is created multiple times over the same element without being destroyed.

The following article illustrates how to initialize a widget on the same DOM element more than once:

• http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization

I have modified the provided code in order to apply multiple initialization as explained in the above article:

http://dojo.telerik.com/ucObEv/6

Regards,
Georgi
Progress Telerik