how to populate the selected row from 1st jqgrid to 2nd jqgrid ?

Question

I have a grid displaying some information and when I select multiple rows and click on add order button it should display those rows in 2nd grid without making any call because its just show the selected row from 1st to 2nd grid....just like shopping cart application ? Is it possible with jqGrid?

Moreover, if I selected more rows it should append in that 2nd grid.

If anyone have any idea about how to achieve it ..I will really appreaciate...Thanks!

Answer 1

It seems to me that addRowData method come to your requirement better as other. Let us the 2nd grid has the same columns as the 1st grid. Then in the 'click' event handle of the "add to shopping cart" button you can do like following

var gridProducts = $("products");
var gridShoppingCart = $("cart");
var prodIds = gridProducts.jqGrid('getGridParam', 'selarrrow');
for (var iProd=0, lProd=prodIds.length; iProd<lProd; iProd++) {
    var prodId = prodIds[iProd];
    var prodData = gridProducts.jqGrid('getRowData', prodId);
    gridShoppingCart.jqGrid('addRowData', prodId, prodData);
}

The real shopping cart should have probably an item count. If one adds the same product twice the item counter should be incremented instead of having two products (with the same id) twice in the 2nd grid.

Let us in the 2nd grid we have a column with the name 'count'. In JavaScript is very easy to add a property to the object, so we can easy modified the code above to the following

var gridProducts = $("products");
var gridShoppingCart = $("cart");
var prodIds = gridProducts.jqGrid('getGridParam', 'selarrrow');
for (var iProd=0, lProd=prodIds.length; iProd<lProd; iProd++) {
    var prodId = prodIds[iProd];
    var prodData = gridProducts.jqGrid('getRowData', prodId);
    var cnt = gridShoppingCart.jqGrid('getCell', prodId, 'count');
    if (cnt) { // product exist
        gridShoppingCart.jqGrid('setCell', prodId, cnt+1);
    } else {
        prodData.count = 1;
        gridShoppingCart.jqGrid('addRowData', prodId, prodData);
    }
}

I don't test the code examples above, but I hope they will work.