Print Page - Resize panel upon adding a new row to a datagrid

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>

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();
    }
};

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', ...);

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: martinh on June 15, 2018, 02:13:00 AM