Move toolbar on bottom

[Fabio]

Hi,

Can I change the default position of the toolbar from the top to the bottom in a Child Grid?

I find this: https://ej2.syncfusion.com/documentation/grid/tool-bar/#add-toolbar-at-the-bottom-of-grid

but it is for Javascript and my childGrid is not a Grid, but a 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

[Ajith Govarthan]

Hi Fabio, 

Thanks for contacting Syncfusion support. 

Based on your query, you want to move the toolbar position from the top to bottom at the bottom of the child grid component. So, we have prepared sample in that we have used the detailDataBound to show the toolbar element at the bottom of the child grid component. For your convenience, we have attached the sample, please refer them for your reference. 

Code Example: 

App.component.ts 

this.childGrid = { 

      dataSource: orderDatas, 

      queryString: 'EmployeeID', 

      allowPaging: true, 

      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 

      editSettings: { 

        allowEditing: true, 

        allowDeleting: true, 

        allowAdding: true, 

        newRowPosition: 'Bottom', 

        showDeleteConfirmDialog: true, 

      }, 

      pageSettings: { pageSize: 6, pageCount: 5 }, 

      columns: [ 

        { 

          field: 'OrderID', 

          headerText: 'Order ID', 

          textAlign: 'Right', 

          isPrimaryKey: true, 

          width: 120, 

        }, 

        { field: 'ShipCity', headerText: 'Ship City', width: 120 }, 

        { field: 'Freight', headerText: 'Freight', width: 120 }, 

        { field: 'ShipName', headerText: 'Ship Name', width: 150 }, 

      ], 

    }; 

  } 

  detailDataBound(args) { 

    var toolbar = args.childGrid.element.querySelector('.e-toolbar'); 

    args.childGrid.element.appendChild(toolbar); 

  } 

Sample Link: https://stackblitz.com/edit/angular-hfk5uv?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.