CODEWITHSUNDEEP
javajqueryjqgrid
AKV
AKV

Reputation: 179

OnClick on custom button created on JqGrid row get json parameter

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

Upvotes: 0

Views: 2221

Answers (1)

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 2

Related Questions