TreeGrid Merge / Span Columns

[pjobbins]

Is it possible to to have a cell span columns in the TreeGrid?  e.g. the long folder name in the screenshot attached.

NB  I tried adapting the process described for DataGrid cell merging cells here: https://www.jeasyui.com/tutorial/datagrid/datagrid13.php

e.g. ... onLoadSuccess: function (row, data) {$('#tt').treegrid('mergeCells', { index: 2, field: 'name', colspan: 3 }); }

But no joy.

[jarry]

The better way to display a long folder title is to attach a css class on the folder rows, define some css styles to let the title override the cells.

Code:

<style type="text/css">
	.trow .datagrid-cell{
		overflow: visible;
	}
	.trow td:not(:last-child){
		border-right-color: transparent;
	}
</style>
$('#tg').treegrid({
	columns: [[
		{field:'name',title:'Name',width:200},
		{field:'size',title:'Size',width:100},
		{field:'date',title:'Date',width:150}
	]],
	data: data,
	idField: 'id',
	treeField: 'name',
	rowStyler: function(row){
		if (row.children && row.children.length){
			return {class:'trow'}
		}
	}
})

For more information please look at this live example http://code.reloado.com/upuwoq3/edit#preview

[pjobbins]

Thanks jarry.  That works well until the text is longer as it doesn't wrap - see attached

I've been looking at manipulating the DOM after load with some success; I add a known css class to the elements I want to span, then after load look for that class and perform the manipulation:

Code:

...
function colspanFormatter(cssClass, cols) {
    $('.' + cssClass).closest('tr').each(function() {
        for (var c = cols - 1; c > 0; c--) {
            $(this).children('td').eq(c).remove();
        }
        $(this).children('td').eq(0).attr('colspan', cols.toString());
        $(this).children('td').eq(0).children(0).width('100%');
        $(this).removeClass(cssClass);
    });
};
...
$(function(){
    ...
    onLoadSuccess: function (row, data) { colspanFormatter('colspan3', 3); }
...

see demo: http://code.reloado.com/efobob4/edit#preview

This wraps nicely
But doesn't align very well on at the left

[stworthy]

This example works well.
http://code.reloado.com/upuwoq3/2/edit

[pjobbins]

That works perfectly stworthy, thank you