We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Command Column custom command with onClick event

Thread ID:

Created:

Updated:

Platform:

Replies:

145013 Jun 1,2019 06:09 PM UTC Oct 21,2019 10:55 AM UTC Blazor 3
loading
Tags: Grid
Ivan Petrov
Asked On June 1, 2019 06:09 PM UTC

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 [Syncfusion]
Replied On June 3, 2019 02:09 PM UTC

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.  
  

Regards, 
Rahul 


Support
Replied On October 18, 2019 11:10 PM UTC

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 [Syncfusion]
Replied On October 21, 2019 10:55 AM UTC

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.  

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, 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon