DataGrid hide rows

[btork]

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

[stworthy]

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>

[btork]

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

[stworthy]

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

[btork]

Thank you. Works as expected.

Brian