Syncfusion 网格，底部移动工具栏 (Angular)

Question

我可以在子网格中将工具栏的默认位置从顶部更改为底部吗？

我找到这个：https://ej2.syncfusion.com/documentation/grid/tool-bar/#add-toolbar-at-the-bottom-of-grid

但它适用于 Javascript 并且我的 childGrid 不是 Grid，而是 GridModel：

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,
    }; ```

Thanks

Answer 1

可以通过父Grid的detailDataBound事件（初始父行展开动作触发）实现子Grid toolbar元素从上到下改变默认位置的需求。在这种情况下，子 Grid 元素将作为事件参数返回，工具栏位置可以通过该参数更改。

下面的代码片段对此进行了演示，

// Parent Grid’s detailDataBound event handler
detailDataBound(args) {
  // Current expanded child Grid element is retrieved
  let childGridEle = args.detailElement.querySelector('.e-grid');
  // Child Grid’s toolbar element is retrieved
  let toolbarEle = childGridEle.querySelector('.e-toolbar');
  // The toolbar element is appended as the last child of the child Grid
  childGridEle.appendChild(toolbarEle)
}

请检查以下示例准备的示例，供您参考，

示例： https://stackblitz.com/edit/angular-xevhjk?file=app.component.ts

Syncfusion 网格，底部移动工具栏 (Angular)

Syncfusion Grid, Move toolbar on bottom (Angular)

grid

toolbar

syncfusion

angular