ICommand implementation on tapping directly to toolbaritem request

Question

Hy,

I would really like to use sftoolbar in my .net MAUI App because I can also associate it directly to a contentview. Unfortunately I saw that unlike the .NET MAUI toolbar, the Syncfusion sftoolbar does not implement the Command parameter and the related CommandParameter at the toolbaritem level. Do you plan to do so soon?

Sri Radhesh Nag Subash Sankar · Answer

Hi Rolando,To
better understand and assist you with your scenario, could you please clarify
your exact requirement regarding the use of the CommandParameter in the SfToolbar?
Are you looking to use CommandParameter support exclusively for tap actions
on toolbar items?Or
do you have additional use cases where CommandParameter needs to be passed?Understanding
your use case will help us provide the most appropriate and effective solution.Regards,Sri
Radhesh Nag S

Rolando Tonin · Answer

Hy

Sri Radhesh Nag S,in my .NET MAUI App I often having to deal with situations of Data Master-Details with multiple nested levels. I would like to be able to provide a ContentView for each level with, for example, a SfListView preceded by a dedicated sfToolbar. The sfTollbar will contain the toolbarItems (image buttons) for the CRUD Data Management (for example Add, Edit, Delete, Refresh). A ViewModel (MVVM) is associated with the ContentView and when the user select a row (Element) of the sfListView, the Edit and Delete buttons (sfToolbarItem) must be activated (e.g. from ViewModel return value (boolean) of Method CanEditItem(T selectedItem), where T changes depending on the type of element belonging to the sfListView and when the user taps on the button the ViewModel method is called, for example, EditItem(T selectedElement), in line with the normal procedures provided by the MVVM pattern. I eould to use the CommandParameter associated with the TollbarItem to pass the selected element to these two methods of the ViewModel.for the moment I Bind IsEnabled property of each sfToolbarItem with a specific boolean property of my ViewModel and it may changes when SelectedItem of SfListView Changes. I alaso handle sfToolbar Tapped event in code behind of each ContentView as follows:
private void HorizontalToolbar_Tapped(object sender, Syncfusion.Maui.Toolbar.ToolbarTappedEventArgs e){    if(this.BindingContext is not null && this.BindingContext is IAttributoElencoListViewModel vm)    {        switch (e.NewToolbarItem.Name)        {            ...            case "Edit":                vm.EditItemCommand.Execute(vm.SelectedItem);                break;                   }    }}I hope I managed to explain myself

Hadayarahman Mohamed Khan Yusuf · Answer

Hi Rolando,
Regarding “ICommand implementation on tapping directly to toolbar
item”:Based on the details shared we have analyzed the query.
If we want list view selected item on toolbar item tapped command, we can
achieve this by binding list view selected item into an view model property and
can access this property on toolbar tapped command at the time of execution. we
have achieved this with the sample attached for the reference. Please let us
know if you need further assistance. As always, we are happy to help you out.Regards,Hadaya Rahaman MAttachment: ToolbarUsecase_b3bf9fa5.zip

Rolando Tonin · Answer

Hy Yusuf,

I examined the solution you sent me. Unfortunately the ViewModel.cs you used is strictly connected to the View. In fact the TappedCommand has ToolbarTappedEventArgs as an argument and it forces me to put the viewmodel in the same project as the view or create a viewmodel project specifically for maui so that it can link the appropriate syncfusion library (dll). Instead my ViewModel is not strictly connected to the View but independent as it must work with a Page in Blazor, a UserControl in WPF and precisely with a View/Page in MAUI.I have a single viewmodel project that work fine with Blazor View, WPF UserControl e MAUI page. I understand that the current MAUI toolbar allows you to manage the TappedCommand but I would need a direct command on the tap of each toolbarItem so that in my ViewModel I can write, using Communityt MVVM something like this, for example tapped on editItem icon:[RelayCommand(CanExecute = nameof(CanEditItem))]
public virtual async Task EditItemAsync(TT itm)
{
...
}
where TT is the type of object selected in a Grid or ListView (Master details). This approach already works fine with Blzor, WPF and the standard MAUI toolbar but as I told you in my first note, if I use standard toolbar approach I can have only one standard toolbar per page while I need to have multiple toolbars within the same page (nested master/Details data).
I hope I managed to explain myself.

Best Regards,Rolando

Hadayarahman Mohamed Khan Yusuf · Answer

Hi Rolando,Thank you once again for the detailed explanation. We
understand your requirement clearly, especially that your ViewModel is
shared across platforms and that the current TappedCommand does not
fully meet your needs.Since the selected item in your ViewModel is
always two-way bound, using a command parameter is optional because you
can directly access the selected item within your ViewModel.We have created a sample with a Behavior added to
trigger the toolbar Tapped event, which executes the toolbar tapped
action. This also allows you to access both the previous and new toolbar item
details within the tapped event.Could you please confirm if using the selected item
property directly instead of passing a command parameter works for your
scenario? If not, or if you have any other specific requirements or additional
details you'd like to share, please let us know so we can better assist you.Regards,Hadaya Rahman MAttachment: ToolbarSample_95e8b1b1.zip

Rolando Tonin · Answer

Hy Hadaia,

I examined the solution you sent me but it does not solve my problem. Perhaps the way to achieve I think that the goal is to derive a class from SfToolbarItem that has 2 BindableProperty: Command (type ICommand) and CommandParameter (type object). Using your behavior I hook the viewmodel and depending on these two properties and with the help of reflection I should be able to retrieve the corresponding command from the ViewModel and call it.For the momenti I continue to use a code-behind like this:private void HorizontalToolbar_Tapped(object sender, Syncfusion.Maui.Toolbar.ToolbarTappedEventArgs e){    if(this.BindingContext is not null && this.BindingContext is ICommessaPsetListViewModel vm)    {        switch (e.NewToolbarItem?.Name)        {            case "Add":                vm.AddItemCommand.Execute(vm.SelectedItem);                break;            case "Edit":                vm.EditItemCommand.Execute(vm.SelectedItem);                break;            case "Delete":                vm.RemoveItemCommand.Execute(vm.SelectedItem);                break;        }    }}Best RegardsRolando Tonin

Arul Jenith Berkmans · Answer

Hi Rolando Tonin, Thanks for the
clarification and for sharing your approach. Yes, this is also a valid way to
achieve the functionality—deriving from SfToolbarItem with Command and
CommandParameter as bindable properties, and using a behavior to connect to the
ViewModel via reflection.We appreciate you
sharing this solution. Regards,Arul Jenith B.