OnClick on custom button created on JqGrid row get json parameter

Question

Hi I have the following jqgrid columns, onclick on approve button I need to send an ID to servlet thro ajax.

colNames: ['EmployeeID','Name', 'From Date', 'To Date', 'Reason', ''],
    colModel: [
           {name:'employeeID', index:'emp_Id', width:55 },
           {name: 'employeeName', index:'name', width:90},
           {name: 'leave_from', index:'from_date', width: 90},
           {name: 'leave_to', index:'to_date', width: 90},
           {name: 'reason', index:'status', width: 90},
           {name: 'option', index: 'option', width:150, sortable:false},
               ],

Custom Button Code

    loadComplete: function(){
        //alert('loading Complete');
        var id = jQuery('#jqqGrid').getDataIDs();
        for(var i=0; i<id.length; i++){
            //var c1 = id[i];
            approve = "<input style='height:22px;width:60px;' type='button' onclick= \"approveLeave();\" Value='Approve'/><br />";
            reject = "<input style='height:22px;width:60px;' type='button' onclick= \"rejectLeave();\" Value='Reject'/><br />";
            jQuery('#jqqGrid').jqGrid('setRowData',id[i], {option:approve+reject});
        }

I am able to see the buttons in my grid, my problem is to send an ID through onclick function,

Sample Json object

{"currentPage":1,"totalPages":1,"totalRecords":1,"rows":[{"Id":1016,"cell":{"leave_from":"19/08/2013","leave_to":"23/08/2013","dateofLeaveRequest":"8/18/2013","reason":"Vaccation ","leave_id":1016,"id":0,"employeeID":1029,"employeeName":"Arun Kumar"}}]}

I want to pass the ID through my onclick function. Not sure how to achieve it. Any help is highly appreciated.

Thanks

score 2 · Accepted Answer · edited May 23 '17 at 12:20

First of all it's important to understand that jqGrid always assign id attribute of <tr> elements which represents rows of the grid. If you use "Id":1016 instead of "id":1016 you should inform jqGrid to use another name for ids. You can include jsonReader: {id: "Id"} to do this. Only because jqGrid don't find required information in the input data it assigns integers like 1, 2, 3... as the id values.

The next problem is the usage of setRowData in the loop inside of loadComplete. I recommend you to read the old answer where I tried to explain why the approach is not effective from performance point of view. It would be much better to use custom formatter to construct the content of option column. In the case you need define the callback function which jqGrid calls when it need to build the content of <td> (the cell of the column option). The callback have four parameters cellvalue, options, rowObject, action. The second parameter options is object which rowId property (options.rowId) provide you the id of the row. The third parameter rowObject represent the input data for the row. I think that it will be something like {leave_from: "19/08/2013", leave_to: "23/08/2013", dateofLeaveRequest: "8/18/2013", reason: "Vaccation", leave_id: 1016, id: 0, employeeID: 1029, employeeName: "Arun Kumar"} in your case. In the way you will be able to construct the cell content based on any values of input data of the row. So rowObject.leave_id or options.rowId will get you the information which you need.

The usage of 'onclick=\"approveLeave(' + options.rowId + ')' could have some disadvantages in case when you implement some editing of data. In the case onclick could use old id value. More better will be use approveLeave(this). The value of this is the DOM of <input> element which was clicked. So you can use $(elem).closest("tr").attr("id") (elem could be the first parameter of approveLeave) to get the rowid.

More better way will be don't assign any onclick at all. One can set one click event handle on the whole <table> which represent grid. jqGrid do this. So one can just use beforeSelectRow or onSelectRow to handle click on any button inside of the grid. See the answer, this one or this one.

Thanks for your detailed explanation, I have modified my code removing **setRowData** with **custom formatter** as suggested. I need to have separate buttons with onclick event to either approve or reject leave. This table cells will not be edited. That's the reason I am using onclick event to fire ajax request. — AKV, Aug 19 '13 at 22:22
@AKV: you don't need to set `onclick` handle on *every* button. You can use `beforeSelectRow` or `onCellSelect`. The `e` parameter of the callbacks provide you information *which one* from buttons in the grid was clicked by the user. You can get `value` of the button ('Approve' or 'Reject'), get rowid (`leave_id`) and so on. See references from the last part of my answer. If needed you can make `ajax` call or other actions. — Oleg, Aug 19 '13 at 22:25
thanks for your response. I am currently looking at your references. — AKV, Aug 19 '13 at 22:35
Appreciate your suggestions, edited my code. I have one more question. After the button click, How do I update my table? will setting trigger re-loadgrid in my approveleave help me? — AKV, Aug 19 '13 at 23:23
@AKV: You are welcome! I don't understand what part of content of the grid should be changed after the button was clicked. You can use `setCell` or `setRowData` to update some part of the grid. To reload the whole grid body you can use `$("#grid").trigger("reloadGrid");` — Oleg, Aug 20 '13 at 06:15

OnClick on custom button created on JqGrid row get json parameter

1 Answers1