Second Clarification in Grid

[KINS]

I have an second clarification in sfgrid.

1.How to add sfbutton in Grid Header.

( already we have edit and delete button in grid cell.I would like to add new button on Header  grid  in last /first column)

2.How to use Custom Title with bold font on Modal Dialogue mode in grid.

3.Is it possible to add Editor in grid based on condition

For example.

If the first column value is 1 (any row in grid),then column editor type is combobox in second column

If the first column value is 2 ( any row in grid),then column editor type is Textbox

If  the first column value is 3 ( any row in grid ),then

Column editor type is date control

[Jeevakanth Palaniappan]

Hi Hassan, 

 

Greetings from Syncfusion support. 

 

Please find the details for your queries as below, 

 

1. How to add sfbutton in Grid Header.

 

You can customize the grid header by using the HeaderTemplate inside the GridColumn.  Please refer the below documentation for your reference. 

https://blazor.syncfusion.com/documentation/datagrid/columns/#header-template 

https://blazor.syncfusion.com/documentation/button/getting-started/ 

 

2. How to use Custom Title with bold font on Modal Dialogue mode in grid.

 

You can customize the title with html bold tag in dialog by using the HeaderTemplate inside the GridEditSettings component. 

https://blazor.syncfusion.com/documentation/datagrid/editing/#customize-the-edit-dialog 

https://www.w3schools.com/html/html_formatting.asp 

 

3. Is it possible to add Editor in grid based on condition

You can customize the edit form by using the EditTemplate inside the GridColumn. Inside EditTemplate, you will get the data of the corresponding record which you are editing. So based on the data, you can render the corresponding editor component. Please refer the below code snippet and the documentation for your reference. 

<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"> 

            <EditTemplate> 

                @{ 

                    var con = context as Order; 

                    @if (con.ShipCountry == "CHINA") 

                    { 

                        // Render Editor Component 1 

                    } 

                    else 

                    { 

                        //Render Editor Component 2 

                    } 

                } 

            </EditTemplate> 

        </GridColumn> 

 

https://blazor.syncfusion.com/documentation/datagrid/editing/#using-dropdownlist-in-edittemplate 

 

Please get back to us if you have any other queries. 

 

Regards, 

Jeevakanth SP. 

[KINS]

Thanks got it...

[Jeevakanth Palaniappan]

Hi Hassan, 

You are most welcome. Please get back to us if you have any other queries. 

Regards, 

Jeevakanth SP.