行に詳細なデータを追加するにはどうすればよいですか？

Question

datatableコントロールのgijgo.com/Gridからgijgoを使用します。これまでの標準的なデータ読み込みでは、それは魅力的に機能し、超高速でした。しかし、今私は別名グリッドのグリッドを追加する必要があります。この画像のショーとして：

Gijgoのウェブサイトは、正規のDataTableが、サブグリッドを生成するではない多くの情報を生成する上でいくつかのサンプルコードがあります。

Iプライマリテーブル

<link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 
<link href="~/Content/grid.min.css" rel="stylesheet" /> 

<table id="grid" style="margin-left:5%;"> 
    @*<thead> 
    <tr> 
    <th width="100em" data-field="ProductID">Product ID</th> 
    <th data-field="Name">Name</th> 
    <th data-field="ProductNumber" data-min-width="250" data-priority="1">Product Number</th>    
    </tr> 
    </thead>*@ 
</table> 

@section Scripts{ 
    <script src="~/Scripts/jquery-2.2.3.min.js"></script> 
    <script src="~/Scripts/bootstrap.min.js"></script> 
    <script src="~/Scripts/grid.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     var grid = $('#grid').grid({ 
     columns: [ 
      { title: 'CategoryID', field: 'Category ID' }, 
      { title: 'Name', field: 'Name' }, 
      { title: 'Is Blocked', field: 'Blocked' } 
     ], 
     dataSource: 'Home/GetData', 
     uiLibrary:'bootstrap', 
     detailTemplate: '<div class="divT row"><table class="tbl" data-source="Home/GetAllProducts"></table></div>',/*****/ 
     responsive: true, 
     showHiddenColumnsAsDetails: false, 
     width: 800, 

     }); 
    }) 
} 

を生成するために書かれた次のコードを持っている私はGijgo demo site上に述べたように詳細セクションを作成するために、プロパティ「detailTemplate」を使用しています。各行に内部テーブルは生成されません。内部テーブルのデータはDBから得られます。

上記のコードは、すべてのカテゴリをプライマリ行としてリストし、各行の下に、そのカテゴリのすべての商品を内側のグリッドに表示する必要があります。

私のサブグリッドの課題を達成するために離れていますか？

Answer 1

subgridsでデータを読み込むためにdetailExpandイベントを使用するのが最もよいと思います。
あなたがここhttp://gijgo.com/Grid/Events/detailExpand

でこのイベントの詳細を読むことができる例を示します。

var grid, data = [ {ID: 1, Name: 'test 1'}, {ID: 2, Name: 'test 2'}, {ID: 3, Name: 'test 3'} ]; 
    grid = $('#grid').grid({ 
     dataSource: '/version_0_6/Grid/GetPlayers', 
     detailTemplate: '<div></div>', 
     columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'DateOfBirth', type: 'date' } ] 
    }); 
    grid.on('detailExpand', function (e, $detailWrapper, record) { 
     var subggrid = $detailWrapper.append('<table id="subgrid"/>').find('table').grid({ 
      dataSource: data, 
      columns: [{ field: 'ID', width: 20 }, { field: 'Name' }], 
      pager: { limit: 2 } 
     }); 
     subggrid.on('pageChanging', function (e, newPage) { 
      e.stopPropagation(); 
      }); 
    }); 
    grid.on('detailCollapse', function (e, $detailWrapper, record) { 
     $detailWrapper.empty(); 
    });