Grid Command Column custom command with onClick event

[Ivan Petrov]

Hello,

I'm trying to add an onClick event when clicking on a custom command. So far I managed to display the custom command but when clicking on the icon the event is not fired. The code is:

@{

    List<object> commands = new List<object>();

    commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } });

    commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } });

    commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } });

    commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } });

    commands.Add(new {click="PrintSomething", type = "My Custom Action", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } });

}

<EjsGrid id="Grid" DataSource="@gridData">

    <GridEditSettings allowAdding="true" allowEditing="true" allowDeleting="true" Mode="@EditMode.Dialog"></GridEditSettings>

    <GridColumns>

        <GridColumn ref=@col Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>

        <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="yMd" TextAlign="@TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="@TextAlign.Right" MinWidth="10" Width="120" MaxWidth="200"></GridColumn>

        <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>

        <GridColumn HeaderText="Manage Records" Width="120" Commands=commands></GridColumn>

    </GridColumns>

</EjsGrid>

[Rahul Narayanasamy]

Hi Ivan, 

 

Greetings from Syncfusion. 

 

We have validated the bug that you have initiated with us and we considered and logged “need to provide support for custom command button click event while using blazor” as a bug. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming June 19, 2019 patch release. Until then we appreciate your patience. 

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

  

https://www.syncfusion.com/feedback/6701/need-to-provide-support-for-custom-command-button-click-event-while-using-blazor  

Regards, 

Rahul 

[Support]

Are there samples of how to do this in C# without the use of the command list approach?

I get errors like: Cannot convert lambda expression to type 'EventCallback<object>' because it is not a delegate type.

                    <GridCommandColumns>

                        <GridCommandColumn Type="CommandButtonType.None" Title="abc" 

                                           ButtonOption="@(new CommandButtonOptions()

                                                           {

                                                               IconCss = "remove-image-icon icon-image",

                                                               Click = (item => Xyz(item))

                                                           })" />                        

                    </GridCommandColumns>

[Renjith Singh Rajendran]

Hi Patrick, 

Thanks for contacting Syncfusion support. 

We suggest you to use the “CommandClicked” event of Grid. We have provided support to trigger “CommandClicked” when the command button in Grid is clicked. The event’s handler will have arguments, based on the clicked button.  

Documentation : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CommandClicked  

Please use the code below, 

 

<EjsGrid @ref="GridInstance" TValue="Order" AllowPaging="true" DataSource="@Orders"> 

    <GridEvents CommandClicked="CommandClickHandler" TValue="Order"></GridEvents> 

    <GridColumns> 

        <GridColumn HeaderText="Navigation" Width="120"> 

            <GridCommandColumns> 

                <GridCommandColumn Type="CommandButtonType.None" Title="abc" 

                                   ButtonOption="@(new CommandButtonOptions() 

                                                           { 

                                                               IconCss = "remove-image-icon-icon-image", Content="customcommand" 

                                                           })" /> 

            </GridCommandColumns> 

        </GridColumn> 

        ... 

   </GridColumns> 

</EjsGrid> 

 

 

@code{ 

    ... 

   public void CommandClickHandler(CommandClickEventArgs<Order> args) 

    { 

        //Perform your custom command button click operation here. And also with the value in “args” you can differentiate the buttons, if having multiple custom command buttons. 

    } 

 

} 

We have also prepared a sample based on this. Please download the sample form the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1643661079 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.