Question

77

How to pass data to url from jqgrid row if hyperlink is clicked

rated 0 times [ 84] [ 7] / answers: 1 / hits: 16014 / 13 Years ago, fri, january 27, 2012, 12:00:00

jqGrid contains quantity column and add to cart button using colmodel below. Inline editing
is used to fill quantity.
If quantity is fileld and add to cart link on other column is clicked, entered quanty is not passed to AddToCart controller. Product id from id field in json data is passed correctly.

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

colmodel is:

{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

Data from server is in json format and row editing mode is used.
rowData.Stocks_valkogus returns undefined.

I tried code below. alert box shows that quantityVal is undefined.
How to retrieve entered quantity?

{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

    });

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gideons

Add To Favorites

Follow

Total Points: 197

Total Questions: 106

Total Answers: 108

Location: Moldova

Member since Sat, Jan 29, 2022

2 Years ago

gideons questions

1 How to disable previous date using HTML5 datetime-local input?

Mon, Nov 15, 21, 00:00, 3 Years ago

1 pointerdown vs onclick: what is the difference?

Tue, Nov 9, 21, 00:00, 3 Years ago

1 Handling input change for API call in React.JS

Sat, Jan 2, 21, 00:00, 3 Years ago

1 slickGoTo doesn't change active slide

Wed, Oct 28, 20, 00:00, 4 Years ago

1 How to show Base64 image on browser's new tab?

Thu, May 21, 20, 00:00, 4 Years ago

View All

answered 13 Years ago arturo · Accepted Answer

I understand the problem very good. I agree that both predefined formatter which one can use currently ('showlink' and 'link' formatters) are not flexible enough.

I can suggest you another formatter which you could download here. The usage of the formatter is very easy:

{label: AddToCart, name: Addtocrt_addtocrt, formatter: dynamicLink,

    formatoptions: {

        url: function (cellValue, rowId, rowData) {

            return '/Store/AddToCart' + rowId + '?' +

                $.param({

                    quantity: rowData.Stocks_valkogus

                });

        }

    }

}

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

Additionally to the url formatoptions the 'dynamicLink' formatter supports target option (with the same meaning as by 'showlink'), cellValue which can be also function and onClick callback with rowId, iRow, iCol, cellValue, e as parameters. If the onClick callback is defined the value of url will be ignored. So one can skip the definition of the formatter option url.

The demo demonstrate the usage of the 'dynamicLink' formatter:

enter

The current code of the formatter: 'dynamicLink' you can find 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 place the code of the formatter and some other plugins to jqGrid on the github.

UPDATED: Free jqGrid extends the options of formatter: showlink (see the wiki article and the answer). So one don't need to use the formatter: dynamicLink in case of usage free jqGrid.