Duped TreeList Records

2 posts, 0 answers
  1. Rajaraman
    Rajaraman avatar
    3 posts
    Member since:
    May 2015

    Posted 04 Aug Link to this post

    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 rajaraman.soundarara@aig.com

    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: "(555) 924-9726", parentId: null },
                  { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", Phone: "(438) 738-4935", parentId: 1 },
                  { id: 32, Name: "Buffy Weber", Position: "VP, Engineering", Phone: "(699) 838-6121", parentId: 2 },
                  { id: 11, Name: "Hyacinth Hood", Position: "Team Lead", Phone: "(889) 345-2438", parentId: 32 },
                  { id: 60, Name: "Akeem Carr", Position: "Junior Software Developer", Phone: "(738) 136-2814", parentId: 11 },
                  { id: 78, Name: "Rinah Simon", Position: "Software Developer", Phone: "(285) 912-5271", parentId: 11 },
                  { id: 42, Name: "Gage Daniels", Position: "Software Architect", Phone: "(107) 290-6260", parentId: 32 },
                  { id: 43, Name: "Constance Vazquez", Position: "Director, Engineering", Phone: "(800) 301-1978", parentId: 32 },
                  { id: 46, Name: "Darrel Solis", Position: "Team Lead", Phone: "(327) 977-0216", parentId: 43 },
                  { id: 47, Name: "Brian Yang", Position: "Senior Software Developer", Phone: "(565) 146-5435", parentId: 46 },
                  { id: 50, Name: "Lillian Bradshaw", Position: "Software Developer", Phone: "(323) 509-3479", parentId: 46 },
                  { id: 51, Name: "Christian Palmer", Position: "Technical Lead", Phone: "(490) 421-8718", parentId: 46 },
                  { id: 55, Name: "Summer Mosley", Position: "QA Engineer", Phone: "(784) 962-2301", parentId: 46 },
                  { id: 56, Name: "Barry Ayers", Position: "Software Developer", Phone: "(452) 373-9227", 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>

  2. Georgi
    Admin
    Georgi avatar
    161 posts

    Posted 08 Aug Link to this post

    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:

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top