Custom formatters for jqGrid with onclick handlers

jqgrid.mabu.formatters.js

/*
* jqGrid - Custom Formatters (mabuCheckboxFormatter, mabuButtonFormatter)
* 
* The event handler will receive two arguments:
*          $(this) -- jQuery object from the control raising the event.
*          rowId -- The row id (this could be the row index, or the id of the row if key is specified.)
*
*
* If the event handler is a real function, method invokers for that function are created on $.fn.fmatter.invokers.
* They are created once, if you need to reset them for whatever reason you will have to do that yourself.
*
* Example 1:
*      formatter: 'mabuCheckboxFormatter',
*      formatoptions: { eventHandler: 'doSomeHandling' } //this will call the global doSomeHandling function
*
* Example 2:
*      formatter: 'mabuCheckboxFormatter',
*      formatoptions: { eventHandler: this.doSomeHandling, eventContext: this, controlStyle: "height:21px;width:40px;"} 
*      //this will call the doSomehandling method with the invocation context of this (whatever this is).
*
*/

(function ($) {
	"use strict";
    	//helper vars and functions
	var whiteSpaceRegex = /\s+/g;
	var createClickHandler = function (gridId, colIndex, currentRowId, eventHandler, thisContext) {

		//eventHandler must be a string or real function object.
		var clickHandler = eventHandler;

		if ($.isFunction(eventHandler)) {

			if ($.fn.fmatter.invokers === undefined) {
				$.fn.fmatter.invokers = {};
			}

			//create name for the method invoker
			var methodInvokerName = "jqGridMethodInvoker" + gridId.replace(whiteSpaceRegex, '')
                                                          + colIndex.replace(whiteSpaceRegex, '');

			//if you want to reset the formatters, you will have to do it yourself!
			if ($.fn.fmatter.invokers[methodInvokerName] === undefined) {

				$.fn.fmatter.invokers[methodInvokerName] = function ($control, rowId) {
					eventHandler.call(thisContext, $control, rowId);
				};
			}

			clickHandler = "$.fn.fmatter.invokers." + methodInvokerName;
		}

		return clickHandler + "($(this)," + currentRowId + ")";
	};

	var getStyleAttribute = function (options) {
		return (options.colModel !== undefined
            && !$.fmatter.isUndefined(options.colModel.formatoptions)
                && options.colModel.formatoptions.controlStyle) ?
            "style='" + options.colModel.formatoptions.controlStyle + "' " :
            "";
	};

	var getDisabledAttribute = function (cellValue, options, rowObject) {
		var result = "";

		if (options.colModel !== undefined
			&& !$.fmatter.isUndefined(options.colModel.formatoptions)
				&& options.colModel.formatoptions.disabled !== undefined) {

			if ($.isFunction(options.colModel.formatoptions.disabled)) {
				result = options.colModel.formatoptions.disabled(cellValue, options, rowObject) ?
							            "disabled=\"disabled\"" :
									       "";
			} else {
				result = (options.colModel.formatoptions.disabled === true) ?
							            "disabled=\"disabled\"" :
									       "";
			}
		}		
		return result;
	};

	var eventHandlerHasValue = function (eventHandler) {
		return eventHandler !== undefined && eventHandler !== null && eventHandler !== '';
	};

	//extending the jqGrid formatters
	$.extend($.fn.fmatter, {

		mabuCheckboxFormatter: function (cellValue, options, rowObject) {

			if ($.fmatter.isEmpty(cellValue) || $.fmatter.isUndefined(cellValue)) {
				cellValue = $.fn.fmatter.defaultFormat(cellValue, options.colModel.formatoptions);
			}

			//stringify the cellValue
			cellValue = cellValue + "";

			cellValue = cellValue.toLowerCase();

			var isChecked;
			var checkBoxValues = (options.colModel.editoptions) ? options.colModel.editoptions.value.split(":") : undefined;

			if (checkBoxValues && checkBoxValues.length && checkBoxValues.length === 2) {
				//checkBoxValues[1] should be the unchecked-falsly value; -1 means no match, so it must be true then.
				isChecked = cellValue.search(new RegExp(checkBoxValues[1], "i")) < 0;
			} else { //when there are no value options set we default to the ones below.
				isChecked = cellValue.search(/(false|0|no|off|undefined)/i) < 0;
			}

			var checkboxCheckedAttribute = isChecked ? " checked='checked' " : "";
			var offValueAttribute = isChecked ? "offval='off' " : "offval='no' ";
			var valueAttribute = "value='" + cellValue + "' ";
			var styleAttribute = getStyleAttribute(options);
			var disabledAttribute = getDisabledAttribute(cellValue, options, rowObject);

			var orgEventHandler = options.colModel.formatoptions.eventHandler;
			var onClickAttribute = "";
			if (eventHandlerHasValue(orgEventHandler)) {

				var clickHandler = createClickHandler(options.gid,
                                                      options.colModel.index,
                                                      options.rowId,
                                                      orgEventHandler,
                                                      options.colModel.formatoptions.eventContext);

				onClickAttribute = "onclick='" + clickHandler + "'";
			}

			var newFormattedCellValue =
                "<input " +
                    "type='checkbox' " +
                    onClickAttribute +
                    checkboxCheckedAttribute +
                    valueAttribute +
                    offValueAttribute +
                    disabledAttribute +
                    styleAttribute +
                " />";

			return newFormattedCellValue;
		},
		mabuButtonFormatter: function (cellValue, options, rowObject) {

			if ($.fmatter.isEmpty(cellValue) || $.fmatter.isUndefined(cellValue)) {
				cellValue = $.fn.fmatter.defaultFormat(cellValue, options.colModel.formatoptions);
			}

			//stringify cell value
			cellValue = cellValue + "";

			var valueAttribute = " value='" + cellValue + "' ";
			var styleAttribute = getStyleAttribute(options);
			var onClickAttribute = "";

			if (eventHandlerHasValue(options.colModel.formatoptions.eventHandler)) {

				var clickHandler = createClickHandler(options.gid,
                                                      options.colModel.index,
                                                      options.rowId,
                                                      options.colModel.formatoptions.eventHandler,
                                                      options.colModel.formatoptions.eventContext);

				onClickAttribute = "onclick='" + clickHandler + "'";
			}

			var newFormattedCellValue =
                "<input " +
                    "type='button' " +
                    onClickAttribute +
                    valueAttribute +
                    styleAttribute +
                " />";

			return newFormattedCellValue;
		}
	});

	$.extend($.fn.fmatter.mabuButtonFormatter, {
		unformat: function (cellValue, options, cellObject) {
			var ret = $('input[type=button]', cellObject).val();
			return ret;
		}
	});

	$.extend($.fn.fmatter.mabuCheckboxFormatter, {
		unformat: function (cellValue, options, cellObject) {
			var cbv = (options.colModel.editoptions) ? options.colModel.editoptions.value.split(":") : ["Yes", "No"];
			var ret = $('input[type=checkbox]', cellObject).is(":checked") ? cbv[0] : cbv[1];
			return ret;
		}
	});

})(jQuery);