Handle click button on GridCommandColumn

[Stefano Capobianco]

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]

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<Order> args) 

    { 

        if(args.CommandColumn.Type == CommandButtonType.Edit) 

        { 

            // Perform required operations here 

        } 

    } 

} 

 

 

Refer our UG documentation for your reference 

 

https://ej2.syncfusion.com/blazor/documentation/grid/events/#commandclicked 

 

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]

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]

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 { get; set; } 

    public void OnCommandClicked(CommandClickEventArgs<Order> args) 

    { 

        // Perform required operations here 

    } 

    public void Begin(ActionEventArgs<Order> Args) 

    { 

        if(Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save) 

        { 

            var edit_new_data = Args.Data; 

        } 

    } 

} 

Refer our UG documentation for you reference 

https://ej2.syncfusion.com/blazor/documentation/grid/events/#onactionbegin  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan. 

[Johnathan]

Sorry for coming back late.

The answer you provided works great.

Thanks for your quick response and have a good day!

[Vignesh Natarajan]

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.