CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3jqgridjqgrid-asp.net
Yasser Shaikh
Yasser Shaikh

Reputation: 47784

Jqgrid bind delete buttons to javascript functions with passing parameters

I have a jqgrid I am using formatter for a column as

{ name: 'Delete', width: 40, formatter: self.deleteBtnFormatter }

where the deleteBtnFormatter is as follows :

  deleteBtnFormatter: function (cellvalue, options, rowdata) {
    var self = this;        
    if (cellVale== "Yasser") {
        return "<div class='abc'>-</div>";
    }
    else {
        var deleteBtnId = // i am getting this from rowData
        var deleteButton = "<div class='xyz'" + "id='" + deleteBtnId + "' >Delete<div>";        

        return deleteButton;
    }

 },

Now my problem is how should I bind all these delete buttons to an another javascript method, from where I am going to make an ajax call to delete this entry.

Also I note that I want to pass parameters to the javascript method.

I know this can be done using Url.Action or by playing around with href property, but I want to bind it instead.

Thanks

Upvotes: 0

Views: 1043

Answers (1)

usman mehmood
usman mehmood

Reputation: 112

you can use following formatter javascript function:

function deleteformatter(cellvalue, options, rowdata)
{
var id = // i am getting this from rowData
return "<input style='height:17px;width:17px;'  type='image' src='../Images/delete-icon.png' title='Remove' onclick=\"javascript:Delete_Click(this,id);\"/>";
}
// you can use ajax call rather to use this jqgrid delete function.
function Delete_Click(imgbtn,id){        
    HideError();
    var url = ""//function that you want to call
    jQuery("#jqgridId").jqGrid('delGridRow', id, { top: 230, left: 350, height: 110, reloadAfterSubmit: true, url: url,
                afterComplete : function () {
                    $('#jqgridId').trigger('reloadGrid');                        
                }
            });
}

You can replace following function to ajax call to delete entry of the grid.

    jQuery("#jqgridId").jqGrid('delGridRow', id, { top: 230, left: 350, height: 110, reloadAfterSubmit: true, url: url,
                afterComplete : function () {
                    $('#jqgridId').trigger('reloadGrid');                        
                }
            });

following is the example of ajax call:

        $.ajax({
            url: url,
            type: "POST",
            data: JSON.stringify({ ID: id }), 
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            error: function (xhr, status, error) {
                var error = extractError(xhr);
            },
            success: function (data) {

            }
        });

Upvotes: 1

Related Questions