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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Handle click button on GridCommandColumn

Thread ID:

Created:

Updated:

Platform:

Replies:

151340 Feb 7,2020 08:34 AM UTC Feb 28,2020 03:35 AM UTC Blazor 5
loading
Tags: Grid
Stefano Capobianco
Asked On February 7, 2020 08:34 AM UTC

Hi, i've the following grid:

<EjsGrid TValue="Title" AllowPaging="true" Query="@GridQuery" Toolbar="@Tool" GridLines="GridLine.Both" EnableAltRow="true">
    <EjsDataManager Url="https://localhost:44319/Titles/Gets" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager>
    <GridSearchSettings Fields="@SpecificCols" IgnoreCase="true" Operator="Operator.Contains"></GridSearchSettings>
    <GridEvents CommandClicked="OnCommandClicked" TValue="Title"></GridEvents>
    <GridPageSettings PageSize="5" PageSizes="true"></GridPageSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Title.Id) HeaderText="Title Id" TextAlign="TextAlign.Center" Width="10" Visible="false"></GridColumn>
        <GridColumn Field=@nameof(Title.TitleAbbreviated) HeaderText="Abbreviazione" TextAlign="TextAlign.Center" Width="10"></GridColumn>
        <GridColumn Field=@nameof(Title.TitleName) HeaderText="Titolo" TextAlign="TextAlign.Center" Width="10" AllowSearching="true"></GridColumn>
        <GridColumn HeaderText="Azioni" TextAlign="TextAlign.Center" Width="10">
            <GridCommandColumns>
                <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat", Content = "Edit" })"></GridCommandColumn>
                <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat", Content = "Delete" })"></GridCommandColumn>
            </GridCommandColumns>
        </GridColumn>
    </GridColumns>
</EjsGrid>

How can i detect wich button was pressed ?

Little suggestion: verify help pages because you have many syntax errors and is necessari to surf inside the forum to verify the correct syntax. 
If it's possible, inside the blazor api help pages enum description, indicate also the values possibles.
 
Thanks in advance
Stefano

Vignesh Natarajan [Syncfusion]
Replied On February 10, 2020 04:21 AM UTC

Hi Stefano,  
 
Thanks for contacting Syncfusion forums.  
 
Query: “How can i detect which button was pressed ?” 
 
We suggest you to achieve your requirement using CommandClicked event of EjsGrid. Refer the below code example.  
 
<EjsGrid DataSource="@Orders" AllowPaging="true" Height="315"> 
    <GridEvents CommandClicked="OnCommandClicked" TValue="Order"></GridEvents> 
. .  .. . . . . . . 
</EjsGrid> 
 
@code{     
    public void OnCommandClicked(CommandClickEventArgs<Orderargs) 
    { 
        if(args.CommandColumn.Type == CommandButtonType.Edit) 
        { 
            // Perform required operations here 
        } 
    } 
} 
 
 
Refer our UG documentation for your reference 
 
 
Query: “verify help pages because you have many syntax errors and is necessari to surf inside the forum to verify the correct syntax.  If it's possible, inside the blazor api help pages enum description, indicate also the values possibles” 
 
Thanks for your suggestion, we are frequently validating our documentations to keep them up to date to reflect changes and we will check and resolve if any syntax errors. Also we already have plan to add description and possible values for the ENUM type properties, we will include the same in any of our upcoming releases 
 
Till then if you need any further assistance, kindly get back to us.   
 
Regards, 
Vignesh Natarajan. 
 


Johnathan
Replied On February 19, 2020 01:10 AM UTC

Howdy,

Following from Stefano's comment, I have the following GridCommandColumn :

<GridColumn HeaderText="Manage Records" Width="150">
<GridCommandColumns>
<GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn>
<GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></GridCommandColumn>
<GridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-save", CssClass = "e-flat" })"></GridCommandColumn>
<GridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-cancel-icon", CssClass = "e-flat" })"></GridCommandColumn>
</GridCommandColumns>
</GridColumn>


When the Save is clicked, the command click event fires.
If the DataRow is new, the args.RowData is null.
If the DataRow was edited, the args.RowData is the value pre-edit.
if there is a @Ref="Grid" in the grid attributes, the Grid Dom does not 'show' the new or edited txt in the stack.
Looking at the stack per brakepoint, the new or edited data is not there.

How do I access the new row data and the edited row data?

Thanks

Vignesh Natarajan [Syncfusion]
Replied On February 19, 2020 08:32 AM UTC

Hi Johnathan,  

Greetings from Syncfusion support.  

Query: ” How do I access the new row data and the edited row data? 

RowData property of CommandClicked event will contain the original existing row details from the dataSource. Hence it will be null during the insert operation and original data while editing a record. You can achieve your requirement using OnActionBegin event of EjsGrid, when Request Type is Save.  
 
Refer the below code example.  

<EjsGrid DataSource="@Orders" AllowPaging="true" Height="315"> 
    <GridEvents CommandClicked="OnCommandClicked" OnActionBegin="Begin" TValue="Order"></GridEvents> 
    . . . . . . . . . 
</EjsGrid> 
 
@code{ 
    public List<Order> Orders { getset; } 
    public void OnCommandClicked(CommandClickEventArgs<Orderargs) 
    { 
        // Perform required operations here 
    } 
    public void Begin(ActionEventArgs<OrderArgs) 
    { 
        if(Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save) 
        { 
            var edit_new_data = Args.Data; 
        } 
    } 
} 


Refer our UG documentation for you reference 


Kindly get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 


Johnathan
Replied On February 27, 2020 10:38 PM UTC

Sorry for coming back late.
The answer you provided works great.

Thanks for your quick response and have a good day!

Vignesh Natarajan [Syncfusion]
Replied On February 28, 2020 03:35 AM UTC

Hi Johnathan,  

Thanks for the update.  

We are glad to hear that you have achieve your requirement using our solution.  

Kindly get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 


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