Print Page - datagrid dynamically set / reset row height [Solved]

Title: datagrid dynamically set / reset row height [Solved]
Post by: devnull on June 18, 2015, 04:49:25 PM

How can I change the row height of dynamically and reset them back again.

I gues I can use fixRowHeight() to reset, but how would I set for example the row height (both frozen dna normal) to say 100px ?

Title: Re: datagrid dynamically set / reset row height
Post by: stworthy on June 18, 2015, 06:08:38 PM

You can use the column's 'formatter' function to construct a cell with special height. Change this height value and then call 'refreshRow' method to change all the row height dynamically.

Code:

$('#dg').datagrid({
    columns:[[
        {field:'itemid',title:'ItemId',width:100,
            formatter:function(value){
                var opts = $('#dg').datagrid('options');
                opts.rowHeight = opts.rowHeight||25;
                var style = 'height:'+opts.rowHeight+'px;line-height:'+opts.rowHeight+'px;';
                return '<div style="'+style+'">'+value+'</div>';
            }
        },
        {field:'productid',title:'Product',width:100}
    ]]
})

To change the row height, just reset the 'rowHeight' property value and then call 'refreshRow' method.

Code:

var dg = $('#dg');
dg.datagrid('options').rowHeight = 40;
for(var i=0; i<dg.datagrid('getRows').length; i++){
    dg.datagrid('refreshRow', i);
}

Title: Re: datagrid dynamically set / reset row height
Post by: devnull on June 18, 2015, 06:16:20 PM

Thanks, but I need to change the row height after the table has been loaded and rendered, and it needs to be triggered from a completely separate object and event.

This will be triggered by for example a mouseenter event on a div contained within the row cell, when the user mouses ober the div, I want to expand the height of the row so that I can show some other information.

Many thanks

Title: Re: datagrid dynamically set / reset row height
Post by: stworthy on June 18, 2015, 06:29:21 PM

If you only want to change the height of one row. Please try this:

Code:

var dg = $('#dg');
var tr = dg.datagrid('options').finder.getTr(dg[0],1);
tr.css('height','40px');

Title: Re: datagrid dynamically set / reset row height
Post by: devnull on June 18, 2015, 09:57:41 PM

Thanks, that works and solves the problem, and I know this is not a direct easyui question, but is it possible to animate the height change so that it is kind of like a slidedown animation ?

Title: Re: datagrid dynamically set / reset row height
Post by: stworthy on June 18, 2015, 11:36:26 PM

Just call the 'animate' method to make it slide down.

Code:

var dg = $('#dg');
var tr = dg.datagrid('options').finder.getTr(dg[0],1);
tr.animate({
    height: '60px'
});

Title: Re: datagrid dynamically set / reset row height
Post by: devnull on June 19, 2015, 12:49:37 AM

Thanks

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on June 18, 2015, 04:49:25 PM