1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. CommandButtonOptions click

CommandButtonOptions click

Hello,   

    I have loaded data in gridview, and now I want classical button for edit and delete on right hand side of each row and when I click on those button or respective row it has to redirect to other page where I have operation for update record and for delete it has to confirm for delete record. all things is done via authorized api jwt token. 

Here is my gridview code. 

 @{


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

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

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

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

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


    }

    <div class="control-section">

        <ejs-grid id="Grid2" dataSource="@ViewBag.datasource" dataBound="dataBound" allowPaging="true" allowSelection="true">

            @*<e-data-manager url="/AcademicYear/GetAllAcademicYear" insertUrl="/AcademicYear/AddAcademicYear" updateUrl="/Home/Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor"></e-data-manager>*@

            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" allowEditOnDblClick="true"></e-grid-editSettings>

            <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

            <e-grid-columns>

                <e-grid-column field="AcademicYearId" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>

                <e-grid-column field="AcademicYearName" headerText="Customer Name" validationRules="@(new { required=true})" width="140"></e-grid-column>


                <e-grid-column headerText="Manage Records" width="150" commands="commands"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

    </div>


and trying to do with js and here is code for js 


 function dataBound(e) {

        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];//get the grid instance

        var ele = document.getElementsByClassName("e-grid")[0]

        ele.addEventListener('click', function (e) {


            //click event for command button

            //alert("click event");

            var selectedRowIndex = grid.selectedRowIndex;

            var rowInfo = grid.getRowsObject()[grid.selectedRowIndex]

            alert(selectedRowIndex);

            alert(rowInfo);

           if(e.target.classList.contains('edit')) {

                alert("click event edit");

                var id = rowInfo.data.AcademicYearId;

                alert(id);

               // window.location.rel='nofollow' href = '/AcademicYear/UpdateAcademicYear/' + id;

            }

            else if (e.target.classList.contains('delete')) {

                alert("click event delete");

                var id = rowInfo.data.AcademicYearId;

                alert(id);

                //window.location.rel='nofollow' href = '/AcademicYear/DeleteAcademicYear/' + id;

            }

            else

            if (e.target.classList.contains('e-details')) {


                alert("click event");

            }

        });


    }

but it is working on row click while I need seperate for edit and delete action and that is not working and also not getting key column to  update and delete. 

Please can someone help me to solve this .


4 Replies
SI Santhosh Iruthayaraj Syncfusion Team June 28, 2023 02:58 PM UTC

Hi Gulab Chand Tejwani,


Greetings from Syncfusion support.


From your query, we understand that you want separate event for command column buttons. Our Grid already has an event that is triggered when clicking on the command column buttons. This event is called "commandClick".


To learn more about custom command columns and how to utilize the "commandClick" event, I recommend referring to the following resources:


Custom command column: https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/command-column-editing#custom-command-column


commandClick API: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_CommandClick


We hope this information will help you resolve your concern. If we misunderstood your query, please provide us a clear explanation of your query. This will help us provide you with more accurate solution.


Regards,

Santhosh I


GC Gulab Chand Tejwani June 29, 2023 08:03 AM UTC

No,    

What you provided is already implemented. What I want is, I need Edit and Delete button on each row and when I click on edit button it has to redirect to edit page instead of inline edit with primary key and when I click on delete it should ask me for confirmation for delete, and then it should call delete API with JWT token to delete the record. 

On your provided code of command button I am common click event fire for edit and delete and that also not able to get primary key of row.


Here is my gridview code. 

 @{


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

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

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

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

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


    }

    <div class="control-section">

        <ejs-grid id="Grid2" dataSource="@ViewBag.datasource" dataBound="dataBound" allowPaging="true" allowSelection="true">

            @*<e-data-manager url="/AcademicYear/GetAllAcademicYear" insertUrl="/AcademicYear/AddAcademicYear" updateUrl="/Home/Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor"></e-data-manager>*@

            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" allowEditOnDblClick="true"></e-grid-editSettings>

            <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

            <e-grid-columns>

                <e-grid-column field="AcademicYearId" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>

                <e-grid-column field="AcademicYearName" headerText="Customer Name" validationRules="@(new { required=true})" width="140"></e-grid-column>


                <e-grid-column headerText="Manage Records" width="150" commands="commands"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

    </div>


and trying to do with js and here is code for js 


 function dataBound(e) {

        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];//get the grid instance

        var ele = document.getElementsByClassName("e-grid")[0]

        ele.addEventListener('click', function (e) {


            //click event for command button

            //alert("click event");

            var selectedRowIndex = grid.selectedRowIndex;

            var rowInfo = grid.getRowsObject()[grid.selectedRowIndex]

            alert(selectedRowIndex);

            alert(rowInfo);

           if(e.target.classList.contains('edit')) {

                alert("click event edit");

                var id = rowInfo.data.AcademicYearId;

                alert(id);

               // window.location.rel='nofollow' rel='nofollow' href = '/AcademicYear/UpdateAcademicYear/' + id;

            }

            else if (e.target.classList.contains('delete')) {

                alert("click event delete");

                var id = rowInfo.data.AcademicYearId;

                alert(id);

                //window.location.rel='nofollow' rel='nofollow' href = '/AcademicYear/DeleteAcademicYear/' + id;

            }

            else

            if (e.target.classList.contains('e-details')) {


                alert("click event");

            }

        });


    }


HS Hemanthkumar S Syncfusion Team June 29, 2023 11:37 AM UTC

Hi Gulab Chand Tejwani,

Thanks for the details. we are validating the issue and will get back to you ASAP.

Regards,

Hemanth Kumar S



SI Santhosh Iruthayaraj Syncfusion Team July 3, 2023 03:23 PM UTC

Hi Gulab Chand Tejwani,


Based on your request, you can render Edit and Delete buttons using column template feature of the Grid. Then you can bind the recordClick Grid event and handle the button clicks separately by using the document.activeElement property. By default the recordClick event will receive the rowData in the arguments. You can get the primary key value from the rowData. Please find the code snippet that will demonstrate how you can implement this:


[Index.cshtml]

 

<ejs-grid id="Grid" dataSource="@order" allowPaging="true" recordClick="recordClick">

    <e-grid-editSettings allowEditing='true' mode="Normal"></e-grid-editSettings>

    <e-grid-columns>

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>

        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>              

        <e-grid-column field="OrderDate" headerText="Order Date" width="140" format="yMd"></e-grid-column>

        <e-grid-column field="Freight" headerText="Freight" textAlign="Center" format="C2" width="120"></e-grid-column>        

        <e-grid-column template="#template" textAlign="Center" format="C2" width="120"></e-grid-column>        

    </e-grid-columns>

</ejs-grid>

 

<script id="template" type="text/x-template">

    <div class="button-group">        

        <button class="e-btn e-primary action-btn">Edit</button>

        <button class="e-btn e-primary action-btn">Delete</button>

    </div>

</script>

 

<script>

    function recordClick(args) {

        if (document.activeElement.tagName === "BUTTON") {

            // getting the Grid instance

 

            var grid = document.getElementById('Grid').ej2_instances[0];

 

            // getting the primary key value from the args.rowData

            var primaryKey = args.rowData[grid.getPrimaryKeyFieldNames()[0]];

 

            // condition for Edit button click

            if (document.activeElement.innerText == "EDIT") {

                // perform edit operation here

                console.log("Edit record - " + primaryKey);

            }

 

            // condition for Delete button click

            if (document.activeElement.innerText == "DELETE") {

                // perform delete operation here

                console.log("Delete record - " + primaryKey);

            }

        }

    }

</script>

 


You can find the documentation about column template from the below link:


Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/column-template


recordClick API: https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_RecordClick


For your convenience, we have attached a sample for your reference. We hope this solution addresses your requirements. If you have any further queries or need additional assistance, please let us know.


Regards,

Santhosh I


Attachment: ASPNetCoreApp_c06b1a2c.zip

Loader.
Up arrow icon