How do you implement a custom toolbar function?

Question

HelloI can not speak English. So I use Google Translate.Even if the explanation is not natural, I hope for your patience.I don't like the alignment and localization of the default toolbar, so I'm making a custom toolbar.However, I ran into some problems.Question 1. I want to give focus to the second column after AddRecord method.(I use inline editing.)Question 2. How to cancel after AddRecord?(When canceled, the new row should be deleted.)Question 3. How can I get the changed value on save?Question 4. I call the procedure and store it in the database. I want to display a modal dialog when an error occurs in a procedure. What should I do?Any help to me would be appreciated.- My source code @code{ [Inject] IStringLocalizer Localizer { get; set; } SfGrid gvList; ReturnData gvListDataSource = new ReturnData(); protected override void OnInitialized() { gvListDataSource.C_RETURN1 = new List(); } async Task gvList_SearchClick() { gvListDataSource = await repository.GET_SEARCH(); } async Task gvList_NewClick() { SM11010.System system = new SM11010.System() { USE_FLAG = "Y" }; await this.gvList.AddRecord(system); await this.gvList.StartEdit(); // The function of question 1 is needed here. } async Task gvList_EditClick() { await this.gvList.StartEdit(); } async void gvList_CancelClick() { // The function of question 2 is needed here. } async Task gvList_SaveClick() { // The function of question 3 is needed here. // Error after calling stored procedure // The function of question 4 is needed here. } async Task gvList_ExcelClick() { await this.gvList.ExcelExport(); } public void OnActionBegin(ActionEventArgs args) { if (args.RequestType == Syncfusion.Blazor.Grids.Action.Add) { args.Cancel = true; } } public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { if (args.Item.Text == "Expand all") { } if (args.Item.Text == "Collapse all") { } if (args.Item.Id == "Collapse all") { } }}

Jeevakanth Palaniappan · Accepted Answer

Hi JaeHyeong,

Greetings from Syncfusion support.

We have validated your query and please find the below response for your queries. Also we found that you didn’t set IsPrimaryKey property in the GridColumn definition. To perform CRUD operation, it is must to define IsPrimaryKey for a column whose value is unique.

Editing Documentation - https://blazor.syncfusion.com/documentation/datagrid/editing/

Query 1: If you want the focus to be in the second column while adding then you can achieve it by using the edit template for that column. Then invoke the FocusIn method of textbox in its Created event. Please find the below code snippet and the reference sample which can be downloaded from the below link.

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorLatestVersion-1384751088

<SfGrid @ref="Grid" DataSource="@Orders">

..

<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150">

<EditTemplate>

<SfTextBox @ref="TextBox" ID="CustomerID" @bind-Value="@((context as Order).CustomerID)" Created="InputCreated">

</SfTextBox>

</EditTemplate>

</GridColumn>

..

</SfGrid>

@code{

SfTextBox TextBox { get; set; }

SfGrid<Order> Grid { get; set; }

private async Task AddHandler() {

var Record = new Order()

{

OrderID = 1,

CustomerID = "hai"

};

await Grid.AddRecord(Record);

await Grid.StartEdit();

}

private void InputCreated() {

TextBox.FocusIn();

}

Edit template Documentation - https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template

Also on analyzing your code, we found that you have invoked the Addrecord method with default value for one column. If you want this behavior then you can use the DefaultVaule property of GridColumn to achieve the same. So that you no need to invoke the StartEdit and you can simply invoke the AddRecord method without passing any arguments. Please find the below documentation link for DefaultValue property.

https://blazor.syncfusion.com/documentation/datagrid/editing/#default-column-values-on-adding-new-record

Query 2: We are not quite sure whether you want to cancel the add action while adding or to delete the added record after it gets saved in the datasource.

If you want to cancel the add action then it can be achieved by setting args.Cancel as true in the OnActionBegin event by its corresponding request type.
If you want to delete the added record after it gets saved in the datasource, then it can be achieved by using the DeleteRecord method of the grid. Please refer the below code snippet for your reference.

// Grid.DeleteRecord(string PrimryKeyFieldName, TValue Data)

await Grid.DeleteRecord("EmployeeID", (await Grid.GetCurrentViewRecords()).FirstOrDefault());

API Link - https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.SfGrid%601~DeleteRecord.html

Query 3: On saving the changed values, you can get the new data in the args.Data and the old data in args.PreviousData of OnActionBegin event with the request type as “Save”.

Query 4: When any error occurs in the grid, then OnActionFailure event of the grid will be triggered and you will get the corresponding error message in its argument. By using this you can show the error message in your modal dialog. Please refer the below documentation for your reference.

https://blazor.syncfusion.com/documentation/datagrid/getting-started/?no-cache=1#handling-exceptions

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

Please get back to us if you need further assistance.

Regards,

Jeevakanth SP.

JaeHyeong Jang · Answer

You are very kind.Thank you very much.It was a great help.

Jeevakanth Palaniappan · Answer

Hi JaeHyeong, 

Thanks for the update. Please get back to us if you need further assistance. 

Regards, 
Jeevakanth SP.