Create subgrid with master datagrid

Tutorial » Create subgrid with master datagrid

Use the detail view of datagrid, users can expand a row to show additional details. As any content can be loaded as the row details, the subgrid can be dynamically loaded also. This tutorial will show you how to create a subgrid with master datagrid.

Step 1: Create Master DataGrid

Step 2: Set Detail View to show subgrid

To use the detail view, remember to include the view script file to your page header.

When users click expand button('+'), the 'onExpandRow' event will be triggered. We create a new subgrid with tree columns. Remember to call 'fixDetailRowHeight' method for master datagrid when subgrid load data successfully or resize.

Step 3: The Server Code


Download the EasyUI example: