Change JQGrid Cell value on Button Click

Question

I am using jqgrid in asp.net webforms. I have a column which name is Actions, in which I have button Add I want that when I click on add button, then cell value should be changed. Like I have button in this cell, when I click on add button, then it should change with text. Please, guide me. Code is given below which i am using.

<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>

jQuery("#jQGridDemo").jqGrid({
        url: 'HttpHandlers/CustomersList.ashx',
        datatype: "json",
        colNames: ['Opted-In', 'Name', 'Email', 'Filter Matches', 'Customer Id','Actions'],
        colModel: [
                    { name: 'OptedIn', index: 'OptedIn', width: 40,align:'center', stype: 'text', formatter: OptedInValue },
                    { name: 'CustomerName', index: 'CustomerName', width: 90, stype: 'text', sortable: true },
                    { name: 'CustomerEmail', index: 'CustomerEmail', width: 110, stype: 'text', sortable: true },
                    { name: 'FilterLetter', index: 'FilterLetter', width: 60 },
                    { name: 'CustomerId', index: 'CustomerId', width: 60, hidden: true },
                    { name: 'Actions', index: 'Actions',editable:true, width: 60,align:'center',formatter: ButtonValue }
                    ],
        width: 600,
        height:300,
        rowNum: 30,
        mtype: 'GET',
       loadonce: true,
        rowList: [30, 60, 90],
        pager: '#jQGridDemoPager',
        sortname: 'OptedIn',
        viewrecords: true,
        sortorder: 'asc',
        caption: "Customer List"

    });
function ButtonValue(cellvalue, options, rowObject) {
    var filterLetter = rowObject.FilterLetter;
    var link = '';
    if (filterLetter == " A") {
        link = '<button type="button" onclick=addGridCustomer(' + rowObject.CustomerId +')>Add</button>';
    } else {
        link = '<div id="rowelder"><button type="button" onclick=removeGridCustomer(' + rowObject.CustomerId + ',' + options.rowId +')>Remove</button></div>';
    }

    return link;
}
function OptedInValue(cellvalue, options, rowObject) {
    var optedIn = rowObject.OptedIn;
    var link = '';
    if (optedIn == true) {
    link = '<img  title="View ' + rowObject.CustomerName + ' ' + '"  src="/images/icn_alert_success.png" />';
}
else if (optedIn == false) {
    link = '<img  title="View ' + rowObject.CustomerName + ' ' + '"  src="/images/icn_alert_error.png" />';
    }
    return link;
};

function removeGridCustomer(id,rowId) {
    debugger
    var rowData = $('#jQGridDemo').jqGrid('getRowData', rowId);
    rowData.Actions = '12321';
    $('#jQGridDemo').jqGrid('setRowData', rowId, rowData);
    $('#<% = hdCustomer.ClientID %>').val($('#<% = hdCustomer.ClientID %>').val() + id + ',');

    UpdateFiltersForCusRemove(id);
}

have a look at this SO http://stackoverflow.com/questions/12674663/how-to-change-a-rows-particular-cell-value-in-jqgrid — patel.milanb, Dec 23 '13 at 11:04
Why did it not work? What happened that was different from your expected results? Did you get an error? — Amicable, Dec 23 '13 at 11:23
i want to hide my button and show text on the place of button. — Ammar, Dec 23 '13 at 11:44
post your problem using Fiddle (jsfiddle.net) for better understanding. — Vinoth Krishnan, Dec 23 '13 at 14:11

score 0 · Accepted Answer · answered Dec 24 '13 at 05:00

i work on this problem and found the solution here below is the problem of my solution.

function ButtonValue(cellvalue, options, rowObject) {
                var filterLetter = rowObject.FilterLetter;
                var Id = qs("id");
                var link = '';
                if (Id != 0) {
                    link = '<div id="addbutton"><button type="button" onclick=addGridCustomer(' + rowObject.CustomerId + ',' + options.rowId + ')>Add</button></div>';
                }
                else {
                    link = '<div id="removecustomer"><button type="button" onclick=removeGridCustomer(' + rowObject.CustomerId + ',' + options.rowId + ')>Remove</button></div>';
                }

                return link;
            }
            function OptedInValue(cellvalue, options, rowObject) {
                var optedIn = rowObject.OptedIn;
                var link = '';
                if (optedIn == true) {
                    link = '<img  title="View ' + rowObject.CustomerName + ' ' + '"  src="/images/icn_alert_success.png" />';
                }
                else if (optedIn == false) {
                    link = '<img  title="View ' + rowObject.CustomerName + ' ' + '"  src="/images/icn_alert_error.png" />';
                }
                return link;
            };

            function removeGridCustomer(id, rowId) {
                debugger

                $("#jQGridDemo tr").eq(rowId).children().eq(5).find('div button').hide();
                $("#jQGridDemo tr").eq(rowId).children().eq(5).find('div').append('to be removed ..');
                $('#<% = hdCustomer.ClientID %>').val($('#<% = hdCustomer.ClientID %>').val() + id + ',');

                //Update Filters in case of removal
                UpdateFiltersForCusRemove(id);


            }
            function addGridCustomer(id, rowId) {

                $('#<% = hdCustomer.ClientID %>').val($('#<% = hdCustomer.ClientID %>').val() + id + ',');

                $("#jQGridDemo tr").eq(rowId).children().eq(5).find('div button').hide();
                $("#jQGridDemo tr").eq(rowId).children().eq(5).find('div').append('to be added ..');

                //Update Filters in case of removal
                UpdateFiltersForCusAdd(id);


            }
            function UpdateFiltersForCusAdd(a) {
                var filterLtr = $("#lblF" + a).text().trim();
                var count = 0;
                count = parseInt($("#filterL" + filterLtr).text().trim()) - 1
                $("#filterL" + filterLtr).text(count);

                TotalCustomers(+1);
            }

Change JQGrid Cell value on Button Click

1 Answers1