CODEWITHSUNDEEP
javascriptjquery
user2810293
user2810293

Reputation: 155

Insert a new row after the selected row in JQuery

I have a requirement to insert a new row after the selected row. The code which I have inserts a new row at the last which should only happen if user has not selected any row.

strGridId  = test_ItemCollection_DefaultGridId(strGridId);
var grid = jQuery('#' + strGridId);
var columnModel = grid.jqGrid('getGridParam', 'colModel');
var currentItemCollection = test_ItemCollection_Get(strGridId);

var baseAddItem = function() {
    var newTItem = proj.page.createTItem(currentItemCollection.strJSOName, strGridId, true);
    newTItem.setUpdateStatus(UPDATESTATUS.ADD);
    newTItem.set('transientItem', 1); // just created this item

    // pre add item event
    var evt = new TEvent(EVENT_PRE_ADD_ITEM, test_ItemCollection_Get(strGridId));
    evt.strGridId = strGridId;
    evt.newItem = newTItem;
    if (!test_ItemCollection_fireEvent(evt)) {
        return false;
    }

    currentItemCollection.items.push(newTItem);

    var rowData = new Object();
    for (var iGridLayout = 0; iGridLayout < columnModel.length; iGridLayout++) {
        if (test_ItemCollection_IsNotJQGridColumn(columnModel[iGridLayout].name)) {
            rowData[columnModel[iGridLayout].name] = test_ItemCollection_EncodeCellValue(strGridId, currentItemCollection.items.length-1, columnModel[iGridLayout], test_ItemCollection_GetItemDisplayValue(columnModel[iGridLayout], newTItem));
        }
    }
    grid.jqGrid('addRowData', ''+ ( currentItemCollection.items.length-1), rowData ); // convert to string for adding 0 item
    test_ItemCollection_selectRow(strGridId, '' + (currentItemCollection.items.length - 1) );

    // post add item event
    var evt2 = new TEvent(EVENT_POST_ADD_ITEM, test_ItemCollection_Get(strGridId));
    evt2.strGridId = strGridId;
    evt2.newItem = newTItem;
    test_ItemCollection_fireEvent(evt2);
    test_ItemCollection_AdjustGridHeight(strGridId);

    return true;
};

How can I achieve this? Any help will be appreciated. Thanks

Upvotes: 1

Views: 337

Answers (2)

Manish Shukla
Manish Shukla

Reputation: 1365

you can use .insertAfter() function of jQuery. For more details follow this link jQuery insertAfter

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

Assuming you have a table with id yourTable and every row that have been selected has a class of selectedRow

Add a button with id button and click it to add a new row:

$(document).on('click', '#button', function() {
   var selRow = $('table#yourTable').find('tr.selectedRow'); 
   var sel = selRow.length;
   var newRow = '<tr><td>This is a new row</td></tr>';
   if (sel > 0) {
      selRow.after(newRow);
   } else {
      $('table#yourTable > tbody').append(newRow);
   }
});

Upvotes: 0

Related Questions