jQWidgets Forums

This topic contains 7 replies, has 2 voices, and was last updated by Bradford 10 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Custom editor and Renderer with multiple elements won't work. Posts

January 16, 2015 at 1:57 pm Custom editor and Renderer with multiple elements won't work. #65508

Participant

I am trying to use a jqxgrid for setting datatypes for my application. I need to display the datatype and conditionally if the datatype is array I need to capture the array element type and the array name. I am attempting to use a single cell in the grid for the type information. In the simple datatype case a single dropdown to specify the datatype is sufficient but in the case where the datatype is Array I need to display another dropdown for the arrayelement type and the array name. The code below mostly works in chrome but not at all in IE. in IE the click interaction with the type dropdown is captured by the underlying grid cell and that causes a conflict in the event processing and the editor is not properly invoked. In both IE and Chrome there is a problem with the initeditor function which seems to be either picking up the data from the most recently edited cell or failing completely to re-initialize the editor.

fiddle here: http://jsfiddle.net/MysU4/160/


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is illustrated how to create custom editors for jqxGrid. The "First Name" and "Last Name" columns use the jqxInput widget as a cell editor. The "Products" column
        use a jqxDropDownList widget with enabled Checkboxes  as an editor. The "Quantity" column's editor is jqxSlider.
    </title>
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script>  
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script>  
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js"></script>  
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        

        // prepare the data
        var data = new Array();
        data.push({ "isnull": "false","name":"$result","paramname":"$result","paramnull":"false","paramdir":"IN","paramtype":"String","paramvalue":"","paramarrname":"","paramarrtype":"String","type":"{\"name\":\"$result\",\"type\":\"String\",\"dir\":\"IN\",\"arrayname\":\"\",\"arraytype\":\"String\"}","detail":{"paramarrname":"","paramarrtype":"Strng","paramdir":"IN","paramname":"$result","paramnull":"false","paramtype":"String","paramvalue":"","type":"{\"name\":\"$result\",\"type\":\"String\",\"dir\":\"IN\",\"arrayname\":\"\",\"arraytype\":\"String\"}"}});
        data.push({ "isnull": "false","name":"$smile","paramname":"$smile","paramnull":"false","paramdir":"IN","paramtype":"Double","paramvalue":"","paramarrname":"","paramarrtype":"String","type":"{\"name\":\"$smile\",\"type\":\"Double\",\"dir\":\"IN\",\"arrayname\":\"\",\"arraytype\":\"String\"}","detail":{"paramarrname":"","paramarrtype":"Strng","paramdir":"IN","paramname":"$smile","paramnull":"false","paramtype":"Double","paramvalue":"","type":"{\"name\":\"$smile\",\"type\":\"Double\",\"dir\":\"IN\",\"arrayname\":\"\",\"arraytype\":\"String\"}"}});
        data.push({ "isnull": "false","name":"$manythings","paramname":"$manythings","paramnull":"false","paramdir":"IN","paramtype":"Array","paramvalue":"","paramarrname":"things","paramarrtype":"String","type":"{\"name\":\"$manythings\",\"type\":\"Array\",\"dir\":\"IN\",\"arrayname\":\"things\",\"arraytype\":\"String\"}","detail":{"paramarrname":"things","paramarrtype":"Strng","paramdir":"IN","paramname":"$manythings","paramnull":"false","paramtype":"Array","paramvalue":"","type":"{\"name\":\"$manythings\",\"type\":\"Array\",\"dir\":\"IN\",\"arrayname\":\"things\",\"arraytype\":\"String\"}"}});
        var source =
        {
            datatype: 'array',
            dataFields: [
                { name: 'paramname', type: 'string' },
                { name: 'paramnull', type: 'bool' },
                { name: 'paramtype', type: 'string' },
                { name: 'paramdir', type: 'string' },
                { name: 'paramarrtype', type: 'string' },
                { name: 'paramarrname', type: 'string' },
                { name: 'type' }//,,type: 'json'
            ],
            localdata: data
        };
        
        		                      
        
		var dataAdapter = new $.jqx.dataAdapter(source);
		
        var createMyEditor = function(row, cellValue, editor, cellText, width, height)
        {
            var element = $('<div tabIndex=0 style="position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px;"></div>');
            editor.append(element);
            element.jqxCheckBox({ animationShowDelay: 0, animationHideDelay: 0, width: 16, height: 16});
        }

        var initMyEditor = function (row, cellValue, editor, cellText, width, height) {
            var checkBoxHTMLElement = editor.find('div:first');
            checkBoxHTMLElement.jqxCheckBox({ checked: cellValue.toString() == "true" });
        }

        var getMyEditorValue = function (row, cellValue, editor) {
                var checkBoxHTMLElement = editor.find('div:first');
                return checkBoxHTMLElement.val();
        }
		
		
        var createParamTypeEditor = function(row,cellValue,editor,cellText,width,height){
			var sysVar = false;
			JSONValue = JSON.parse(cellValue);
			var dis = "";
			editor.append(//'<div id=\"'+row+'paramTypeEditor\" >'+
					'<select '+dis+' id=\"'+row+'paramTypeSelect\" onchange=\"alert(\'things changed\');'+
										'{if(\'Array\'==value){'+
											'$(\'#'+row+'arrayTypeLabel\').css(\'visibility\',\'visible\');'+
											'$(\'#'+row+'arrayTypeSelect\').css(\'visibility\',\'visible\');'+
											'$(\'#'+row+'arrayNameLabel\').css(\'visibility\',\'visible\');'+
											'$(\'#'+row+'arrayNameInput\').css(\'visibility\',\'visible\');'+
										'}else{'+
											'$(\'#'+row+'arrayTypeLabel\').css(\'visibility\',\'hidden\');'+
											'$(\'#'+row+'arrayTypeSelect\').css(\'visibility\',\'hidden\');'+
											'$(\'#'+row+'arrayNameLabel\').css(\'visibility\',\'hidden\');'+
											'$(\'#'+row+'arrayNameInput\').css(\'visibility\',\'hidden\');'+
										'}'+
									'}'+
						'\">'+
					'<option onClick="alert(\'dont navigate\');" value=\"String\" '+(JSONValue.type == 'String'?'selected':'')+' >String<\/option>'+
					'<option value=\"Date\" '+(JSONValue.type == 'Date'?'selected':'')+' >Date<\/option>'+
					'<option value=\"Double\" '+(JSONValue.type == 'Double'?'selected':'')+'  >Double<\/option>'+
					'<option value=\"Integer\" '+(JSONValue.type == 'Integer'?'selected':'')+'  >Integer<\/option>'+
					'<option value=\"Array\" '+(JSONValue.type == 'Array'?'selected':'')+'  >Array<\/option>'+
					'<\/select>'+
					'<label id=\"'+row+'dirLabel\" >  Dir:</label>'+
					'<select '+dis+' id=\"'+row+'dirSelect\" '+
					'\">'+
					'<option value=\"IN\" '+(JSONValue.dir=='IN'?'selected':'')+' >IN<\/option>'+
					'<option value=\"OUT\" '+(JSONValue.dir=='OUT'?'selected':'')+' >OUT<\/option>'+
					'<\/select>'+
					'<label id=\"'+row+'arrayTypeLabel\" '+(JSONValue.type == 'Array'?'':'style=\"visibility:hidden\"')+'>  Array Type:</label>'+
					'<select '+dis+' id=\"'+row+'arrayTypeSelect\" '+(JSONValue.type == 'Array'?'':'style=\"visibility:hidden\" ')+' '+
					'\">'+
					'<option value=\"String\" '+(JSONValue.arraytype == 'String'?'selected':'')+' >String<\/option>'+
					'<option value=\"Date\" '+(JSONValue.arraytype == 'Date'?'selected':'')+' >Date<\/option>'+
					'<option value=\"Double\" '+(JSONValue.arraytype == 'Double'?'selected':'')+'  >Double<\/option>'+
					'<option value=\"Integer\" '+(JSONValue.arraytype == 'Integer'?'selected':'')+'  >Integer<\/option>'+
					'<\/select>'+
					'<label id=\"'+row+'arrayNameLabel\" '+(JSONValue.type == 'Array'?'':'style=\"visibility:hidden\"')+'>  Array Name:</label>'+
					'<input '+dis+'  id=\"'+row+'arrayNameInput\" '+(JSONValue.type == 'Array'?'':' style=\"visibility:hidden\" ')+' value=\"'+JSONValue.arrayname+'\"  \/>');
//					'<\/div>');
        };
        
        var initParamTypeEditor = function(row,cellValue,editor,cellText,width,height){
        	alert("this is the init");
			var sysVar = false;
			JSONValue = JSON.parse(cellValue);
			editor.find('#'+row+'paramTypeSelect').val(JSONValue.type);
			editor.find('#'+row+'dirSelect').val((JSONValue.dir=='IN'?'in':'out'));
			editor.find('#'+row+'arrayTypeSelect').val(JSONValue.arraytype);
			editor.find('#'+row+'arrayNameInput').val(JSONValue.arrayname);
        };
        
        var getParamTypeEditorValue = function(row,cellValue,editor,cellText,width,height){
        	var retval = JSON.stringify({name:$('#jqxgrid').jqxGrid('getcellvalue',row, 'paramname'),
				 type:editor.find('#'+row+'paramTypeSelect').val(),
				 dir:editor.find('#'+row+'dirSelect').val(),
				 arrayname:(editor.find('#'+row+'paramTypeSelect').val() === "Array")?editor.find('#'+row+'arrayNameInput').val():'',
				 arraytype:editor.find('#'+row+'arrayTypeSelect').val()}
        		);
        	return retval;
        };
        
        var paramTypeCellsRenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
			var sysVar = false;
//			var oldValue = $('#'+params.name+'grid').jqxGrid('getcellvalue', row, 'type');
			JSONValue = JSON.parse(value);
			var dis = '';
				return defaulthtml.substr(0,defaulthtml.indexOf('>')+1)+JSONValue.type+
					'<label id=\"'+row+'dirLabel\" >  Dir:</label>'+JSONValue.dir+
					'<label id=\"'+row+'arrayTypeLabel\" '+(JSONValue.type == 'Array'?'':'style=\"visibility:hidden\"')+'>  Array Type:</label>'+
					(JSONValue.type == 'Array'?JSONValue.arraytype:'')+
					'<label id=\"'+row+'arrayNameLabel\" '+(JSONValue.type == 'Array'?'':'style=\"visibility:hidden\"')+'>  Array Name:</label>'+
					(JSONValue.type == 'Array'?JSONValue.arrayname:'')+
					defaulthtml.substr(defaulthtml.indexOf('/div')-1);
        }; 

		var columns = [
		                { text: 'Name', datafield: 'paramname', width:'10%', editable : false },
		                { text: 'Can Be Null', datafield: 'paramnull',columntype: 'custom', width:'10%', editable : true,
		                    createeditor: createMyEditor, initeditor: initMyEditor, geteditorvalue: getMyEditorValue
		                },
		                {
		                      text: 'Type', 
		                      columntype: 'template', 
		                      datafield: 'type',
		                      width: '80%',
		                      editable : true ,
		                      cellsrenderer:paramTypeCellsRenderer,
		                      createeditor: createParamTypeEditor, 
		                      initeditor: initParamTypeEditor, 
		                      geteditorvalue: getParamTypeEditorValue
		                }
		            ];

		
		
		var gridSettings =
		{
			editmode: 'click',
			altrows: true,
			sortable: true,
            width: '95%',
            autorowheight:true,
            autoheight: true,
            pageable: false,
            pagesize: 5,
            pagesizeoptions: ['5','10','20'],
            editable: true,
            source: dataAdapter,
            columns: columns,
            columnsresize: true,
            selectionmode: 'singlecell'
        };
		var width;
		
		$grid = $('#jqxgrid').jqxGrid(gridSettings);
		
		$('#jqxgrid').on('cellEndEdit', function (event) {
			state.currentQuery.Response.Queries.query.queryDetail.queryDetailObj.queryparamdetail[event.args.rowindex][event.args.datafield] = event.args.value;
		 });

    })
</script>
</head>
<body class='default'>
<div id="jqxgrid"></div>
</body>
</html>

January 16, 2015 at 2:12 pm Custom editor and Renderer with multiple elements won't work. #65511

Peter Stoev

Keymaster

Hi Bradford,

initeditor is supposed to initialize an Editor using the current cell value. geteditorvalue should return the Editor’s value and so the Grid will save it. A problem in this code is that geteditorvalue uses “getcellvalue” which is incorrect. “geteditorvalue” should use only the editor values and return appropriate data to the Grid. Using “getcellvalue” within cellsrenderer is not correct, too. There you should use only the parameters passed by the Grid. Also the provided sample does not run at all in IE. I tested it with IE11. Still haven’t tried with older versions of IE. I would suggest you to use our editors or at least our widgets as editors in our Grid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 16, 2015 at 4:21 pm Custom editor and Renderer with multiple elements won't work. #65518

Bradford

Participant

Thanks for the prompt reply – I’ve got this working in Chrome but can’t get it to work in IE. Also, I cannot seem to replicate the mulitple element nature of this editor using jqx widgets as the dropdowns instead of raw html. I have tried appending two elements containing jqxdropdowns to the editor but only the first will display. Can you show me an example of how to do that?

My call to ‘getcellvalue’ in the getEditorValue was pulling a bit of data from an adjacent cell in the same row to make the JSON correct for the cellsRenderer. I have removed the references to ‘getcellvalue’ from the geteditorvalue call and from the cellsrenderer.

My attempt to add two jqxDropDownList elements to the editor can be seen in the comments in the editor now. Can you provide an example which works similar to how this code works in chrome but uses the jqxwidgets for the input controls instead of raw html?

updated fiddle here:
http://jsfiddle.net/MysU4/161/


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is illustrated how to create custom editors for jqxGrid. The "First Name" and "Last Name" columns use the jqxInput widget as a cell editor. The "Products" column
        use a jqxDropDownList widget with enabled Checkboxes  as an editor. The "Quantity" column's editor is jqxSlider.
    </title>
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script>  
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script>  
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js"></script>  
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        

        // prepare the data
        var data = new Array();
        data.push({ "isnull": "false","name":"$result","paramname":"$result","paramnull":"false","paramdir":"IN","paramtype":"String","paramvalue":"","paramarrname":"","paramarrtype":"String","type":"{\"name\":\"$result\",\"type\":\"String\",\"dir\":\"IN\",\"arrayname\":\"\",\"arraytype\":\"String\"}","detail":{"paramarrname":"","paramarrtype":"Strng","paramdir":"IN","paramname":"$result","paramnull":"false","paramtype":"String","paramvalue":"","type":"{\"name\":\"$result\",\"type\":\"String\",\"dir\":\"IN\",\"arrayname\":\"\",\"arraytype\":\"String\"}"}});
        data.push({ "isnull": "false","name":"$smile","paramname":"$smile","paramnull":"false","paramdir":"IN","paramtype":"Double","paramvalue":"","paramarrname":"","paramarrtype":"String","type":"{\"name\":\"$smile\",\"type\":\"Double\",\"dir\":\"IN\",\"arrayname\":\"\",\"arraytype\":\"String\"}","detail":{"paramarrname":"","paramarrtype":"Strng","paramdir":"IN","paramname":"$smile","paramnull":"false","paramtype":"Double","paramvalue":"","type":"{\"name\":\"$smile\",\"type\":\"Double\",\"dir\":\"IN\",\"arrayname\":\"\",\"arraytype\":\"String\"}"}});
        data.push({ "isnull": "false","name":"$manythings","paramname":"$manythings","paramnull":"false","paramdir":"IN","paramtype":"Array","paramvalue":"","paramarrname":"things","paramarrtype":"String","type":"{\"name\":\"$manythings\",\"type\":\"Array\",\"dir\":\"IN\",\"arrayname\":\"things\",\"arraytype\":\"String\"}","detail":{"paramarrname":"things","paramarrtype":"Strng","paramdir":"IN","paramname":"$manythings","paramnull":"false","paramtype":"Array","paramvalue":"","type":"{\"name\":\"$manythings\",\"type\":\"Array\",\"dir\":\"IN\",\"arrayname\":\"things\",\"arraytype\":\"String\"}"}});
        var source =
        {
            datatype: 'array',
            dataFields: [
                { name: 'paramname', type: 'string' },
                { name: 'paramnull', type: 'bool' },
                { name: 'paramtype', type: 'string' },
                { name: 'paramdir', type: 'string' },
                { name: 'paramarrtype', type: 'string' },
                { name: 'paramarrname', type: 'string' },
                { name: 'type' }//,,type: 'json'
            ],
            localdata: data
        };
        
        		                      
        
		var dataAdapter = new $.jqx.dataAdapter(source);
		
        var createMyEditor = function(row, cellValue, editor, cellText, width, height)
        {
            var element = $('<div tabIndex=0 style="position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px;"></div>');
            editor.append(element);
            element.jqxCheckBox({ animationShowDelay: 0, animationHideDelay: 0, width: 16, height: 16});
        }

        var initMyEditor = function (row, cellValue, editor, cellText, width, height) {
            var checkBoxHTMLElement = editor.find('div:first');
            checkBoxHTMLElement.jqxCheckBox({ checked: cellValue.toString() == "true" });
        }

        var getMyEditorValue = function (row, cellValue, editor) {
                var checkBoxHTMLElement = editor.find('div:first');
                return checkBoxHTMLElement.val();
        }
		
		
        var createParamTypeEditor = function(row,cellValue,editor,cellText,width,height){
			var sysVar = false;
			JSONValue = JSON.parse(cellValue);
			var dis = "";
//			var element1= $('<div tabIndex=0 ></div>');
//			element1.jqxDropDownList({autoDropDownHeight: true, source: ['United States', 'Germany', 'United Kingdom']});
//			var element2= $('<div tabIndex=0 ></div>');
//			element2.jqxDropDownList({autoDropDownHeight: true, source: ['silly', 'sally', 'sully']});
//            editor.append(element1);
//            editor.append(element2);

			editor.append(//'<div id=\"'+row+'paramTypeEditor\" >'+
					'<select '+dis+' id=\"paramTypeSelect\" onchange=\"'+
										'{if(\'Array\'==value){'+
											'$(\'#arrayTypeLabel\').css(\'visibility\',\'visible\');'+
											'$(\'#arrayTypeSelect\').css(\'visibility\',\'visible\');'+
											'$(\'#arrayNameLabel\').css(\'visibility\',\'visible\');'+
											'$(\'#arrayNameInput\').css(\'visibility\',\'visible\');'+
										'}else{'+
											'$(\'#arrayTypeLabel\').css(\'visibility\',\'hidden\');'+
											'$(\'#arrayTypeSelect\').css(\'visibility\',\'hidden\');'+
											'$(\'#arrayNameLabel\').css(\'visibility\',\'hidden\');'+
											'$(\'#arrayNameInput\').css(\'visibility\',\'hidden\');'+
										'}'+
									'}'+
						'\">'+
					'<option onClick="alert(\'dont navigate\');" value=\"String\" '+(JSONValue.type == 'String'?'selected':'')+' >String<\/option>'+
					'<option value=\"Date\" '+(JSONValue.type == 'Date'?'selected':'')+' >Date<\/option>'+
					'<option value=\"Double\" '+(JSONValue.type == 'Double'?'selected':'')+'  >Double<\/option>'+
					'<option value=\"Integer\" '+(JSONValue.type == 'Integer'?'selected':'')+'  >Integer<\/option>'+
					'<option value=\"Array\" '+(JSONValue.type == 'Array'?'selected':'')+'  >Array<\/option>'+
					'<\/select>'+
					'<label id=\"dirLabel\" >  Dir:</label>'+
					'<select '+dis+' id=\"dirSelect\" '+
					'\">'+
					'<option value=\"IN\" '+(JSONValue.dir=='IN'?'selected':'')+' >IN<\/option>'+
					'<option value=\"OUT\" '+(JSONValue.dir=='OUT'?'selected':'')+' >OUT<\/option>'+
					'<\/select>'+
					'<label id=\"arrayTypeLabel\" '+(JSONValue.type == 'Array'?'':'style=\"visibility:hidden\"')+'>  Array Type:</label>'+
					'<select '+dis+' id=\"arrayTypeSelect\" '+(JSONValue.type == 'Array'?'':'style=\"visibility:hidden\" ')+' '+
					'\">'+
					'<option value=\"String\" '+(JSONValue.arraytype == 'String'?'selected':'')+' >String<\/option>'+
					'<option value=\"Date\" '+(JSONValue.arraytype == 'Date'?'selected':'')+' >Date<\/option>'+
					'<option value=\"Double\" '+(JSONValue.arraytype == 'Double'?'selected':'')+'  >Double<\/option>'+
					'<option value=\"Integer\" '+(JSONValue.arraytype == 'Integer'?'selected':'')+'  >Integer<\/option>'+
					'<\/select>'+
					'<label id=\"arrayNameLabel\" '+(JSONValue.type == 'Array'?'':'style=\"visibility:hidden\"')+'>  Array Name:</label>'+
					'<input '+dis+'  id=\"arrayNameInput\" '+(JSONValue.type == 'Array'?'':' style=\"visibility:hidden\" ')+' value=\"'+JSONValue.arrayname+'\"  \/>'
//					'<\/div>'
					);
        };
        
        var initParamTypeEditor = function(row,cellValue,editor,cellText,width,height){
//        	alert("this is the init");
			var sysVar = false;
			JSONValue = JSON.parse(cellValue);
			editor.find('#paramTypeSelect').val(JSONValue.type);
			if (JSONValue.type == 'Array'){
				editor.find('#arrayTypeLabel').css('visibility','visible');
				editor.find('#arrayTypeSelect').css('visibility','visible');
				editor.find('#arrayNameLabel').css('visibility','visible');
				editor.find('#arrayNameInput').css('visibility','visible');
			}else{
				editor.find('#arrayTypeLabel').css('visibility','hidden');
				editor.find('#arrayTypeSelect').css('visibility','hidden');
				editor.find('#arrayNameLabel').css('visibility','hidden');
				editor.find('#arrayNameInput').css('visibility','hidden');
			}

			editor.find('#dirSelect').val(JSONValue.dir);
			editor.find('#arrayTypeSelect').val(JSONValue.arraytype);
			editor.find('#arrayNameInput').val(JSONValue.arrayname);
        };
        
        var getParamTypeEditorValue = function(row,cellValue,editor,cellText,width,height){
        	var retval = JSON.stringify({type:editor.find('#paramTypeSelect').val(),
				 dir:editor.find('#dirSelect').val(),
				 arrayname:(editor.find('#paramTypeSelect').val() === "Array")?editor.find('#arrayNameInput').val():'',
				 arraytype:editor.find('#arrayTypeSelect').val()}
        		);
        	return retval;
        };
        
        var paramTypeCellsRenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
			var sysVar = false;
			JSONValue = JSON.parse(value);
			var dis = '';
				return defaulthtml.substr(0,defaulthtml.indexOf('>')+1)+JSONValue.type+
					'<label id=\"'+row+'dirLabel\" >  Dir:</label>'+JSONValue.dir+
					'<label id=\"'+row+'arrayTypeLabel\" '+(JSONValue.type == 'Array'?'':'style=\"visibility:hidden\"')+'>  Array Type:</label>'+
					(JSONValue.type == 'Array'?JSONValue.arraytype:'')+
					'<label id=\"'+row+'arrayNameLabel\" '+(JSONValue.type == 'Array'?'':'style=\"visibility:hidden\"')+'>  Array Name:</label>'+
					(JSONValue.type == 'Array'?JSONValue.arrayname:'')+
					defaulthtml.substr(defaulthtml.indexOf('/div')-1);
        }; 

		var columns = [
		                { text: 'Name', datafield: 'paramname', width:'10%', editable : false },
		                { text: 'Can Be Null', datafield: 'paramnull',columntype: 'custom', width:'10%', editable : true,
		                    createeditor: createMyEditor, initeditor: initMyEditor, geteditorvalue: getMyEditorValue
		                },
		                {
		                      text: 'Type', 
		                      columntype: 'template', 
		                      datafield: 'type',
		                      width: '80%',
		                      editable : true ,
		                      cellsrenderer:paramTypeCellsRenderer,
		                      createeditor: createParamTypeEditor, 
		                      initeditor: initParamTypeEditor, 
		                      geteditorvalue: getParamTypeEditorValue
		                }
		            ];

		
		
		var gridSettings =
		{
			editmode: 'click',
			altrows: true,
			sortable: true,
            width: '95%',
            autorowheight:true,
            autoheight: true,
            pageable: false,
            pagesize: 5,
            pagesizeoptions: ['5','10','20'],
            editable: true,
            source: dataAdapter,
            columns: columns,
            columnsresize: true,
            selectionmode: 'singlecell'
        };
		var width;
		
		$grid = $('#jqxgrid').jqxGrid(gridSettings);
		
		$('#jqxgrid').on('cellEndEdit', function (event) {
			state.currentQuery.Response.Queries.query.queryDetail.queryDetailObj.queryparamdetail[event.args.rowindex][event.args.datafield] = event.args.value;
		 });

    })
</script>
</head>
<body class='default'>
<div id="jqxgrid"></div>
</body>
</html>

January 16, 2015 at 4:29 pm Custom editor and Renderer with multiple elements won't work. #65519

Bradford

Participant

What I get from the attempt to use two jqxdropdownlists in the same celleditor is that the first one renders and the second one is not displayed. Is it possible that this can be remedied with some styling? I cannot discover from inspecting the resulting html what is the cause. Both the dropdown’s get rendered to the html but only one displays in the cell display in the grid.

January 16, 2015 at 4:31 pm Custom editor and Renderer with multiple elements won't work. #65520

Bradford

Participant

Is this something that is better suited for the templateeditor rather than the customeditor? I can’t find examples using the templateeditor…..

January 16, 2015 at 4:49 pm Custom editor and Renderer with multiple elements won't work. #65527

Peter Stoev

Keymaster

Hello Bradford,

The Custom Column Editor sample uses “template” editor. The Custom Row Editor sample uses “column” editor. In the demos, these are one after another.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

January 16, 2015 at 4:49 pm Custom editor and Renderer with multiple elements won't work. #65528

Bradford

Participant

Should I be using columngroups to create a group of columns with their own individual editors which combine to provide this functionality?

January 20, 2015 at 3:25 pm Custom editor and Renderer with multiple elements won't work. #65694

Bradford

Participant

Is it possible to use more than one jqxwidget (dropdowlist in this case) within a single cell of a jqxgrid thru the use of
cellsrenderer:paramTypeCellsRenderer,
createeditor: createParamTypeEditor,
initeditor: initParamTypeEditor,
geteditorvalue: getParamTypeEditorValue

To date, I have been unable to configure renderer and editor such that it can display multiple dropdownlist widgets within a single jqxgrid cell. Is this explicitly denied?

Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.