How to re-arrange the custom toolbar items in front position of Tree Grid toolbar list?

let treegridObj: TreeGrid = new TreeGrid(
    {
        dataSource: sampleData,
        allowFiltering: true,
        editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, mode: 'Cell', newRowPosition: 'Below' }, toolbar: ['Add', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll', { text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter' }],
        toolbarClick: (args: ClickEventArgs) => {
            if (args.item.id === 'toolbarfilter') {
                treegridObj.filterByColumn('taskName', 'startswith', 'Testing');
            }
        },
        childMapping: 'subtasks',
        allowPaging: true,
        treeColumnIndex: 1,
        created: function () {
            let items =  treegridObj.toolbarModule.getToolbar().children[0]; // get the toolbar items.
            for (let i = 1; i < items.childNodes.length; i++) {
                items.insertBefore(items.childNodes[i], items.firstChild); // re-arrange the toolbar items position
            }
        },
        columns: [
            { field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right', width: 90 },
            { field: 'taskName', headerText: 'Task Name', width: 130 },
            { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', format: 'yMd' },
        ]
    });
treegridObj.appendTo('#TreeGrid');