Update Dynamic data in treetable plugin

Question

I implemented TreeView structure using treetable plugin. Functionality is

1) User selects date and hit the Button.

2) On click of the button,below code runs and binds the treeview. It is working as expected.

Now, issue is,on subsequent clicks of the button,data is coming but treeview functionality is not working. It is showing just a normal HTML. Whole code works only on first click. my Js Code is:

$.when(

             $.ajax({
                 type: "Post",
                 url: 'EmpScrWithSubordinate.aspx/GetEmpDetails',
                 async: false,
                 data: '{"SelectedDate":"' + selectdDate + '","sortExpression":"' + sortExpression + '"}',
                 contentType: 'application/json; charset=utf-8',
                 datatype: 'json',
                 success: function (result) {
                     $(".tree").append('<ul id="mainUl"></ul>');

                     var jsonResult = jQuery.parseJSON(result.d);

                     var tblSuperParent = jsonResult.tblSuperParentList;                   
                     var tblChild = jsonResult.tblChildList;

                     for (var i = 0; i < tblSuperParent.length; i++) {                   
                             var InTime = tblSuperParent[i]._InTime;                       
                           var  OutTime = tblSuperParent[i]._OutTime;                        
                            var Late = tblSuperParent[i].late;                       
                            var Early = tblSuperParent[i].early;                        
                            var Absent = tblSuperParent[i].Absent;                         
                            var Request = tblSuperParent[i].Request;
                         var ParentId = tblSuperParent[i].ParentEmpId;
                         var parentName = tblSuperParent[i].ParentEmpName;

                         BindParentTr(ParentId, parentName, InTime, OutTime, Late, Early, Absent, Request);

                     } 
                     for (var childIndex = 0; childIndex < tblChild.length; childIndex++) {
                                                      InTime = tblChild[childIndex]._InTime;                        
                           var  OutTime = tblChild[childIndex]._OutTime;                         
                           var  Late = tblChild[childIndex].late;                        
                           var  Early = tblChild[childIndex].early;
                           var  Absent = tblChild[childIndex].Absent;
                           var  Request = tblChild[childIndex].Request;
                         var parentId = tblChild[childIndex].ParentEmpId;
                         var childId = tblChild[childIndex].ChildEmpId;
                         var childEmpName = tblChild[childIndex].ChildEmpName;

                         BindChildTr(parentId, childId, childEmpName, InTime, OutTime, Late, Early, Absent, Request);

                     }                    

                 }
             })
             ).done(function () {
                 $("#tblEmpList").treetable({
                     expandable: true,
                 })
             })
 function BindParentTr(parentId, parentName, InTime, OutTime, Late, Early, Absent,Request) {        
        $("#tbodyData").append($('<tr>').attr("data-tt-id", parentId));
        var $row = $('tr[data-tt-id="' + parentId + '"]');
        $row.append('<td>' + parentName + '</td>');
        $row.append('<td>' + InTime + '</td>');
        $row.append('<td>' + OutTime + '</td>');
        $row.append('<td>' + Late + '</td>');
        $row.append('<td>' + Early + '</td>');
        $row.append('<td>' + Absent + '</td>');
        $row.append('<td>' + Request + '</td>');

    }
    function BindChildTr(parentId, childId, childEmpName, InTime, OutTime, Late, Early, Absent, Request) {
        var $row = $('tr[data-tt-id="' + parentId + '"]');

        $('<tr data-tt-id=' + childId + ' data-tt-parent-id=' + parentId + '></tr>').insertAfter($row);

        var $childRow = $('tr[data-tt-id="' + childId + '"]');

        $childRow.append('<td>' + childEmpName + '</td>');
        $childRow.append('<td>' + InTime + '</td>');
        $childRow.append('<td>' + OutTime + '</td>');
        $childRow.append('<td>' + Late + '</td>');
        $childRow.append('<td>' + Early + '</td>');
        $childRow.append('<td>' + Absent + '</td>');
        $childRow.append('<td>' + Request + '</td>');

    }

Any clues on how to resolve this issue? Any help will be greatly appreciated.

Answer 1

I have resolved it my self by doing

$("#tblEmpList").treetable({expandable: true}, true);

Reference : https://github.com/ludo/jquery-treetable/issues/128