Angular中Syncfusion Child Grid使用GridModel时如何将工具栏移至底部

你可以通过在GridModel中绑定dataBound事件的方式实现子网格工具栏移到底部，无需依赖Grid实例，适配声明式配置场景，修改后的完整代码如下：

let childGrid: GridModel = {
      dataSource: data,
      queryString: 'FId',
      columns: [
          { field: 'description', headerText: 'Description', textAlign: 'Left', width: '50%' },
          { field: 'qty', headerText: 'Qtà', editType:'numericedit',  textAlign: 'Left', width: 20 },
          { field: 'width', headerText: 'Lar', editType:'numericedit', textAlign: 'Left', width: 20 },
          { field: 'length', headerText: 'Lun', editType:'numericedit', textAlign: 'Left', width: 20 },
          { field: 'height', headerText: 'Alt', editType:'numericedit', textAlign: 'Left', width: 20 },
          { headerText:'', width:20, commands: [{ type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } },
                                                     { type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } },
                                                     { type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' } },
                                                     { type: 'Cancel', buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' }}]
          },          
      ],
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, newRowPosition: 'Bottom', showDeleteConfirmDialog: true},
      toolbar: ['Add'],
      allowRowDragAndDrop: true,
      // 新增dataBound事件处理逻辑
      dataBound: (args: any) => {
        const gridElement = args.element;
        const toolbarElement = gridElement.querySelector('.e-toolbar');
        // 跳过无工具栏或已经处理过的场景
        if (!toolbarElement || toolbarElement.classList.contains('e-toolbar-bottom')) {
          return;
        }
        toolbarElement.classList.add('e-toolbar-bottom');
        const gridContent = gridElement.querySelector('.e-gridcontent');
        // 将工具栏移动到内容区域下方
        gridElement.insertBefore(toolbarElement, gridContent.nextSibling);
      }
};

如果需要调整工具栏底部展示的边框样式，可添加以下CSS优化显示效果：

.e-grid .e-toolbar.e-toolbar-bottom {
  border-top: 1px solid #e0e0e0;
  border-bottom: none;
  margin-top: -1px;
}

内容的提问来源于stack exchange，提问作者20.miles