TreeGrid clearAll method causes js error, on row selection

Suite and Optimus Suite 5
#1

Hi,

Im using dhtmlxSuite( Version 5.1 Professional Edition)

I have TreeGrid component attached window component, on window close i have called

auditGrid.clearAll(true);
auditGrid.auditGrid.destructor();

This works fine, and releases all the memory, but the problem is when I open other window
and select any row it gives me

dhtmlx.js:9 Uncaught TypeError: Cannot read property 'conf' of null at Object._bodyClick (dhtmlx.js:9) at Object.a.callEvent (dhtmlx.js:9) at HTMLTableElement.obj.onclick (dhtmlx.js:9)

row selection works fine if i did close any window previously

#2

Could you please, provide any code snippet with your components initialization or provide a complete demo/share a demo link, where the problem can be reconstructed locally.

#3

Hi Sematik,

we use bunch of dhtmlx components including window, layout, treegrid, context menu, statusbars, tabber, etc. And we are using knockoutjs for state managements. We have single page application architecture in our app where user can open multiple project windows, and every project is a knockoutjs model. for every project we open on project window with “3T” layout, with all the above mentioned components initialized for every window. and over main problem is we observed huge memory leaks when user opens and closes project, i have attached a memory leak screen shot in chrome browser. https://imgur.com/a/a52xRvO

Here is the grid and other component initialization & cleanup code.

SDPModule.DhtmlxWindowObj = new dhtmlXWindows({ image_path: $("#imagePath").val() }); //One time done at page load
	
	ko.bindingHandlers.dhtmlxWindow = {
		init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
	//executed for every user project
	var projectWindow = SDPModule.DhtmlxWindowObj.createWindow(windowId, offSet, offSet, 600, 400);
	var layout = projectWindow.attachLayout('3T');
	viewModel.auditGrid = layout.cells(SDPConfig.DHTMLXWindowCells.Grid).attachGrid();
	viewModel.auditGrid.enableContextMenu(viewModel.contextMenu);
	layout.cells(window.SDPConfig.DHTMLXWindowCells.Grid).attachStatusBar....}
	
	//Project close callback to dispose project window and other components attached to window.
	ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
				//Unload layout destroys all the attached components.
				viewModel.cleanupProjectData();
				//Copying the cleanupProjectData method here
				viewModel.cleanupProjectData  = function()  {
				if (viewModel.auditGrid && typeof viewModel.auditGrid.destructor === "function") {
					//https://docs.dhtmlx.com/api__dhtmlxgrid_clearall.html
					viewModel.auditGrid.clearAll(true);//If this line is commented the HTMLTableRow & HTMLTableCell object is not released properly
					//and Im getting the above stated error after adding clearAll call.
					viewModel.auditGrid.destructor();
					viewModel.auditGrid = null;
					}
					viewModel.windowLayout.cells(SDPConfig.DHTMLXWindowCells.Tabber).detachObject(true);
					viewModel.windowLayout.cells(SDPConfig.DHTMLXWindowCells.Grid).detachObject(true);
					viewModel.windowLayout.cells(SDPConfig.DHTMLXWindowCells.HighChart).detachObject(true);
					if (viewModel.windowLayout && typeof viewModel.windowLayout.unload === "function") {
						viewModel.windowLayout.unload();
						}
						
					if (viewModel.contextMenu && typeof viewModel.contextMenu.unload === "function") {
						viewModel.contextMenu.unload();
						viewModel.contextMenu = null;
						}

				layout = null;
				projectWindow = null;
				viewModel = null;
			});
			
			
	//other applicatication code.
	..........................................
	};

I belive HTMLTableRow & HTMLTableCell are created as part treegrid init and not deleted from browser memory even after grid is destroyed or layout unload or unload window close, we work with projects of thousands of rows with more than 100 columns in each grid. It is very important that we prevent memory leaks

Regards
Srinivas

#4

Hi Sematik,

Please pay attention to viewModel.cleanupProjectData where i have added call to destroy components

viewModel.auditGrid.clearAll(true); is removing HtmlTableRow & HtmlTableCell from memory after window close.

and after this only we started to see this error

dhtmlx.js:9 Uncaught TypeError: Cannot read property 'conf' of null
    at Object._bodyClick (dhtmlx.js:9)
    at Object.a.callEvent (dhtmlx.js:9)
    at HTMLTableElement.obj.onclick (dhtmlx.js:9)

My concern is why the HtmlTableRow & HtmlTableCell object memory is not cleared when i call destroy grid using the destructor. any help is much appriciated

Regards
Srinivas

#5

Unfortunately the problem cannot be reconstructed locally.

My concern is why the HtmlTableRow & HtmlTableCell object memory is not cleared when i call destroy grid using the destructor. any help is much appriciated
after the myGrid.destructer() grid object removes completely.

dhtmlx.js:9 Uncaught TypeError: Cannot read property ‘conf’ of null
This error means that you have not createdd the header configuration for the grid that you are trying to access.

If the problem still occurs for you please, provide a complete demo, where the problem can be reconstructed locally.
Here you can find a tutorial about creating a complete demo:
docs.dhtmlx.com/tutorials__auxi … pport.html