locked
How to call button click event inside grid in ASP.MVC using JQuery RRS feed

  • Question

  • User-1893379617 posted

    i,

    I am having one ASP.NET MVC application. I have a grid to display data . I have 3 different buttons(Cancel, Pause, Play) inside grid for each row. Based on some condition buttons will be enabled and disabled. My question is , how to call button click event , If i click on Cancel button, it should call cancel button. similarly , if i click Pause button, it should call the this button and if i click Play button, it should call the play button. As per my code, its not hitting to the any button click event inside grid. 

    <table id="tblGetproducts" class="display" style="width:100%">
        <thead>
            <tr>
                <td class="clickable">
                    Action
                </td>
             </tr>
        </thead>
     
    <tbody>
    @foreach (var row in Model)
            {
                <tr>
                    <td>
                        
                        <button type="button" style="display:none"
                                id="btnCancel"
                                class="btn btn-danger">
                            Cancel
                        </button>
                        
                        <button type="button" style="display:none"
                                id="btnPause"
                                class="btn btn-primary">
                              Pause
                        </button>
                        <button type="button" style="display:none"
                                id="btnPlay"
                                class="btn btn-success">
                            Play
                        </button>
           </td>
         </tr>
    }
    </tbody>
    </table>
     
    For grid to display data ,  have used datatable-
    ---------------------------------------------------------------
    var tbl = $('#tblGetproducts').dataTable({ 
    dom: 'Blfrtip',
    buttons: [{
    footer: 'true',
    text: 'Export To Excel',
    title: 'Get Product Insert Rules',
    exportOptions: {
    columns: [0, 1, 2, 3]
    }
    }],
    'pageLength': 25,
     });
     
    Here in below, i have JQuery which will call Button click event. But its not working.
     
       $('#btnCancel').on('click','button', function (event) {
            debugger;
            var row = $(this).closest('tr')[0];
            var rowData = tbl.fnGetData(row);
            var btnValue = rowData[0];//the button td value
            
            var bConfirmRemove = confirm("Are you sure want to cancel the item?");
            if (bConfirmRemove) {
    //Loic...
    }
     
    For Pause button
     
    // $('#btnPause').on('click','button', function (event) {
            debugger;
            var row = $(this).closest('tr')[0];
            var rowData = tbl.fnGetData(row);
            var btnValue = rowData[0];//the button td value
            
            var bConfirmRemove = confirm("Are you sure want to cancel the item?");
            if (bConfirmRemove) {
    //Loic...
    }
     
    similarly for play button. Each button click event it should call different jquery finction.
    Kidnly help me .
    Saturday, June 15, 2019 2:50 AM

Answers

  • User1724605321 posted

    Hi kamalsekhar ,

    The problem is you are using ID selector to find the button :

    $('#btnCancel').on('click','button', function (event)

    But you didn't set the id on your buttons .

    You can set class="delbutton" property to your delete button , for example , and register the button click event like :

    $('#example').on('click', '.delbutton', function() {
        console.log('clicked');
    });
    
    

    Here is a working demo for your reference : http://live.datatables.net/feridini/2/edit

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 17, 2019 2:22 AM

All replies

  • User1724605321 posted

    Hi kamalsekhar ,

    The problem is you are using ID selector to find the button :

    $('#btnCancel').on('click','button', function (event)

    But you didn't set the id on your buttons .

    You can set class="delbutton" property to your delete button , for example , and register the button click event like :

    $('#example').on('click', '.delbutton', function() {
        console.log('clicked');
    });
    
    

    Here is a working demo for your reference : http://live.datatables.net/feridini/2/edit

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 17, 2019 2:22 AM
  • User-1893379617 posted

    Hi,

    Thank You so much. Its working fine. Now my requirement again changed. Instead of buttons, i want to implement Images(3 different images). How i can find class name or how to do for image click event.

    Tuesday, June 18, 2019 7:23 AM
  • User1724605321 posted

    Hi kamalsekghar ,

    Try this :

    $(document).ready(function(){
        $(".Image").click(function(){
        alert("it works!");
       });
      });

    Best Regards,

    Nan Yu

    Wednesday, June 19, 2019 2:17 AM