subgrid overflow

First column of my main grid has the type of sub_grid_row. When i click on + button, my subgrid is opened. However, i can only see the columns up to the length of the main row. My subgrid has more columns and bigger size than the main grid. The thing is that there are no horizontal scrollbar that allows me to scroll back and forth to see all subgrid’s columns. I know that this is overflow issue of the main grid & subgrid. But i dont know how to fix it. Can anyone show me how to make the horizontal scrollbar appear on subgrid?

Thanks


When subgrid is used, master grid will adjust height to show all rows in the subgrid, but it will not modify the column’s width in any way, so the only way to see all data - define master grid with width enough to show all columns in subgrid.

Through code modification it possible to enable inner scrolls in sub-grid,but it will look rather ugly.

Is there anyway to make the horizontal scroll bar appear in subgrid without modifying main grid size? i have tried comment out event: subgrid.callEvent(“onGridReconstructed”, []) and i can see the horizontal scrollbar of the main grid, and i can scroll and see all columns in subgrid. But this is not what i want, i want only the horizontal bar of the subgrid.

You can edit
dhtmlxgrid_excell_sub_row.js

and change the next line
td._sub_grid.objBox.style.overflow=“hidden”;

as
td._sub_grid.objBox.style.overflowY=“hidden”;

it will disable vertical scroll, but will preserve horizontal one.

Hi Stanislav,

I have set the overflow option as your suggestion. However, there is still no horizontal scroll bar in my subgrid. Am i missing something?

Thanks


Modified sub_row.js and sample of usage are attached.
dhtmlxgrid_excell_sub_row.zip (4.81 KB)

Thanks so much Stanislave. Your sample works correctly with loading data from xml. However, in my case, data is populated from javascript array using addRow function. I notice there is difference between loading from xml and loading from other source:

td._sub_grid.attachEvent("onGridReconstructed",function(){
		   		that._detectHeight(d,td,td._sub_grid.objBox.scrollHeight+td._sub_grid.hdr.offsetHeight+(this.ftr?this.ftr.offsetHeight:0));
		   		that._correctMonolite();
		   		this.setSizes();
		   		if (that.parentGrid) that.callEvent("onGridReconstructed",[]);
	   	   })
		   if (!that.callEvent("onSubGridCreated",[td._sub_grid,td.parentNode.idd,td._cellIndex,c])) return;
		   td._sub_grid.loadXML(c,function(){
				that._detectHeight(d,td,td._sub_grid.objBox.scrollHeight+td._sub_grid.hdr.offsetHeight+(td._sub_grid.ftr?td._sub_grid.ftr.offsetHeight:0));
				td._sub_grid.objBox.style.overflowY="hidden";
				that._correctMonolite();
				td._sub_row_type=null;
				if (!that.callEvent("onSubGridLoaded",[td._sub_grid,td.parentNode.idd,td._cellIndex,c])) return;
				if (that._ahgr) that.setSizes();
		   	});	

I have tried to put td._sub_grid.objBox.style.overflowY=“hidden” in onGridReconstructed function, but it doesnt work.

I make it. if i remove attach event onGridReconstructed in dhtmlxgrid_excell_sub_row.js then the horizontal scrollbar appears. However, the horizontal scrollbar is overlapped with subgrid’s last row. Someone has already asked about this problem, and the only fix is to call nGridReconstructed function. Is there any other way to fix this.

Unfortunately there is no simple solution.
Try to use update dhtmlxgrid_excell_sub_row.js

By the way, adding rows by addRow is slowest method, you can use grid.parse(arr, “jsarray”) which is a lot faster
dhtmlxgrid_excell_sub_row4.zip (3.63 KB)

Thanks so much Stanislav, all work now!!! you save my life.