Print Page - [SOLVED] Datagrid column same width depending on longest title

Title: [SOLVED] Datagrid column same width depending on longest title
Post by: jega on October 12, 2024, 11:47:47 AM

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

Title: Re: Datagrid column same width depending on longest title
Post by: jega on October 14, 2024, 02:00:18 AM

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 ??

Title: Re: Datagrid column same width depending on longest title
Post by: jarry on October 15, 2024, 07:15:36 PM

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')

Title: Re: Datagrid column same width depending on longest title
Post by: jega on October 16, 2024, 12:07:35 AM

Hi jarry

Thanks. Works fine.

Any way to revert it without reload ??

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jega on October 12, 2024, 11:47:47 AM