Layout collapse error


#1

If collapse is applied to the layout and then released, the elements in the layout to which the grid is applied disappear and the following error occurs.

Uncaught TypeError: Cannot set properties of null (setting ‘_node’)
at Bt (suite.js:22)
at qt.Jt [as _redraw] (suite.js:22)
at It (suite.js:22)
at Pt (suite.js:22)
at It (suite.js:22)
at Pt (suite.js:22)
at suite.js:22
at Rt (suite.js:22)
at Gt (suite.js:22)
at Bt (suite.js:22)

There is nothing wrong with the layout to which the form is applied. What’s the reason?
Below is the source I worked on.

		// layout
		docLayout = new dhx.Layout("layout_wrap", {
			type: "line"
			, rows: [
				{
					header : "LIST"
					, collapsable : true
					, rows: [
						{id:"a", height:"35px"}
						, {id:"b", height:"50px"}
						, {id:"c"}
					]
				}
				, {
					header : "USER"
					, collapsable : true
					, rows:[
						{id:"d", height:"35px"}
						, {id:"e"}
					]
				}
			]
		});
		
		// Form
		var detailForm = new dhx.Form(docLayout.getCell("e"), {
			css: "custom-form"
			, cols: [
				{
					rows: [
						{type: "input", name: "TEST_ID", label: "NO", labelPosition: "left", labelWidth: 90, width: 350, readOnly: true, required: true}
					]
				}
			]
		});

		// Grid
		var gridColumns = [
			{width:60, id:"TEST_ID", type:"string", header:[{text:"NO", align:"center"}], align:"center"}
			, {width:200, id:"TEST_LOGIN", type:"string", header:[{text:"LOGIN ID", align:"center"}]}
		];
		
		mainGrid = new dhx.Grid(docLayout.getCell("c"), {
			selection: "row"
			, tooltip: false
			, css: "custom-grid"
			, columns: gridColumns 
		});

#2

Please, try to use the attach() method to attach the component to the layout cell:
https://docs.dhtmlx.com/suite/layout/api/cell/layout_cell_attach_method/