EasyUI Forum
March 28, 2024, 02:13:51 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: datagrid dynamically set / reset row height [Solved]  (Read 15203 times)
devnull
Sr. Member
****
Posts: 431


View Profile
« 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 ?
« Last Edit: June 20, 2015, 01:55:59 AM by devnull » Logged

-- Licensed User --
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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);
}
Logged
devnull
Sr. Member
****
Posts: 431


View Profile
« Reply #2 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


Logged

-- Licensed User --
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 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');
Logged
devnull
Sr. Member
****
Posts: 431


View Profile
« Reply #4 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 ?

Logged

-- Licensed User --
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #5 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'
});
Logged
devnull
Sr. Member
****
Posts: 431


View Profile
« Reply #6 on: June 19, 2015, 12:49:37 AM »

Thanks

« Last Edit: June 20, 2015, 01:55:32 AM by devnull » Logged

-- Licensed User --
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!