how to call webmethod with custom grid button?

[Fraan83]

Hi dear support,
i'm still here.

I need to now how to make a function for calling ajax on button row click.
I had rendered a button in grid, but I can't call a function.

Code: [Select]


                     {
                         title: "Assegna", dataType: "string", align: "center", dataIndx: "assegna", maxWidth: 50, render: function (ui) {
                             var rowData = ui.rowData,
                                 dataIndx = ui.dataIndx;

                             rowData.pq_cellcls = rowData.pq_cellcls || {};
                             if (rowData.stato == "In Attesa" & rowData.assegna == "Assegnare Si") {

                               
                                 return "<a title='Click for assign to user' onClick='assignFunction();' class='btn btn-sm btn-light btn_assegna_direct'  ><i class='fas fa-plus'></i> </a>";
                                 function assignFunction() {
                                     $.ajax({
                                         contentType: "application/json; charset=utf-8",
                                         data: '{"id_product" : "' + rowData.id_product+ '", "id_user" : "' + rowData.id_user+ '"}',
                                         dataType: "json",
                                         type: "POST",
                                         url: "page.aspx/AssignProduct",                             
                                         async: false,
                                         success: function (result) {
                                             msg += 'Product assigned';
                                         },
                                         error: function (result) { }
                                     });
                                     alert(msg);
                                 }

                             } else {
                                 return "<a title='Impossible to assign'  class='btn btn-sm btn-secondary disabled'> <i class='fas fa-check'></i> </a>";
                             }
                         }
                         
                         
                     },



[paramvir]

column.postRender can be used add click event handler to the buttons as in this example:

https://paramquery.com/pro/demos/editing

[Fraan83]

I've tried, but still doesn't work.
where is i wrong?

Code: [Select]


 {
                        title: "Assign", dataType: "string", align: "center", dataIndx: "assigned", maxWidth: 50, render: function (ui) {
                            var rowData = ui.rowData,
                                dataIndx = ui.dataIndx;


                            rowData.pq_cellcls = rowData.pq_cellcls || {};
                            if (rowData.state == "waiting" & rowData.assigned== "no") {

                                return "<button type='button'  class='btn btn-sm btn-light btn_assegna_direct'  ><i class='fas fa-plus'></i> </button>";

                            } else {
                                return "<button type='button'  class='btn btn-sm btn-secondary disabled'> <i class='fas fa-check'></i> </button>";
                            }
                        },
                        postRender: function (ui) {
                            var rowIndx = ui.rowIndx,
                                grid = this,
                                $cell = grid.getCell(ui);

                            $cell.find(".btn_assegna_direct").on("click", function () {
                             
                                 assignProduct(rowIndx, grid);
                            });

                        },
                                       
                         

         

                    }
],

 



[paramvir]

your code is missing definition of assignProduct and what error are you getting?

Please share a jsfiddle if possible.