主从表的从表数据是异步获取的时候，从表无法渲染显示，要如何设置？

主从表的从表数据是异步获取的时候，从表无法渲染显示，要如何设置？
（非异步数据是可以显示的， 异步获取数据则无法展开， 查看代码， 没有看到从表的内容行，只有表头）

您好，通过您的描述，我无法定位并重现这个问题，想了解您采用的是分离主从表还是内嵌主从表？具体怎么修改数据和刷新UI的呢？建议您可以提供一个能重现问题的Demo，或者在官网示例上重现这个问题~
主从分离表：https://demo.grapecity.com.cn/wi ... eparateGrids/purejs
主从内嵌表：https://demo.grapecity.com.cn/wi ... -Detail/NestedGrids(RowDetail)/purejs

是内嵌主从表，当点击主表行的“+”号 试图展开从表时，
当从表数据是异步数据时， 就无法展开， 控件没有反应， 也没有报错

您好，内嵌主从表中，从表是随展开操作实时加载的，也就是说只有当点击展开时，才会创建、加载从表的对象和数据，如以下代码所示：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import * as wjOdata from '@grapecity/wijmo.odata';
   
5. import * as wjGrid from '@grapecity/wijmo.grid';
   
6. import * as wjGridDetail from '@grapecity/wijmo.grid.detail';
   
7. //
   
8. document.readyState === 'complete' ? init() : window.onload = init;
   
9. //
   
10. function init() {
    
11.     //
    
12.     // get OData categories and products
    
13.     var url = 'https://services.odata.org/Northwind/Northwind.svc';
    
14.     var categories = new wjOdata.ODataCollectionView(url, 'Categories', {
    
15.         fields: ['CategoryID', 'CategoryName', 'Description']
    
16.     });
    
17.     var products = new wjOdata.ODataCollectionView(url, 'Products');
    
18.     //
    
19.     // shared column definitions
    
20.     var categoryColumns = [
    
21.         { binding: 'CategoryName', header: 'Category Name', width: '*' },
    
22.         { binding: 'Description', header: 'Description', width: '2*' }
    
23.     ];
    
24.     //
    
25.     // get products for a given category
    
26.     function getProducts(categoryID) {
    
27.         var arr = [];
    
28.         products.items.forEach(function (product) {
    
29.             if (product.CategoryID == categoryID) {
    
30.                 arr.push(product);
    
31.             }
    
32.         });
    
33.         return arr;
    
34.     }
    
35.     //
    
36.     // grid with HTML detail
    
37.     var htmlDetail = new wjGrid.FlexGrid('#htmlDetail', {
    
38.         autoGenerateColumns: false,
    
39.         columns: categoryColumns,
    
40.         itemsSource: categories,
    
41.         isReadOnly: true
    
42.     });
    
43.     //
    
44.     // html detail provider
    
45.     var dpHtml = new wjGridDetail.FlexGridDetailProvider(htmlDetail, {
    
46.         //
    
47.         // use animation when showing details
    
48.         isAnimated: true,
    
49.         //
    
50.         // create detail cells for a given row
    
51.         createDetailCell: function (row) {
    
52.             //
    
53.             // build detail content for the current category
    
54.             var cat = row.dataItem;
    
55.             var prods = getProducts(cat.CategoryID);
    
56.             var html = 'ID: <b>' + cat.CategoryID + '</b><br/>';
    
57.             html += 'Name: <b>' + cat.CategoryName + '</b><br/>';
    
58.             html += 'Description: <b>' + cat.Description + '</b><br/>';
    
59.             html += 'Products: <b>' + prods.length + ' items</b><br/>';
    
60.             html += '<ol>';
    
61.             prods.forEach(function (product) {
    
62.                 html += '<li>' + product.ProductName + '</li>';
    
63.             });
    
64.             html += '</ol>';
    
65.             //
    
66.             // create and return detail cell
    
67.             var cell = document.createElement('div');
    
68.             cell.innerHTML = html;
    
69.             return cell;
    
70.         }
    
71.     });
    
72.     //
    
73.     // grid with grid detail
    
74.     var gridDetail = new wjGrid.FlexGrid('#gridDetail', {
    
75.         autoGenerateColumns: false,
    
76.         columns: categoryColumns,
    
77.         itemsSource: categories,
    
78.         isReadOnly: true
    
79.     });
    
80.     //
    
81. 
    
82.     // 保存子表引用
    
83.     var testDetail;
    
84.     // grid detail provider
    
85.     var dpGrid = new wjGridDetail.FlexGridDetailProvider(gridDetail, {
    
86.         //
    
87.         // use animation when showing details
    
88.         isAnimated: true,
    
89.         //
    
90.         // limit height of detail rows
    
91.         maxHeight: 150,
    
92.         //
    
93.         // create detail cells for a given row
    
94.         createDetailCell: function (row) {
    
95.             var cell = document.createElement('div');
    
96.             testDetail = new wjGrid.FlexGrid(cell, {
    
97.                 headersVisibility: wjGrid.HeadersVisibility.Column,
    
98.                 isReadOnly: true,
    
99.                 autoGenerateColumns: false,
    
100.                 itemsSource: getProducts(row.dataItem.CategoryID),
     
101.                 columns: [
     
102.                     { header: 'ID', binding: 'ProductID' },
     
103.                     { header: 'Name', binding: 'ProductName' },
     
104.                     { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
     
105.                     { header: 'Unit Price', binding: 'UnitPrice' },
     
106.                     { header: 'Discontinued', binding: 'Discontinued' }
     
107.                 ]
     
108.             });
     
109.             return cell;
     
110.         }
     
111.     });
     
112. 
     
113.     document.getElementById("btn").addEventListener('click',()=>{
     
114.         // 只有展开子表时才能打印出数据来。
     
115.         console.log(testDetail);
     
116.     });
     
117.     //
     
118. }
     

复制代码

测试地址：
https://www.grapecity.com/wijmo/ ... s(RowDetail)/purejs

所以请debug检查createDetailCell中的逻辑执行是否正确，加载数据是否成功。