How to pass data to URL from jqgrid string if hyperlink is clicked

Question

jqGrid contains a quantity column and adds a button to the cart using the colmodel below. Inline editing is used to fill the quantity. If the number of files is fileld and a link to another column is added to the basket, the entered number is not passed to the AddToCart controller. The product identifier from the id field in json data is passed correctly.

How to pass selected quantity to AddToCart controller (using url query string or something else)?

colmodel:

{"label":"AddToCart", "name":"Addtocrt_addtocrt", "formatter":"showlink", "formatoptions": {"baseLinkUrl":"http://MySite.com/Store/AddToCart"} }, {"label":"Quantity", "name":"Stocks_valkogus", "editoptions":{"maxlength":10 } "editable":true } 

Update

The data from the server is in json format, and the line editing mode is used. rowData.Stocks_valkogus returns undefined.

I tried the code below. A warning window displays that valueVal is undefined. How to get the entered amount?

 {"name":"Addtocrt_addtocrt", "formatter":"dynamicLink", "formatoptions":{"onClick":addToCartOnClick }} function addToCartOnClick(rowId, iRow, iCol, cellValue, e) { var iCol = getColumnIndexByName($grid, 'Stocks_valkogus') , quantityVal = $('#' + $.jgrid.jqID(rowId) + '>td:nth-child(' + (iCol + 1) + '>input').val(); alert(iCol); // returns 3 alert(quantityVal); // returns undefined. window.location = 'Store/Details?' + $.param({ id: rowId, quantity: quantityVal }); } 

Answer 1

I understand the problem very well. I agree that the predefined formatter that can be used at present ('showlink' and 'link' formatters) is not flexible enough.

I can offer you another formatter that you could download here . Using formatting is very simple:

 {label: "AddToCart", name: "Addtocrt_addtocrt", formatter: "dynamicLink", formatoptions: { url: function (cellValue, rowId, rowData) { return '/Store/AddToCart' + rowId + '?' + $.param({ quantity: rowData.Stocks_valkogus }); } } } 

The url function, defined as a function, will be used in <a> as the value of the href attribute.

In addition to the url formatoptions 'dynamicLink' formatter supports target (with the same value as 'showlink'), cellValue , which can also be a function and onClick callback with rowId , iRow , iCol , cellValue , e as parameters. If an onClick callback is onClick , the url value will be ignored. Therefore, you can skip the url formatting option definition.

The demo demonstrates the use of 'dynamicLink' formatting:

The current formatter: 'dynamicLink' code formatter: 'dynamicLink' can be found below:

 /*global jQuery */ (function ($) { 'use strict'; /*jslint unparam: true */ $.extend($.fn.fmatter, { dynamicLink: function (cellValue, options, rowData) { // href, target, rel, title, onclick // other attributes like media, hreflang, type are not supported currently var op = {url: '#'}; if (typeof options.colModel.formatoptions !== 'undefined') { op = $.extend({}, op, options.colModel.formatoptions); } if ($.isFunction(op.target)) { op.target = op.target.call(this, cellValue, options.rowId, rowData, options); } if ($.isFunction(op.url)) { op.url = op.url.call(this, cellValue, options.rowId, rowData, options); } if ($.isFunction(op.cellValue)) { cellValue = op.cellValue.call(this, cellValue, options.rowId, rowData, options); } if ($.fmatter.isString(cellValue) || $.fmatter.isNumber(cellValue)) { return '<a' + (op.target ? ' target=' + op.target : '') + (op.onClick ? ' onclick="return $.fn.fmatter.dynamicLink.onClick.call(this, arguments[0]);"' : '') + ' href="' + op.url + '">' + (cellValue || '&nbsp;') + '</a>'; } else { return '&nbsp;'; } } }); $.extend($.fn.fmatter.dynamicLink, { unformat: function (cellValue, options, elem) { var text = $(elem).text(); return text === '&nbsp;' ? '' : text; }, onClick: function (e) { var $cell = $(this).closest('td'), $row = $cell.closest('tr.jqgrow'), $grid = $row.closest('table.ui-jqgrid-btable'), p, colModel, iCol; if ($grid.length === 1) { p = $grid[0].p; if (p) { iCol = $.jgrid.getCellIndex($cell[0]); colModel = p.colModel; colModel[iCol].formatoptions.onClick.call($grid[0], $row.attr('id'), $row[0].rowIndex, iCol, $cell.text(), e); } } return false; } }); }(jQuery)); 

I plan to put formatting code and some other plugins in jqGrid on github.

UPDATED: Free jqGrid extends the capabilities of formatter: "showlink" (see wiki article and answer ). Therefore, you do not need to use formatter: "dynamicLink" in the case of using the free jqGrid.