Dropdown in Child Grid's Toolbar

Question

I have parent and child grid. Parent Grid has Start and End date. Based on which it populates Months in Child grid.

I want user to give option to choose Year in child grid's toolbar. So user can select year and all the columns in child grid will be visible for selected year, hiding the non selected year columns from child g. So user can focus on each year and update data.

How do i achieve this ? I am aware that there is an option toolbarTemplate. but unfortunately I did not find anything which will help me achieve this.

Please note that Start and End date in parent will be different for each record.

Rajapandi Ravi · Answer

Hi PDev, 

Greetings from Syncfusion support 

From your query we understand that you have StartDate and EndDate column in Parent Grid and in the ChildGrid toolbar template based on your year selection you like to change the visible of the columns. Based on your query we have prepared a sample and achieved your requirement by using detailDataBound event of Grid. Please refer the below code example and sample for more information. 






export class AppComponent { 
    public parentData: Object[]; 
    public childGrid: any; 
    public secondChildGrid: any; 

    detailDataBound(args: any) { //detaildataBound event of parent Grid// 
 
//while expanding the parent row here we can access the parent row data 
        var startdate = args.data.StartDate.getFullYear(); //getting startdate year 
        var enddate = args.data.EndDate.getFullYear();//getting enddate year 
        var arr = []; 
        for(var i = startdate; i <= enddate; i++) { 
            arr.push(i); here we generate the dropdown datasource between the year of start and end date 
        } 
        let dropDownListObject: DropDownList = new DropDownList({ 
            // set placeholder to DropDownList input element 
            placeholder: "Select a Year", 
            dataSource: arr, 
            value: arr[0], 
            change: this.onChange.bind(args) 
        }); 
        dropDownListObject.appendTo(args.childGrid.element.querySelector('#toolbar-template')); 
    } 

    onChange(args) { //change event of dropdown 
 
//here we have set visible the false for 0th and 2nd index column. You can hide your column based on your choosing year as you want 
        this.childGrid.columns[0].visible = false;  
        this.childGrid.columns[2].visible = false; 

        this.childGrid.refreshColumns();   //call this method for UI changes 
    } 


    ngOnInit(): void { 
        this.parentData =  DataUtil.parse.parseJson(JSON.stringify(employeeData.slice(0,1))) 
        this.childGrid = { 
            dataSource: orderDatas, 
            queryString: 'EmployeeID', 
            toolbarTemplate: '#toolbar-template', 
            allowPaging: true, 
            pageSettings: {pageSize: 6, pageCount: 5}, 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 
                { field: 'ShipCity', headerText: 'Ship City', width: 120 }, 
                { field: 'Freight', headerText: 'Freight', width: 120 }, 
                { field: 'ShipName', headerText: 'Ship Name', width: 150 } 
            ] 
        }; 
    } 
} 


Sample: https://stackblitz.com/edit/angular-ltnxed?file=app.component.ts 

Documentation: https://ej2.syncfusion.com/documentation/grid/tool-bar/#custom-toolbar 

                              https://ej2.syncfusion.com/angular/documentation/grid/columns/#showhide-columns-by-external-button 

API:                        https://ej2.syncfusion.com/angular/documentation/api/grid/#detaildatabound 
  
         

Regards, 
Rajapandi R

PDev · Answer

Thanks for the pointers but it did not work for me, may be because i already have a toolbar ? However, I tried using your method and added dropdown but it gave me weird result. Can you please help ?

As you can see instead of using template i have used class to append my dropdown.

let dropDownListObject: DropDownList = new DropDownList({
        // set placeholder to DropDownList input element
        placeholder: "Select a Year",
        dataSource: years,
        value: years[0],
        change: this.onChange.bind(args)
      });
      dropDownListObject.appendTo(args.childGrid.element.querySelector('.e-toolbar-center'));

Sujith Kumar Rajkumar · Answer

Hi Parth, 
 
From the shared information we could see that you have already used the toolbar on the child Grid and trying to render the custom year dropdown list there. So you can achieve this by following the below steps, 
 
Initially, render a custom item in the child grid toolbar with required id, 
 




this.childGrid = { 
    dataSource: orderDatas, 
    toolbar: ['Print', { text: 'Year', id: 'year' }], 
}; 
 
Then in the Grid’s detailDataBound event handler, access the custom toolbar item from the child Grid toolbar module using its id, create a div element and replace it with the custom toolbar button element, render the EJ2 Dropdownlist component with ‘change’ event bound to it and append it to the dynamically created input element. 
 




// Grid’s detailDataBound event handler 
detailDataBound(args) { 
    // The custom toolbar item element is retrieved using its id 
    var customItem = args.childGrid.toolbarModule.element.querySelector('#year'); 
    // An input element is created for appending the dropdownlist component 
    var divEle = document.createElement('div'); 
    // The input element is appended as a child to the custom toolbar item button’s parent 
    customItem.parentElement.append(divEle); 
    // The custom toolbar button element is removed 
    customItem.remove(); 
 
    var startdate = args.data.StartDate.getFullYear(); 
    var enddate = args.data.EndDate.getFullYear(); 
    var arr = []; 
    for (var i = startdate; i <= enddate; i++) { 
        arr.push(i); 
    } 
 
    // The EJ2 Dropdownlist component is initialized and appended on to the input element 
    let dropDownListObject: DropDownList = new DropDownList({ 
        // set placeholder to DropDownList input element 
        placeholder: "Select a Year", 
        dataSource: arr, 
        value: arr[0], 
        change: this.onChange.bind(args) 
    }); 
    dropDownListObject.appendTo(divEle); 
} 
 
Now in the dropdown list’s change event you can perform the required actions on the child Grid. 
 




// Dropdownlist’s change event handler 
onChange(args) { 
    // Current child Grid instance is retrieved 
    var childGrid = args.element.closest('.e-grid').ej2_instances[0]; 
    // Here the required actions can be performed on the child Grid and refreshed 
    childGrid.columns[0].visible = this.isState; 
    childGrid.columns[2].visible = this.isState; 
    childGrid.refreshColumns(); 
    this.isState = !this.isState; 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-1jjocb?file=app.component.ts 
 
More details on this can be checked in the below documentation links, 
 
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/#custom-toolbar-items 
                               https://ej2.syncfusion.com/documentation/drop-down-list/getting-started/ 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R

PDev · Answer

We are nearly there. If you notice in your example we have to click dropdown 2 times in order to select value. first time we select it does not select value, second time when we select. it works as expected.

Can you please help.

Rajapandi Ravi · Answer

Hi PDev, 

Thanks for the update 

We have checked your reported problem and we are also able to reproduce the problem at our end. To overcome the problem, We suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. 





 
export class AppComponent { 
 
    ngOnInit(): void {  
        this.parentData =  DataUtil.parse.parseJson(JSON.stringify(employeeData)) 
        this.childGrid = { 
            toolbar: ['Print', { template: "<input id='lname'>" }], 
            pageSettings: {pageSize: 6, pageCount: 5}, 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', 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 startdate = args.data.StartDate.getFullYear(); 
        var enddate = args.data.EndDate.getFullYear(); 
        var arr = []; 
        for(var i = startdate; i <= enddate; i++) { 
            arr.push(i); 
        } 
        //The EJ2 Dropdownlist component is initialized and appended on to the input element 
        let dropDownListObject: DropDownList = new DropDownList({ 
            // set placeholder to DropDownList input element 
            placeholder: "Select a Year", 
            dataSource: arr, 
            value: arr[0], 
            change: this.onChange.bind(args) 
        }); 
        dropDownListObject.appendTo("#lname"); 
    } 
} 
 

Sample: https://stackblitz.com/edit/angular-1jjocb-gvinps?file=app.component.ts 

Regards, 
Rajapandi R