Print Page - Resize columns in datagrid removes percentage from width

Title: Resize columns in datagrid removes percentage from width
Post by: A-K on January 31, 2015, 04:18:38 AM

Hey,

I have a datagrid that all of his columns have width by percentage, this is important so that he will
be responsive to different sizes of window.

The problem is when the user is resizing the column it wont calculate the new percentage but instead it will give it
width by px which removes all the responsiveness of the column.

I cant remove the option to resize the columns because its very important for the users, but I cant let the width be in px and not responsive with percentage.
Is there a way I can continue to have the column width by percentage even after the user had resize it?

Thanks!

Title: Re: Resize columns in datagrid removes percentage from width
Post by: jarry on January 31, 2015, 09:00:01 AM

You can prevent the user from resizing columns by setting the column's 'resizable' property to false. Another way to solve this issue is to reset the column's width with percentage in 'onResizeColumn' event.

Code:

$('#dg').datagrid({
    onResizeColumn:function(field, width){
        var col = $(this).datagrid('getColumnOption', field);
        col.width = '25%';  // reset the width
        $(this).datagrid('resize');
    }
})

Title: Re: Resize columns in datagrid removes percentage from width
Post by: A-K on January 31, 2015, 09:07:01 AM

As I mentioned before, I cannot remove the option to resize the columns because its very important for my users to be able to do this.

The other way you mentioned is the same as removing the option, If its not the width that the user resized it to then the resize isnt helping
him.

Is there any plan for EasyUI to support returning the columns width in percentage instead of px after the user resized the column?
I think most of the websites today are responsive, and its a problem to use easyui components when a resize action makes them unresponsive to the window...

Title: Re: Resize columns in datagrid removes percentage from width
Post by: jarry on January 31, 2015, 06:08:41 PM

As the code above mentioned, reset the column width to its percentage value after resizing a column, you can easily solve your issue.

Code:

$('#dg').datagrid({
    onResizeColumn:function(field, width){
        var state = $.data(this, 'datagrid');
        var opts = state.options;

        var col = $(this).datagrid('getColumnOption', field);
        col.width = width/(state.dc.view.width()-opts.scrollbarSize)*100+'%';
        $(this).datagrid('resize');
    }
})

Title: Re: Resize columns in datagrid removes percentage from width
Post by: A-K on February 01, 2015, 12:16:55 AM

Thanks!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: A-K on January 31, 2015, 04:18:38 AM