[SOLVED] Datagrid column same width depending on longest title

[jega]

HI.

Can't find anythig about this.

Have a datagrid with dynamic columns. How can i set the width to alle columns depending on the longest header title.

Jesper

[jega]

One solution

var colWidth = 0;
$.each(scrollCols, function(index, element) {
     if ($('#'+element.id).width() > colWidth){colWidth = $('#'+element.id).width()}
});
$.each(scrollCols, function(index, element) {
   $('#'+element.id).css('width',colWidth);
});

BUT, is there a better way to do it ??

[jarry]

Here is the extended method to achieve this functionality.

Code:

$.extend($.fn.datagrid.methods, {
	setSameColumnWidth: function (jq) {
		return jq.each(function () {
			const dg = $(this);
			let colWidth = 0;
			const fields1 = dg.datagrid('getColumnFields',true);
			const fields2 = dg.datagrid('getColumnFields',false);
			const fields = fields1.concat(fields2);
			fields.forEach(field => {
				const opt = dg.datagrid('getColumnOption', field);
				if (colWidth < opt.width) {
					colWidth = opt.width;
				}
			});
			fields.forEach(field => {
				const opt = dg.datagrid('getColumnOption', field);
				opt.width = colWidth;
				opt.boxWidth = colWidth - opt.deltaWidth;
			});
			dg.datagrid('fixColumnSize').datagrid('fitColumns');
		})
	}
})

Usage example:

Code:

$('#dg').datagrid('setSameColumnWidth')

[jega]

Hi jarry


Thanks. Works fine.

Any way to revert it without reload ??