How to control Grid with sfButton

How to control Grid with sfButton I am trying to implement CRUD of Grid with sfButton. The buttons are in order: 'Search', 'Add', 'Save', 'Delete', and 'Reset'. I want to process the event of the Grid's Toolbar button in the button above. What should I do?

image_4.png


3 Replies

PS Prathap Senthil Syncfusion Team March 20, 2024 10:48 AM UTC

Hi junghwi,

Based on your requirements for controlling the toolbar buttons, we suggest using the OnToolbarClick event to achieve your goal. Please refer to this documentation and code snippet for assistance.

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

    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="Order"></GridEvents>

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

</SfGrid>

 

@code {

 

    public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        // Here, you can customize your code.

    }

}


Regards,
Prathap S



JU junghwi replied to Prathap Senthil March 23, 2024 05:57 AM UTC

I understand that the OnToolbarClick event is the button event of the tool included in the grid.


I would like to use CRUD programmatically to have that functionality in a separate button component.


If you have any such cases, please let us know.


Also, what are the settings for editing a cell with a single click instead of a double click, and how do I make the editing state automatically end when the focus changes from the grid to another component?



PS Prathap Senthil Syncfusion Team March 25, 2024 12:49 PM UTC

Regarding your query about performing CRUD operations programmatically, we have already documented this scenario. Kindly refer to the documentation for your reference. And, regarding the query about editing a cell with a single click instead of a double click, this scenario has also been documented. Please refer to this documentation for your reference.

By default, in the grid, you need to click the 'Cancel' toolbar button to exit the edit state. However, if you want to automatically close the edit state in the grid, we suggest using the CloseEditAsync() method. Kindly refer to this API link for more information.


Loader.
Up arrow icon