Print Page - Datagrid column sizing programatically

Title: Datagrid column sizing programatically
Post by: morib on May 21, 2014, 01:48:08 PM

Hi! I need to set the width of a datagrid specific column programatically. Ideally I would like to set the width using the column field name and I would not want to reset the entire columns settings... Is this possible?

For example, my datagrid has 6 columns with 1 frozen column as shown in http://jsfiddle.net/Ng8aL/1/

I would like to change the width of, for example f4, from 180 to 300 using javascript (for example on click of a button)

Thank you!

Title: Re: Datagrid column sizing programatically
Post by: jarry on May 21, 2014, 05:52:41 PM

Extending a new method to achieve this functionality may be a better way. The code below is the implementation of 'resizeColumn' method that can be used to resize a column programmatically.

Code:

$.extend($.fn.datagrid.methods,{
	resizeColumn:function(jq,param){
		return jq.each(function(){
			var dg = $(this);
			var col = dg.datagrid('getColumnOption', param.field);
			col.boxWidth = param.width + (col.boxWidth-col.width);
			col.width = param.width;
			dg.datagrid('fixColumnSize', param.field);
		})
	}
})

For example, to resize the 'itemid' column's size, you can call 'resizeColumn' method. The code looks like this:

Code:

$('#mygrid').datagrid('resizeColumn', {
  field: 'itemid',
  width: 200
});

Title: Re: Datagrid column sizing programatically
Post by: morib on May 22, 2014, 04:10:19 PM

Thank you very much for this, it works perfectly!

Title: Re: Datagrid column sizing programatically
Post by: morib on May 29, 2014, 04:08:50 PM

SOLVED

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: morib on May 21, 2014, 01:48:08 PM