主从表的从表数据是异步获取的时候，从表无法渲染显示，要如何设置？
主从表的从表数据是异步获取的时候，从表无法渲染显示，要如何设置？（非异步数据是可以显示的， 异步获取数据则无法展开， 查看代码， 没有看到从表的内容行，只有表头）
您好，通过您的描述，我无法定位并重现这个问题，想了解您采用的是分离主从表还是内嵌主从表？具体怎么修改数据和刷新UI的呢？建议您可以提供一个能重现问题的Demo，或者在官网示例上重现这个问题~
主从分离表：https://demo.grapecity.com.cn/wijmo/demos/Grid/Master-Detail/SeparateGrids/purejs
主从内嵌表：https://demo.grapecity.com.cn/wijmo/demos/Grid/Master-Detail/NestedGrids(RowDetail)/purejs 是内嵌主从表，当点击主表行的“+”号 试图展开从表时，
当从表数据是异步数据时， 就无法展开， 控件没有反应， 也没有报错 您好，内嵌主从表中，从表是随展开操作实时加载的，也就是说只有当点击展开时，才会创建、加载从表的对象和数据，如以下代码所示：
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjOdata from '@grapecity/wijmo.odata';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjGridDetail from '@grapecity/wijmo.grid.detail';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// get OData categories and products
var url = 'https://services.odata.org/Northwind/Northwind.svc';
var categories = new wjOdata.ODataCollectionView(url, 'Categories', {
fields: ['CategoryID', 'CategoryName', 'Description']
});
var products = new wjOdata.ODataCollectionView(url, 'Products');
//
// shared column definitions
var categoryColumns = [
{ binding: 'CategoryName', header: 'Category Name', width: '*' },
{ binding: 'Description', header: 'Description', width: '2*' }
];
//
// get products for a given category
function getProducts(categoryID) {
var arr = [];
products.items.forEach(function (product) {
if (product.CategoryID == categoryID) {
arr.push(product);
}
});
return arr;
}
//
// grid with HTML detail
var htmlDetail = new wjGrid.FlexGrid('#htmlDetail', {
autoGenerateColumns: false,
columns: categoryColumns,
itemsSource: categories,
isReadOnly: true
});
//
// html detail provider
var dpHtml = new wjGridDetail.FlexGridDetailProvider(htmlDetail, {
//
// use animation when showing details
isAnimated: true,
//
// create detail cells for a given row
createDetailCell: function (row) {
//
// build detail content for the current category
var cat = row.dataItem;
var prods = getProducts(cat.CategoryID);
var html = 'ID: <b>' + cat.CategoryID + '</b><br/>';
html += 'Name: <b>' + cat.CategoryName + '</b><br/>';
html += 'Description: <b>' + cat.Description + '</b><br/>';
html += 'Products: <b>' + prods.length + ' items</b><br/>';
html += '<ol>';
prods.forEach(function (product) {
html += '<li>' + product.ProductName + '</li>';
});
html += '</ol>';
//
// create and return detail cell
var cell = document.createElement('div');
cell.innerHTML = html;
return cell;
}
});
//
// grid with grid detail
var gridDetail = new wjGrid.FlexGrid('#gridDetail', {
autoGenerateColumns: false,
columns: categoryColumns,
itemsSource: categories,
isReadOnly: true
});
//
// 保存子表引用
var testDetail;
// grid detail provider
var dpGrid = new wjGridDetail.FlexGridDetailProvider(gridDetail, {
//
// use animation when showing details
isAnimated: true,
//
// limit height of detail rows
maxHeight: 150,
//
// create detail cells for a given row
createDetailCell: function (row) {
var cell = document.createElement('div');
testDetail = new wjGrid.FlexGrid(cell, {
headersVisibility: wjGrid.HeadersVisibility.Column,
isReadOnly: true,
autoGenerateColumns: false,
itemsSource: getProducts(row.dataItem.CategoryID),
columns: [
{ header: 'ID', binding: 'ProductID' },
{ header: 'Name', binding: 'ProductName' },
{ header: 'Qty/Unit', binding: 'QuantityPerUnit' },
{ header: 'Unit Price', binding: 'UnitPrice' },
{ header: 'Discontinued', binding: 'Discontinued' }
]
});
return cell;
}
});
document.getElementById("btn").addEventListener('click',()=>{
// 只有展开子表时才能打印出数据来。
console.log(testDetail);
});
//
}
测试地址：
https://www.grapecity.com/wijmo/demos/Grid/Master-Detail/NestedGrids(RowDetail)/purejs
所以请debug检查createDetailCell中的逻辑执行是否正确，加载数据是否成功。
页:
[1]