javascriptkendo-treelist

Kendo treelist Child node issue


whenever i cancelled the updating process from the child node,the child node just merge with root node,i don't find error in the console or i can't find anything suspicious.but after a reload,all becomes normal

$(document).ready(function () {


         var windowTemplate = kendo.template($("#windowTemplate").html());
                 var dataSource = new kendo.data.TreeListDataSource({

                    transport: {
                         read: {
                             url: "officeprofiletree",
                             type: 'POST',
                             dataType: "json"
                         },
                         update: {
                            url: "officeprofilenametree_update",
                            type: 'POST',
                            contentType :'application/json',
                             dataType: "json"

                         },
                         destroy: {
                             url: "officeprofilenametree_destroy",
                             type: 'POST',
                            contentType :'application/json',
                             dataType: "json"
                         }, 

                         parameterMap: function(options, operation) {

                             if (operation !== "read" && options.models)
                            { 
                            return JSON.stringify(options.models);
                            }  
                         }
                     },
                     batch: true,
                     sort: { field: "name", dir: "asc" },
                     schema: {
                         model: {
                             id: "officeProfileNMId",
                             parentId: "parentId",

                             fields: {
                                 officeProfileNMId: { type:"number" },
                                 parentId:{nullable:true,type:"number"},
                                 mobile:{ type:"string"},
                                  address:{type:"string"},
                                 phone: {type:"string"},

                             },
                         }
                     }

                 });
                 var window = $("#window").kendoWindow({
                     visible:false,
                    title: "Are you sure you want to delete this record?",
                     width: "450px",
                     height: "60px",
                 }).data("kendoWindow");


           var treelist = $("#treelist").kendoTreeList({


              dataSource: dataSource,
                 pageable: true,
                 dataBound: function (){
                     var tree = this;
                     var trs = this.tbody.find('tr').each(function(){
                       var item = tree.dataItem($(this));
                       if( item.parentId == null) {
                         $(this).find('.k-button,.k-button').hide();
                       }

                     });               
                   },

                     columns: [
                         { field: "name", title: "Name"},
                         { field: "mobile", title:"Mobile", format: "{0:c}", hidden: true },
                         { field: "address", title:"Address",hidden: true },
                         { field: "phone",title:"Phone" ,hidden: true },

                         { command: [
                             {name: "edit"},

                             {name: "Delete",  
                                 click: function(e){  
                                     e.preventDefault();
                                     var tr = $(e.target).closest("tr"); 
                                     var data = this.dataItem(tr); 
                                     window.content(windowTemplate(data)); 
                                     window.center().open();

                                     $("#yesButton").click(function(){
                                        treelist.dataSource.remove(data);
                                        treelist.dataSource.sync(); 
                                        window.close();
                                        reloading();
                                         })

                                     $("#noButton").click(function(){
                                         window.close();
                                     })
                                 }                              
                             }
                             ]}

                      ] ,
                      editable: {
                          mode: "popup",

                        },




                      }).data("kendoTreeList");
        });

the updation and deletion works fine by the way,Here is the fiddle https://jsfiddle.net/me09jLy7/2/

updation:

whenever i create a child to ranikannur gives me 3 children with same name in each root ranikannur,in my database there is only one child is parented by ranikannur but treelist shows it as 3 children in each parent node,the children count 3 is getting from the total ranikannurparent nodes(here tree has 3 ranikannur parent nodes) i guess.how is this getting the 3 children?


Solution

  • u just try it...

    $(document).ready(function () {
             var windowTemplate = kendo.template($("#windowTemplate").html());
                     var dataSource = new kendo.data.TreeListDataSource({
    
                        transport: {
                             read: {
                                 url: "officeprofiletree",
                                 type: 'POST',
                                 dataType: "json"
                             },
                             update: {
                                url: "officeprofilenametree_update",
                                type: 'POST',
                                contentType :'application/json',
                                 dataType: "json"
    
                             },
                             destroy: {
                                 url: "officeprofilenametree_destroy",
                                 type: 'POST',
                                contentType :'application/json',
                                 dataType: "json"
                             }, 
    
                             parameterMap: function(options, operation) {
    
                                 if (operation !== "read" && options.models)
                                { 
                                return JSON.stringify(options.models);
                                }  
                             }
                         },
                         batch: true,
                         sort: { field: "name", dir: "asc" },
                         schema: {
                             model: {
                                 id: "officeProfileNMId",
                                 parentId: "parentId",
    
                                 fields: {
                                     officeProfileNMId: { type:"number" },
                                     parentId:{nullable:true,type:"number"},
                                     mobile:{ type:"string"},
                                      address:{type:"string"},
                                     phone: {type:"string"},
    
                                 },
                             }
                         }
    
                     });
                     var window = $("#window").kendoWindow({
                         visible:false,
                        title: "Are you sure you want to delete this record?",
                         width: "450px",
                         height: "60px",
                     }).data("kendoWindow");
    
    
               var treelist = $("#treelist").kendoTreeList({
    
    
                  dataSource: dataSource,
                     pageable: true,
                     dataBound: function (){
                         var tree = this;
                         var trs = this.tbody.find('tr').each(function(){
                           var item = tree.dataItem($(this));
                           if( item.parentId == null) {
                             $(this).find('.k-button,.k-button').hide();
                           }
    
                         });               
                       },
    
                         columns: [
                             { field: "name", title: "Name"},
                             { field: "mobile", title:"Mobile", format: "{0:c}", hidden: true },
                             { field: "address", title:"Address",hidden: true },
                             { field: "phone",title:"Phone" ,hidden: true },
    
                             { command: [
                                 {name: "edit"},
    
                                 {name: "Delete",  
                                     click: function(e){  
                                         e.preventDefault();
                                         var tr = $(e.target).closest("tr"); 
                                         var data = this.dataItem(tr); 
                                         window.content(windowTemplate(data)); 
                                         window.center().open();
    
                                         $("#yesButton").click(function(){
                                            treelist.dataSource.remove(data);
                                            treelist.dataSource.sync(); 
                                            window.close();
                                            reloading();
                                             })
    
                                         $("#noButton").click(function(){
                                             window.close();
                                         })
                                     }                              
                                 }
                                 ]}
    
                          ] ,
                          editable: {
                              mode: "popup",
    
                            },
    
    
    
    
                          }).data("kendoTreeList");
            });