[Solved] grid.Destroy() not working after installing new Kendo UI release

[Bradley]

We have been using Kendo UI Grid integrated with angularJS, using angular-kendo.js JavaScript library for the integration.

The new release of Kendo UI, which integrates the angular directives with the core Kendo functionality, has broken our application.

 The grid.Destroy() function removes all columns except the  "Quantities" columns, which are array based JavaScript objects.

The "Quantities" columns which are left in the grid following grid.Destroy() are dynamically constructed at run time, since we do not know the number of "Quantities" columns until data is returned from the server.

 All grid data is displayed correctly on initial page load.

 Below is code being used.

 // one row of Jason sent from the server to populate the dataSource:

 
 {"col1":[1,3],"col2":"12345","col3":[1,3],"col4":"Value","col5":1,"col6":"99999","col7":"324567-29","col8":"22222","col9":"true","Quantities":[{"qty":"3",   "modified":"false","status":"A"},{"qty":"3",  "modified":"false","status":""},{"qty":"3", "modified":"false","status":""},{"qty":"3","modified":"false", "status":""}]}

 

 //  Code to dynamically create Quantities columns

// dynamically create column headers for partQuantities

           
// loop through lomPartNumberColumnHears to get column titles

           
var abcQtyColumnHeader = function (field, title, width, attributes, template) {

               
this.field = field;

               
this.title = title;

               
this.width = width;

               
this.attributes = attributes;

               
this.template = template;

           
}

 

           
// get length of ABCColumnHeaders to establish loop for creating partQuantity
column headers

           
var abcLength = ourData.ABCColumnHeaders.length;

 

           
// loop to push partQuantities column header objects onto colDefinitionData
array

           
for (var i = 0; i < ourData.ABCColumnHeaders.length; i++) {

               
var title = ourData.ABCColumnHeaders[i];

               
var QuantityField = "Quantities[" + i + "].qty";

               
var width = "46px";          
var template = "<div value=#if(Quantities[" + i + "].status ==='A'){# #='add'# #} else if(Quantities[" + i + "].status === 'D'){##='delete'# #} else if(Quantities[" + i +"].status === 'C'){##='change'# #}#>#= Quantities[" + i + "].qty #</div>";
var attributes = { style: "text-align:center" };
var abcQuantityColumnHeader = new abcQtyColumnHeader(partQuantityField, title,
width, attributes, template);
colDefinitionData.push(abcQuantityColumnHeader);
}

[Atanas Korchev]

Hello Bradley,

The latest release of Kendo UI ships with built-in support of AngularJS. You should no longer omc;ide angular-kendo.js in your application. This is the first thing you should try as there are known issues with having angular features included two times in the page.

Could you please clarify how you use the destroy method of the grid? Be design it doesn't remove any column. The destroy method detaches DOM event handlers to avoid memory leaks.

Could you please update this Kendo Dojo demo to show us how you are using grid.destroy in your application?

Regards,
Atanas Korchev
Telerik

 

 

[Bradley]

Atanas,

Thanks for responding. I should now be logged in as DevCraft Ultimate licensed user, don't know if it makes a difference.

1. I am not using kendo-angular since upgrading Kendo UI.

2. Does kendo.all.min.js wrap all angular directives, or de we also need kendo.angular.js?

3. As it turns out, we are not using grid.destroy(). We thought one of the Kendo functions was using it. However, it behaves like our process for saving and refreshing grid data, and it does not matter where I put grid.destroy(): the same results whenever it is called - the grid data is removed except for the quantities columns, which as I noted are composed of arrays of JavaScript objects, so perhaps you can answer two simple question:

4. Any reason grid.destroy() would leave columns which are composed of arrays of JavaScript objects, independent of how used?

5. Any reason why the updated version of Kendo UI would have issues with grid columns composed of arrays of JavaScript objects?

6. When I follow code on our Save routine, which I will post, grid.setDataSource has similar results: but this time data is saved on manual refresh of page, but only quantities columns show in the grid before any manual refresh, and page is frozen.

7. I will try to post to Kendo dojo, but don't know if I can make work, since while issue appears to only be grid related, much angular code is used to load page, so will first simply post code, so you can see it, then will try my hand at Dojo - which I think will take much simplification of existing code.  Also, can you tell me how I reference our javascript library files? and best way to include application JavaScript files?

Thanks

Bradleu  

[Atanas Korchev]

Hello Bradley,

Straight to your questions:

2. Yes kendo.all.min.js contains the angular directives. You must not include kendo.angular.js if you have already included kendo.all.min.js
3. 4 and 5. The destroy function doesn't remove any grid columns - you can refer to my demo which proves that. Perhaps something else does remove those columns but I am not sure what. Seeing a live demo will allow me to help you further.
6. This will to need a live demo as I am not sure what may be causing this problem.
7. The Kendo Dojo doesn't support including third party files. You have three options - send us a zip file that contains a runnable demo which reproduces the column disappearing, paste your custom JS in the Dojo snippet or use another site such as plunker that supports external files.

Regards,
Atanas Korchev
Telerik

 

 

[Bradley]

Atanas,

Thanks for reply,

How do I save the Dojo?

It seems, when using updated kendo.all.min.js,  grid.setDataSource() is choking on the unlocked grid columns, which is where the flow is hanging up, although grid.destroy() has same behavior.  I am working on Dojo demo, but don't know how to save, so I can go back to page.                                                                       I may send attached files, if I see they will do the job of letting you follow problem.   

[Bradley]

Atanas,

How do I log into Dojo?

Thanks,

Bradley

[Bradley]

Atanas,

I found the login on the Dojo page, but does not work for me, so I posted a note, as yet unanswered, on the General Forum, but assume I need to log into the Dojo page to save. Is this correct?

[Atanas Korchev]

Hi Bradley,

The dojo saves automatically your snippet on every change. To log in you need to register first as it doesn't currently work with Telerik.com credentials. You don't need to login to save a snippet though - just keep a track of the URL.

Regards,
Atanas Korchev
Telerik