jQGrid | Passing Parameters With Special Symbols On Actions Events

While we are passing parameters with extra special symbol in jQgrid, its not that simple, and we need to take care of something before doing it directly. Below you can see a jQGrid with an action button on it.

jQGrid Demo

I do have a sample function as shown below

 
function Manage(var id,var name){
     //perform tasks
}

I need to call above function on the button click in jQGrid. And the name variable consists of special characters like dot,semicolon etc. The below code defines how the last button is loaded in the jQGrid, full coding to load the above jQGrid is given below.

 
 $("#assetTable").jqGrid({
        url: 'GetAssets',
        datatype: "json",
        postData: { companyId: companyId },
        colNames: ['ID', 'Code', 'Name', 'Category', 'Locked', 'Bundled', 'Reimbursed', 'Company', 'Actions'],
        colModel: [
            {
                name: 'ID', index: 'ID', sortable: false, editable: true
            },
            {
                name: 'Code', index: 'Code', editable: true
            },
            { name: 'Name', index: 'Name', editable: true },
            { name: 'Category.ID', index: 'Category.ID', sortable: false, editable: true },
            {
                name: 'IsLocked', index: 'IsLocked', sortable: false, editable: true
            },
            {
                name: 'IsBundled', index: 'IsBundled', sortable: false, editable: true
                }
            },
            {
                name: 'IsReimbursed', index: 'IsReimbursed', sortable: false, editable: true
            },
            {
                name: 'Company.ID', index: 'Company.ID', sortable: false, editable: true
            },
            { name: 'act', index: 'act', sortable: false },
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#assetFooter',
        sortname: 'ID',
        viewrecords: true,
        sortorder: "desc",
        editurl: "SaveAsset",
        caption: "Assets",
        ajaxRowOptions: {
            success: function () {
                $("#assetTable").trigger("reloadGrid");
            }
        },
        gridComplete: function () {
            var ids = jQuery("#assetTable").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                var data = $("#assetTable").jqGrid().getRowData(cl);
                if (data.IsBundled == "true") {
                    be = "<input onclick="Manage(" + data.ID + ",\"" + data.Name + "\")" type="button" value="View Bundle Details" />";
                    jQuery("#assetTable").jqGrid('setRowData', ids[i], { act: be });
                }
                else {
                    be = "<input onclick="Manage(" + data.ID + ",\"" + data.Name + "\")" type="button" value="Manage Services" />";
                    jQuery("#assetTable").jqGrid('setRowData', ids[i], { act: be });
                }
            }
        }
    });

In the above code you could see that how the method call is defined in the button click to pass the name.

 
onclick="Manage(" + data.ID + ",\"" + data.Name + "\")"

If you are not used like above, the function call will not happen and you can see the error in browser console. If you have any doubts, just comment here..