Grid Toolbar: Is it possible to combine standard buttons with Custom Inputs without RenderFragment?

Question

I note your documentation for adding custom input controls to GridToolbar, using <SfToolBar><ToolBarItems>:

https://blazor.syncfusion.com/documentation/datagrid/tool-bar#custom-toolbar-with-dropdown-list

This is great, but does NOT provide for combining these custom input controls with the standard ones (very common requirement!).

Separately you have documented how to add the standard buttons by either assigning string[], or List<ItemModel> to ToolBarItems. In the forum post:

https://www.syncfusion.com/forums/160344/trying-add-custom-component-grid-toolbar-with-a-template

you show combining these two outcomes, via a fairly "back door" approach by assigning a RenderFragment to the Template in the List<ItemModel> approach.

In this example:

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

you show providing access to the standard buttons in the List<ItemModel> approach by assigning of a specific {SfGrid ID}_add Id in the List<ItemModel>, but of course this still requires "back door" RenderFragment approach.

Question is:

Isn't it possible to just use the documented GridTemplate approach:

https://blazor.syncfusion.com/documentation/datagrid/tool-bar#custom-toolbar-with-dropdown-list

to provide for both standard AND custom input controls? Is there someway of creating a standard button, e.g. Add, using <SfToolBar><ToolBarItems> approach?

Rahul Narayanasamy · Answer

Hi Phil,Greetings from Syncfusion.Query: to provide for both standard AND custom input controls? Is there someway of creating a standard button, e.g. Add, using approach?We suspect that you want to use default standard toolbar items while using the SfToolbar approach. Normally the SfToolbar approach is used for adding the custom toolbar items in the toolbar. If you want to use default grid toolbar items along with this approach, then you can use default those default items in a custom way and call the corresponding actions using Grid methods while clicking the items. Find the below code snippets and sample for your reference. . . . @code{ SfGrid Grid; .. . public async Task AddClick(ClickEventArgs args) { await Grid.AddRecordAsync(); } public async Task EditClick(ClickEventArgs args) { await Grid.StartEditAsync(); } public async Task DeleteClick(ClickEventArgs args) { await Grid.DeleteRecordAsync(); } public async Task UpdateClick(ClickEventArgs args) { await Grid.EndEditAsync(); } public async Task CancelClick(ClickEventArgs args) { await Grid.CloseEditAsync(); } } Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-383879027 If it is not your case, then could you please share more details about your requirement.Please let us know if you have any concerns.Regards,Rahul

Phil Holmes · Answer

Thanks Rahul,I expect you already know that approach mostly works, but still wouldn't provide auto-enable/disable that the standard buttons provide, and is still a workaround.What I was really seeking is, as is implied in the following documentation:https://blazor.syncfusion.com/documentation/datagrid/tool-bar#customize-toolbar-text which customises toolbartext on standard buttons, using the new ItemModel() approach. This example code implies that if you give the ItemModel.Id as the [SfGrid ID]_add, then the instantiation will create it with all the functionality of an Add Button.1) I'm not sure this actually works anyway as is documented/implied,2) Either way, it would be great if this logic also worked using ToolBarItems.Please advise.Regards,Phil

Rahul Narayanasamy · Answer

Hi Phil,Thanks for the update.If you want to add custom toolbar items along with default
toolbar items, then you can achieve your requirement by using either of the
below ways.Reference:Using Toolbar item with RenderFragment  -https://www.syncfusion.com/kb/12475/blazor-grid-render-custom-controls-along-with-default-toolbar-items
Using Custom toolbar(using SfToolbar) - https://blazor.syncfusion.com/documentation/datagrid/tool-bar#custom-toolbarIf you are still facing difficulties in achieving your
requirement, then could you please share more details about your requirement?
 Whether did you want to
     use default toolbar items with custom controls in the toolbar?
 Exact requirement.
Regards,Rahul

Phil Holmes · Answer

Hi Rahul,While your response is a correct statement of fact, I'm not sure how/if it was intended to answer my question. We had already established that there a a couple of different ways of doing this, and the RenderFragment way provides for more advanced controls, and the SfToolbar way provides for the standard controls.I asked if there is a way to do both, as that is surely a normal/common requirement, and your answer seems to be:"You can do one, or you can do the other". That doesn't answer my question, unless your answer is actually "no, we don't provide for both advanced controls and standard controls in same toolbar."Is that your answer?Regards,Phil

Vignesh Natarajan · Answer

Hi Phil,Sorry for the inconvenience caused. No, we do not have direct support to achieve your requirement
of rendering custom components in the Grid toolbar along with default toolbar
items without using RenderFragment. So we request you to achieve your
requirement using anyone of the suggestion provided in the previous update. 
 https://www.syncfusion.com/kb/12475/blazor-grid-render-custom-controls-along-with-default-toolbar-items
     - using ToolbarItem model and RenderFragment. 
 Or
     using Toolbar template to render button and input component and handle the
     default actions externally on Toolbar click event. Refer to the below response.  http://www.syncfusion.com/forums/174376/grid-toolbar-is-it-possible-to-combine-standard-buttons-with-custom-inputs-without?reply=Sg3Rwh   
Please get back to us if you have further queries. Regards,Vignesh Natarajan