How to customize text displayed in grid toolbar for crud operations

[Nick Lazidis]

Hi

In the following code I want to customize "Add" , "Edit", "Update" text displayed in grid toolbar

div style="max-width:900px">

    <SfGrid DataSource="employeeData" AllowSorting="true" AllowPaging="true" AllowFiltering="true" AllowGrouping="true" Toolbar="@toolbar" >

        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>

        <GridPageSettings PageSize="5"></GridPageSettings>

        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

        <GridColumns>

            <GridColumn IsPrimaryKey="true" HeaderText="Κωδικός" Field="@nameof(EmployeeModel.Id)" Width="100px"></GridColumn>

            <GridColumn HeaderText="Όνομα" Field="@nameof(EmployeeModel.FirstName)"></GridColumn>

            <GridColumn HeaderText="Επίθετο" Field="@nameof(EmployeeModel.LastName)"></GridColumn>

            <GridColumn HeaderText="Θέση" Field="@nameof(EmployeeModel.JobTitle)" Width="100px"></GridColumn>

            <GridColumn HeaderText="Φύλο" Field="@nameof(EmployeeModel.Gender)"></GridColumn>

            <GridColumn HeaderText="Ημερ.Γέννησης" Field="@nameof(EmployeeModel.DateOfBirth)" Format="d"></GridColumn>

            <GridColumn HeaderText="Προιστάμενος" Field="@nameof(EmployeeModel.ReportToEmpId)" Width="200px"></GridColumn>

        </GridColumns>

    </SfGrid>

</div>

@code {

    private List<EmployeeModel>? employeeData = null;

    private List<object> toolbar = new List<object> { "Add", "Edit","Delete", "Update", "Cancel", "Search" };

}

When used as it is it works perfectly. If I replace

    private List<object> toolbar = new List<object> { "Add", "Edit","Delete", "Update", "Cancel", "Search" };

with the following :

    private List<object> toolbar = new List<object>() {

     new ItemModel(){ Text = "Add Record", PrefixIcon = "e-add", Id = "Grid_add"},

     new ItemModel(){ Text = "Edit Record", PrefixIcon= "e-edit", Id="Grid_edit"},

     new ItemModel(){ Text = "Delete Record", PrefixIcon= "e-delete", Id="Grid_delete"},

     new ItemModel(){ Text = "Update Record", PrefixIcon= "e-update", Id="Grid_update"},

     new ItemModel(){ Text = "Cancel", PrefixIcon= "e-cancel", Id="Grid_cancel"}

    };

pressing buttons  "Add Record" , "Edit Record" etc does not do anything.

Version of Blazor used is : 20.2.0.43

Thank you

[Naveen Palanivel]

Hi Nick,

Greetings from Syncfusion support

Query : “To customize text displayed in grid toolbar for crud operations”

We checked your query and we have already discussed about this  similar topics detailly in our UG documentation. Kindly refer the documentation link shared.

Reference :

https://blazor.syncfusion.com/documentation/datagrid/tool-bar#customize-toolbar-text

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel

[Nick Lazidis]

Thank you for your help.  I managed to solve it looking at your sample

[Naveen Palanivel]

Hi Nick,

Welcome

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel.