jQuery jqGrid cannot get custom formatter radio buttons value

Sailing_12
Sailing_12 used Ask the Experts™
on
I've created a custom formatter to render a pair of radio buttons for a bool field in jqGrid using the radioButtonFormatter function below.

Also have radio button markup in the myelem function below which is the editoptions:custom_element call to retain the formatting when user clicks in the cell (but not directly on a radio button).

This much works, but if user then clicks out of the cell, the myvalue function which is wired to editoptions:custom_value does not return the value, in fact the 'value' parameter being passed in with 'elem' and 'operation' is empty if I alert it out... So we end up having values reset to 0,no when they should'nt be.

Cannot figure out why the value is not available in the myvalue function.


	
								
case 6: //Two Options

elType = "custom";
format = radioButtonFormatter;
objColumn = { Type: rData.new_Type.Value, name: rData.new_FieldName, width: rData.new_Width, align: align, editable: editable, bulkeditable: rData.new_bulkeditable, edittype: elType,editoptions:{custom_element: myelem, custom_value: myvalue}, formatter: format };

Open in new window


	function myelem (value, options) {
		  
		  var elemStr = '';
		  
		  var _position = value.indexOf('checked=""') + 18;  
		  var _value = value.substr(_position, 1);
		  		  
		  if (_value == '0'){

				elemStr = '<div class="radioButtons">' + 
								'<input type="radio" name="' + options.id + '" value="0" checked />Inelg ' + 
								'<input type="radio" name="' + options.id + '" value="1" />Elg' + 
							'</div>';		  
		  }
		  else if (_value == '1'){
				elemStr = '<div class="radioButtons">' + 
								'<input type="radio" name="' + options.id + '" value="0" />Inelg ' + 
								'<input type="radio" name="' + options.id + '" value="1" checked />Elg' + 
							'</div>';			  
		  }
		  		  
          // return DOM element from jQuery object
          return $(elemStr)[0];

	}
		
	function myvalue(elem, operation, value) {						
		if(operation === 'get') {
		   alert(value);
		   return $(elem).val();
		} else if(operation === 'set') {
		   $('input',elem).val(value);
		}
	}	

Open in new window


    function radioButtonFormatter(cellvalue, options, rowObject) {

        var radioMarkup = "";
        var dynamicName = options.colModel.name + '_' + options.rowId;
        var disabled = "";

        if (options.colModel.editable == false) {
            disabled = 'disabled';
        }

            if (cellvalue == true) {
                radioMarkup = '<div class="radioButtons"><input type="radio" name="' + dynamicName + '" value="0" onclick="cancelEdit(\'' + options.rowId + '\'); onCellExit(' + options.rowId + ', \'' + options.colModel.name + '\',0 , ' + options.rowId + ', ' + options.pos + ' )" ' + disabled + '>Inelg&nbsp;&nbsp;<input type="radio" name="' + dynamicName + '" value="1" onclick="cancelEdit(\'' + options.rowId + '\'); onCellExit(' + options.rowId + ', \'' + options.colModel.name + '\',1 , ' + options.rowId + ', ' + options.pos + ' )" checked ' + disabled + '>Elg</div>';
            }
            else {
                radioMarkup = '<div class="radioButtons"><input type="radio" name="' + dynamicName + '" value="0" onclick="cancelEdit(\'' + options.rowIdd + '\'); onCellExit(' + options.rowId + ', \'' + options.colModel.name + '\',0 , ' + options.rowId + ', ' + options.pos + ' )" checked ' + disabled + '>Inelg&nbsp;&nbsp;<input type="radio" name="' + dynamicName + '" onclick="cancelEdit(\'' + options.rowId + '\'); onCellExit(' + options.rowId + ', \'' + options.colModel.name + '\',1 , ' + options.rowId + ', ' + options.pos + ' )" value="1" ' + disabled + '>Elg</div>';
            }

        return radioMarkup

    }

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2013
Awarded 2012

Commented:
Hi,

would it be possible for you to create a small sample page at .e.g Plnkr.co or Codepen.io?

Having a working sample would really help. If this is not possible, please post the complete page source as well as required data (e.g. JSON array ...).

Thanks.
Rainer
Pirate
Commented:
I solved this by rewriting the custom_value handler function as follow:

	function radioButtonVal(elem, operation, value) {						
		if(operation === 'get') {

			var returnValue;
			
			if($('.Inelg', this).is(':checked') == true){
				returnValue = false;
			}
			else if($('.Elg', this).is(':checked') == true){
				returnValue = true;				
			}
			
			return returnValue;
		   //return $(elem).val();
		} else if(operation === 'set') {
		   $('input',elem).val(value);
		}
	}	

Open in new window

	function radioButtonVal(elem, operation, value) {						
		if(operation === 'get') {

			var returnValue;
			
			if($('.Inelg', this).is(':checked') == true){
				returnValue = false;
			}
			else if($('.Elg', this).is(':checked') == true){
				returnValue = true;				
			}
			
			return returnValue;
		   //return $(elem).val();
		} else if(operation === 'set') {
		   $('input',elem).val(value);
		}
	}	

Open in new window

Sailing_12Pirate

Author

Commented:
Was able to figure this out with help from a code snippet I found here:

http://stackoverflow.com/questions/9111176/how-to-use-custom-control-in-jqgrid

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial