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

Handle click button on GridCommandColumn

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

5 Replies

VN Vignesh Natarajan Syncfusion Team 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. 
 



JO Johnathan 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


VN Vignesh Natarajan Syncfusion Team 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. 



JO Johnathan 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!


VN Vignesh Natarajan Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon