How to dynamically add Edit button to grid for editing row using the jqGrid formedit

Goal:

Dynamically add an Edit button to an empty column that will NOT trigger an inline edit but rather a jqGrid formedit for the selected row using the modal dialog option.

Problem:

All examples in the Demo version include editing inline and adding buttons to a column that only does an inline edit and the Demo version's getRowdata does not perform as expected. I tried it an could not get it working and the getRowData did not work as specified.

Solution:

            gridComplete: function() {
                var rows = $(item).jqGrid('getRowData');
                for (var i = 0; i < rows[0].rows.length; i++) {
                    var row = rows[0].rows[i];
                    var idx = row.id;
                    if (!$(row).hasClass('jqgrow') && !$(row).hasClass('alt'))
                        continue;
                    var be = "<input style='height:22px;width:35px;' type='button' id='editAddress" + idx + "' value='Edit' />";
                    $(item).setRowData(idx, { act: be });
                    $('#editAddress' + idx).click(function() {
                        $(item).editGridRow($(this).parent().parent('tr').attr('id'));
                    });
                }
            },
 

item = that is a variable that contains the id of my grid.

This is for editing an address so change the "editAddress" id prefix for your needs or create a generic function that will handle all of this:

            gridComplete: function() {
                SetupJqGridEditDeleteButtons(item);
            },
 

function SetupJqGridEditDeleteButtons(item) {
    var rows = $(item).jqGrid('getRowData');
    for (var i = 0; i < rows[0].rows.length; i++) {
        var row = rows[0].rows[i];
        var idx = row.id;
        if (!$(row).hasClass('jqgrow') && !$(row).hasClass('alt'))
            continue;
        var be = "<input style='height:22px;width:35px;' type='button' id='editItem" + idx + "' value='Edit' />";
        $(item).setRowData(idx, { act: be });
        $('#editItem' + idx).click(function() {
            $(item).editGridRow($(this).parent().parent('tr').attr('id'));
        });
    }
}
 

Print | posted @ Monday, June 28, 2010 5:28 PM

Comments on this entry:

Gravatar # re: How to dynamically add Edit button to grid for editing row using the jqGrid formedit
by rohit at 1/29/2015 10:30 PM

good post
Post A Comment
Title:
Name:
Email:
Comment:
Verification: