Print Page - DataGrid hide rows

Title: DataGrid hide rows
Post by: btork on November 03, 2016, 08:50:37 AM

Hello,

I'm trying to create a grid with a parent row and child rows. The child rows will be hidden initially and will expand on click of the plus sign. All of the rows will be in the same table format (meaning it's not a subgrid, just child rows in the same table). I cannot seem to figure out how to do this with easyUI.

Any help is much appreciated. Attached is my example table (pretty simple)

<table id="tt" class="easyui-datagrid" style="width:100%;height:550px;">

<thead frozen="true"><tr><th field="itemid" width="200">Test 2</th><th field="productid" width="60" align="center">Yards</th></tr></thead><thead><tr><th field="hole1" width="60" align="center">333</th><th field="hole2" width="60" align="center">481</th><th field="hole3" width="60" align="center">360</th><th field="hole4" width="60" align="center">146</th><th field="hole5" width="60" align="center">380</th></tr>
</thead>

<tbody>
<tr><td field="itemid" width="80">Parent Record</td><td field="productid" width="80"></td><td field="hole1" width="80">4</td><td field="hole2" width="80"></td><td field="hole3" width="80"></td><td field="hole4" width="80"></td><td field="hole5" width="80"></td></tr>
<tr><td field="itemid" width="80">Child</td><td field="productid" width="80"></td><td field="hole1" width="80">4</td><td field="hole2" width="80">5</td><td field="hole3" width="80">4</td><td field="hole4" width="80">2</td><td field="hole5" width="80"></td></tr>
<tr><td field="itemid" width="80">Parent Record</td><td field="productid" width="80"></td><td field="hole1" width="80">5</td><td field="hole2" width="80">6</td><td field="hole3" width="80">4</td><td field="hole4" width="80">6</td><td field="hole5" width="80"></tr>
</tbody>
</table>

thanks,
Brian

Title: Re: DataGrid hide rows
Post by: stworthy on November 03, 2016, 05:13:31 PM

Please use the treegrid instead, try this code:

Code:

<script type="text/javascript">
    var data = [{
        itemid:'Parent Record1',hole1:'4',state:'closed',
        children:[{
            itemid:'Child',hole1:'4',hole2:'5',hole3:'4',hole4:'2'
        }]
    },{
        itemid:'Parent Record2',hole1:'5',hole2:'6',hole3:'4',hole4:'6'
    }];
</script>
<table id="tt" class="easyui-treegrid" data-options="idField:'itemid',treeField:'itemid',data:data" style="width:100%;height:550px;">
<thead frozen="true">
    <tr>
        <th field="itemid" width="200">Test 2</th>
        <th field="productid" width="60" align="center">Yards</th>
    </tr>
</thead>
<thead>
    <tr>
        <th field="hole1" width="60" align="center">333</th>
        <th field="hole2" width="60" align="center">481</th>
        <th field="hole3" width="60" align="center">360</th>
        <th field="hole4" width="60" align="center">146</th>
        <th field="hole5" width="60" align="center">380</th>
    </tr>
</thead>
</table>

Title: Re: DataGrid hide rows
Post by: btork on November 04, 2016, 07:24:28 AM

Thank you. This might work well for me. How can I style the expand image? I'd ideally like to be able to toggle the expand function from clicking anywhere in the parent itemid cell instead of from the small arrow.

Thanks,
Brian

Title: Re: DataGrid hide rows
Post by: stworthy on November 04, 2016, 09:38:57 PM

You can bind the 'onClickCell' event. When clicking on the 'itemid' cell, call the 'toggle' method to expand or collapse the row.

Code:

onClickCell:function(field,row){
    if (field == 'itemid'){
        $(this).treegrid('toggle', row.itemid);
    }
}

Title: Re: DataGrid hide rows
Post by: btork on November 05, 2016, 06:46:57 AM

Thank you. Works as expected.

Brian

EasyUI Forum

General Category => General Discussion => Topic started by: btork on November 03, 2016, 08:50:37 AM