why creating jqxGrid from function results error during edit?

[JMS786Participant]

Instead of creating jqxGrid by

$('jqxgriddata').jqxGrid(
  {
  width:850,
  columns: [
    {text: 'Link', datafield: 'link', cellsrenderer: linkrenderer},
    {...},
    {...}
  ]
});

..I’ve been using a global javascript function that look like this:

function sw_create_grid(name,h,grid) {
	//dimension add test: height1 = $("#page_header").height();
	if(arguments.length == 4){
		name = arguments[0];
		h = arguments[1]; w = arguments[2];
		grid = arguments[3];
	}else if (arguments.length == 3){
		name = arguments[0];
		h = arguments[1]; w = "100%";
		grid = arguments[2];		
	}
	
	//init	
	var arr_datafield = [];
	var obj_datafield = {};
	var arr_column = [];
	var obj_column = {};
	if (grid[2][0] == 'chk'){
		var with_chk = true;
	}else{
		var with_chk = false;
	}
	
	//define column
	var r = grid[0].length;
	for (x=0; x<r; x++){
		//default column setting		
		var width = 100;
		var edit = false;
		var align = 'left';
		var type = 'textbox';
		var df_type = 'string';
		var render = '';
		var format = '';
		var cellsformat = '';
		var initeditor = '';
		var createeditor = '';
		var cellsrenderer = ''; var linkrenderer = '';
		var validation = '';
		var aggr = false;
				
		//for special column (aggregates, combobox)
		var grid_enum = grid[2][x];
		if ( grid[2][x].length == 2 ) {
			grid_enum = grid[2][x][0];
			switch (grid[2][x][1]) {
				case 'aggr':
					aggr = !aggr;
				break;
			}
			
			switch (grid[2][x][0]){
				case 'com':
					var ddl = grid[2][x][1];
				break;				
			}
		}
		
		//validation function
		validation_notzero = function (cell, value) {
			if (!jQuery.isNumeric(value) && value.length > 0){
				return { result: false, message: "Quantity must be numeric" };
			}			
			if (value <= 0 && value.length > 0) {
				return { result: false, message: "Quantity must not be 0" };
			}
			return true;
		}
		
		switch (grid_enum){
			case 'num':
				width = 40;
				align = 'right'; //type='number';
				validation = validation_notzero;
			break;
			case 'mon':
				width = 90;
				align = 'right';
			break;
			case 'chk':
				type = 'checkbox';
				width = 30;
			break;
			case 'dat':
				type = 'date';
				cellsformat: "yyy-MM-dd HH:mm:ss";
			break;
			case 'lnk':
				/*cellsrenderer = function (row, column, value) {
					value = "/grid_test/index.php/inventory/item_detail/1";
					var format = { target: '"_blank"' };
					var html = $.jqx.dataFormat.formatlink(value, format);
					return html;
				}*/
				linkrenderer = function (row, column, value) {
					if (value.indexOf('#') != -1) {
						value = value.substring(0, value.indexOf('#'));
					}
					var format = { target: '"_blank"' };
					var html = $.jqx.dataFormat.formatlink(value, format);
					return html;
				}

				/*var linkrenderer = function (row, column, value) {
					if (value.indexOf('#') != -1) {
						value = value.substring(0, value.indexOf('#'));
					}
					var title = $('#jqxgrid').jqxGrid('getcellvalue', row, grid[0][x]);
					return "<a href='" + value + "' target='_blank'>" + title + "</a>";
				}*/
				/*var cellclass = function (row,columnfield,value){
					return 'link';	
				}*/
			break;
			case 'com':
				type = "combobox";		
				createeditor = function (row, column, editor) { 									
									editor.jqxComboBox({ source: ddl, promptText: 'Please Choose:'}); 
				}
				initeditor = //function (row, cellvalue, editor) { 
				function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
									var indexToSelect = -1;
									$.each(ddl, function (index) {
										if (this.value == "USD") {
											indexToSelect = index;
											return false;
										}
									});
									editor.jqxComboBox({ selectedIndex: indexToSelect, dropDownWidth: 100 }); 
				}
			break;
		}
		
		if ( grid[3][x] == 1){
			edit = true;
		}		
		if (aggr){
			obj_column = {text:grid[1][x], datafield:grid[0][x], columntype:type,
							cellsformat:cellsformat, width:width, editable:edit,
							createeditor:createeditor, initeditor:initeditor,
							validation: validation,
							//cellsrenderer:linkrenderer,
							cellsalign:align,aggregates:[{"":function(agrv,curv){if(curv){return accounting.unformat(agrv)+accounting.unformat(curv);}return agrv;}}]
			};
		}else{ //"cellsrenderer":render,
			obj_column = {text:grid[1][x], datafield:grid[0][x], columntype:type,
							//cellsformat:cellsformat, width:width, editable:edit,
							//createeditor:createeditor, initeditor:initeditor,
							cellsrenderer: linkrenderer,/*function (row, column, value) {
								if (value.indexOf('#') != -1) {
									value = value.substring(0, value.indexOf('#'));
								}
								var format = { target: '"_blank"' };
								var html = $.jqx.dataFormat.formatlink(value, format);
								return html;
							},*/
							
							//"cellclassname":cellclass,
							//validation: validation,
							cellsalign:align};	
		}	
		
		//obj_datafield = {"name":grid[0][x],"type":grid[2][x]};
		//console.log(obj_column);
		obj_datafield = {name:grid[0][x], type:df_type}; //, "format":cellsformat
		arr_datafield.push(obj_datafield);		
		arr_column.push(obj_column);
	}
	var source = {                
		datatype: "local",		
		datafields: arr_datafield,
		addrow: function (rowid, rowdata, position, commit) {commit(true);},
		deleterow: function (rowid, commit) {commit(true);},
		updaterow: function (rowid, newdata, commit) {commit(true);}
	};	
	
	//feature setting
	var grid_edit = false;
	var grid_sort = false;
	var grid_size = false;
	var grid_stat = false;
	var grid_aggr = false;	
	if (grid[4]){
		for (var i = 0; i < grid[4].length; i++){
			switch (grid[4][i]) {
				case 'edit': grid_edit = true;
				break;
				case 'sort': grid_sort = true;
				break;
				case 'size': grid_size = true;
				break;
				case 'stat': grid_stat = true;
				break;
				case 'aggr': grid_aggr = true;
				break;
			}
		}
	}
	
	var dataAdapter = new $.jqx.dataAdapter(source);
	$("#"+name).jqxGrid({
		height: h, 
		width: w,
		source : dataAdapter,
/*		handlekeyboardnavigation: function (event) {
          var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
          if (key == 9) {
              alert('Key = '+key);
              return true;
          }
      	},*/		
		//selectionmode: 'multiplerows', 
		selectionmode: 'checkbox', 
		editmode: 'dblclick',		
		//editmode: 'click',		
		editable: grid_edit, sortable: grid_sort, columnsresize: grid_size, 
		showstatusbar: grid_stat, showaggregates: grid_aggr,		
		enablehover: false, altrows: false,
		columns: arr_column		
	});
}

..then I have my own script to prepare the variable needed and create a grid.
It’s been working fine, but if the type is link column ( ‘lnk’, where what we inputted will become a link ) it always produce error in jqxgrid.edit.js when I doubleclicked the cell.

I’m using jqWidgets v3.2.2.

Do I miss something here?

[DimitarParticipant]

Hello JMS786,

What exactly is the error thrown by jqxgrid.edit.js? Do you initialize the grid in $(document).ready()? Please provide us with a JSFiddle example we can test to determine the source of the issue.

Best Regards,
Dimitar

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

[JMS786Participant]

The error is : (from Chrome)

Uncaught TypeError: Cannot read property 'row' of undefined jqxgrid.edit.js:7
a.extend._handledblclick jqxgrid.edit.js:7
(anonymous function) jqxgrid.js:7
x.event.dispatch jquery-2.0.3.js:5
y.handle

and Chrome detect on this following codes, find “var b=this._hittestrow(m,l);var h=b.row;” inside the code.

And Yes, it was initialized inside $(document.ready()..

[DimitarParticipant]

Hi JMS786,

Unfortunately, this information is insufficient for us to determine the source of the issue. Would you be able to provide us with an example we can test (preferably at JSFiddle)?

Best Regards,
Dimitar

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

[JMS786Participant]

Dear Dimitar,

Here it is.. http://jsfiddle.net/M9YfE/9/

My problem here is:
if I take out the comment /*… */ from line 183 to 190, and remove “linkrenderer,” in 182, the error does not exist, but the ‘link inside grid’ will be applied to all column (which is not the purpose).

But with the approach in which line 183 to 190 is commented /*..*/, it will show an error exactly on my previous reply.

Please let me know if you need more information.
Thanks for help.

Regards,
JMS786

[DimitarParticipant]

Hi JMS786,

To limit the cellsrenderer to just one column, you can do the following:

cellsrenderer: function (row, column, value) {
    if (column == "code") {
        if (value.indexOf('#') != -1) {
            value = value.substring(0, value.indexOf('#'));
        }
        var format = {
            target: '"_blank"'
        };
        var html = $.jqx.dataFormat.formatlink(value, format);
        return html;
    };
},

Best Regards,
Dimitar

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

[Author]

Posts