Mixed custom and default toolbar

[Franz Mörike]

Hi, i'm trying to use a mix between custom and default toolbar items, my code is like this:

                <GridColumns>

                    <GridColumn Field="Id" HeaderText="ID" Width="100" IsPrimaryKey="true" TextAlign="TextAlign.Center" AllowEditing="false"></GridColumn>

                    <GridColumn Field="Calories" HeaderText="Calories" Width="100" IsIdentity="true" TextAlign="TextAlign.Center" AllowEditing="false"></GridColumn>

                    <GridColumn Field="Carbs" HeaderText="Carbs" Width="100" TextAlign="TextAlign.Center" EditType="EditType.NumericEdit"

                    ValidationRules="@(new ValidationRules { Required = true, Min = 0, Max = 1000 })">

                    </GridColumn>

                    <GridColumn Field="Protein" HeaderText="Protein" Width="100" TextAlign="TextAlign.Center" EditType="EditType.NumericEdit"

                    ValidationRules="@(new ValidationRules { Required = true, Min = 0, Max = 1000 })">

                    </GridColumn>

                    <GridColumn Field="Fat" HeaderText="Fat" Width="100" TextAlign="TextAlign.Center" EditType="EditType.NumericEdit"

                    ValidationRules="@(new ValidationRules { Required = true, Min = 0, Max = 800 })">

                    </GridColumn>

                </GridColumns>

Now i thought i can catch clicking the "Save" button like this:  

   

private void OnToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args){ 

    // Check the Text property of the clicked item if (args.Item.Text == "Save") { 

   logger.LogDebug("Save button clicked");         

         SaveChangesAsync(); 

     } 

 } 

However this never is reached when clicking the button in the application. 

1. Is it even possible to use a mixed Toolbar like this while maintaining functionality? 

2. How can i catch the click on "Save" properly? 

3. How would i add aditional functionality to the other, default toolbar items?

[Sanjay Kumar Suresh]

Hi Franz,

Greetings from Syncfusion,

1. Is it even possible to use a mixed Toolbar like this while maintaining functionality?

Yes, it is possible to use a combination of both the built-in and custom toolbars simultaneously. We have documented a sample for this scenario under the toolbar section. Please refer to the link below for more details.

https://blazor.syncfusion.com/documentation/datagrid/toolbar-items#both-built-in-and-custom-items-in-toolbar

2. How can I catch the click on "Save" properly?

Solution 1:

To handle scenarios when saving a record, we recommend using the RowUpdating event. This event is triggered before the edited or newly added data is saved in the grid.

Code Snippet:

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>

    <GridEvents RowUpdating="RowUpdatingHandler" TValue="Order"></GridEvents>

…

@code{

…

    public void RowUpdatingHandler(RowUpdatingEventArgs<Order> args)

    {

        // Here, you can customize your code.

    }

 

}

 

For more details about the RowUpdating event, please refer to the documentation linked below.

https://blazor.syncfusion.com/documentation/datagrid/events#rowupdating

Solution 2:

To handle the click event on the save toolbar item, note that the default toolbar item name is 'Update,' and the args.Item.Text will be 'Update'. To handle this, modify the condition as shown below.

public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

{

     if (args.Item.Text == "SelectRow")

     {

         //You can customize your code here.

         await Grid.SelectRowAsync(0);

     }

 

     if (args.Item.Text == "Update")

     {

         //You can customize your code here.

 

     }

}

3. How would I add additional functionality to the other, default toolbar items?

You can add additional functionalities to your custom toolbar items using the Grid API methods. In the attached sample, we have included a 'Select Row' button on the toolbar, which performs the row selection when the respective toolbar item is clicked.

Refer to the example below for more information on adding additional functionalities:

https://blazor.syncfusion.com/documentation/datagrid/toolbar-items#custom-toolbar-items

We have prepared a simple sample that includes both custom and built-in toolbar items, with added functionality for selecting a row in toolbar click. Please refer to the playground sample linked below for more information.

https://blazorplayground.syncfusion.com/embed/BZLzsBWEzxdkJGul?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,

Sanjay Kumar Suresh

[Franz Mörike]

Wow, thank you SO MUCH for that thorough explanation! I'll head right to implementing this. :)

Also i knew Update was responsible for saving data to the grid, i just need a seperate function that applies the changes to the database (which is afaik not handled by Syncfusions Update toolbar item).

[Sanjay Kumar Suresh]

Hi Franz,

Thanks for the update,

We would like to inform you that saving changes to the database must be handled manually within your application. While Syncfusion's Update toolbar item is responsible for saving changes to the Grid's data source, it does not directly handle database persistence. You will need to implement your own logic to save these changes to the database.

For more details, please refer to the documentation linked below:

https://blazor.syncfusion.com/documentation/datagrid/connecting-to-database/microsoft-sql-server#handling-crud-operations-1

Regards,

Sanjay Kumar Suresh