EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Juan Antonio Martínez on May 26, 2016, 09:48:49 AM



Title: set parent datagrid row height, but let unchanged row height on subgrid
Post by: Juan Antonio Martínez on May 26, 2016, 09:48:49 AM
I have a detailview datagrid with subgrids, and want to change parent row height (to emphasize these rows) , but let unchanged subgrids row height

What's the right way to to?

(Using easyui-1.4.2)

Thanks in advance
Juan Antonio


Title: Re: set parent datagrid row height, but let unchanged row height on subgrid
Post by: stworthy on May 26, 2016, 05:50:02 PM
You can override the '.datagrid-row' CSS style to change the row height. Please try this code:
Code:
<style type="text/css">
    .datagrid-row{
        height:30px;
    }
    .datagrid-row-detail .datagrid-row{
        height:25px;
    }
</style>


Title: Re: set parent datagrid row height, but let unchanged row height on subgrid
Post by: Juan Antonio Martínez on May 27, 2016, 02:29:57 AM
Fine, but this affect every datagrid in page (including combos, and so...). And the inner datagrid-cell height is not affected, just the entire row. I want to reserve enought space to add some icons in parent row, so need increase also datgrid-cell height

My final solution was:
Code:
        <div id="pb_tabla" data-options="region:'center'">
                <table id="pb_finales-datagrid"></table>
        </div>

Code:
    
<style>
    #pb_tabla .datagrid-row {
        height:40px;
        line-height: 40px;
    }
    #pb_tabla .datagrid-row .datagrid-cell {
        height:35px;
    }
    #pb_tabla .datagrid-row-detail .datagrid-row {
        height:25px;
        line-height: 25px;
    }
</style>

Code:
<script type="text/javascript">
....
$('#pb_finales-datagrid').datagrid({....});
</script>

Thanks for your help. Cheers