EasyUI Forum
March 28, 2024, 08:04:53 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Resize panel upon adding a new row to a datagrid  (Read 3216 times)
martinh
Newbie
*
Posts: 10


View Profile Email
« on: June 15, 2018, 02:13:00 AM »

Hi,

I have a datagrid in a panel and i want to resize the panel when a new row is added to the datagrid by the end user.

How do i go about doing this?

HTML
Code:
            <div id="sectionA" class="easyui-panel" title="Section A" style="padding:5px;height:250px;">
                <table id="dg"
                    toolbar="#toolbar"
                    pagination="false"
                    pageList="[10,20,30,40,50,100]"
                    singleSelect="true"
                    fitColumns="false"
                    fit="true"
                    nowrap="true"
                    rownumbers="false"
                    autoSave="true"
                    idField="id">
                </table>
                <div id="toolbar">
                    <a id="btnAdd" href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="fncAddSave(1)">Add</a>
                    <a id="btnSave" href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="fncAddSave(2)">Save</a>
                </div>



JS
Code:
function fncAddSave($addsave){
$('#sectionA').panel('resize',{
    //height: 600
});
$('#dg').datagrid('resize',{
    //height: 600
});

    if($addsave == 1){
        $('#dg').edatagrid('addRow',{
            index: 0,
            row:{
                randNBR:randNBR
            }
        });
        $('#btnAdd').hide();
        $('#btnSave').show();
    } else if($addsave == 2){
        $('#dg').edatagrid('saveRow');
        $('#btnAdd').show();
        $('#btnSave').hide();
    }
};
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: June 15, 2018, 05:37:48 PM »

Your panel has the 250px height and the datagrid has the 'fit' set to true. This means that the datagrid will full fill all the space of the panel. If you want to resize the panel, just call the 'resize' method.
Code:
$('#sectionA').panel('resize', ...);
Logged
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!