[Question] Cutomized Dialog for Toolbar in Grid

[Dana]

Is it possible to customize a dialog box for toolbar under Grid? If yes, how can this be done?

[Madhu Sudhanan P]

Hi Dana, 

Thanks for contacting Syncfusion support. 

From the query we understood that you want to customize the edit dialog box of the grid, if so please go through the below link to achieve it. If we misunderstood your requirement, then please share more information to provide solution as earlier as possible. 

https://ej2.syncfusion.com/angular/documentation/grid/how-to/customize-the-edit-dialog/ 

Regards, 

Madhu Sudhanan P 

[Dana]

It is close to what I initially pictured, but I was wondering if the contents of the "edit" for the dialog box could be customized, such as this for an example (look at the zip file for the picture attached).

In order words, is it possible to launch a dialog box and present data that is indirectly related to the underlined row?

[Madhu Sudhanan P]

Hi Dana, 

Thanks for the update. 

We understood that you want to show fields in the edit dialog which are not present in the grid. If this is the requirement then we  suggest you to use the dialog template feature of the grid. Please find the demo and documentation from the below links. 

https://ej2.syncfusion.com/angular/demos/#/material/grid/dialog-reactive-form 

https://ej2.syncfusion.com/angular/documentation/grid/edit/#forms 

If we misunderstood your requirement please correct us and also we didn’t find any attachment in your last update, please provide us the attachment for further analysis. 

Regards, 

Madhu Sudhanan P 

[Dana]

Is there a way to combine the two different headerText columns together? I've checked your documentation to find any answers, but sadly there is a stacked column which is not what I am looking for.

[Madhu Sudhanan P]

Hi Dana, 

From the query we understood that you want to merge header cells, you can achieve this using the headerCellInfo event as follows. 

<ejs-grid ... (headerCellInfo)='headerCellInfoEvent($event)'> 

    ... 

</ejs-grid> 

export class ColumnSpanningComponent implements OnInit { 

    .... 

    public headerCellInfoEvent(args: HeaderCellInfoEventArgs) { 

        if (args.cell.column.field === 'EmployeeID') { 

            args.node.colSpan = 2; 

        } 

        if (args.cell.column.field === 'EmployeeName') { 

            args.node.classList.add('e-hide'); 

        } 

    }; 

    .... 

} 

https://stackblitz.com/edit/header-cell-merge?file=index.html 

https://ej2.syncfusion.com/angular/documentation/api/grid/#headercellinfo 

If we misunderstood your requirement please correct us with screenshot of your requirement. 

Regards, 

Madhu Sudhanan P 

[Dana]

It works, however, I would not be able to compile the project for production.

[Madhu Sudhanan P]

Hi Dana, 

Please type case as below to resolve this problem. 

 

Regards, 

Madhu Sudhanan P