[jas-Member]

In that case is there a git repository that is publicly accessible from jqwidgets.com?

From a developer standpoint implementation of your product (adhering to the licensing etc) would be much simpler and easier to keep the internal jqWidget libraries up to date with the use of a submodule implementation.

I realize this is an infrastructure related question, but I thought this would be a nice feature allowing for re-distributable projects the ability to keep the core jqWidget dependencies up to date.

Thanks for a great product!

[jas-Member]

Mark as solved. I had my syntax wrong for the $(‘#selector’).popup(‘open’) call to the

attributes necessary for the jquery-mobile $.popup() functionality.

[jas-Member]

Fair enough, I wasn’t aware of the JS Date Object so I simply modified the contents of the ‘valDate()’ function I am using to ensure the client side column validation is accurate to the following…

function valDate(obj)
{
	/* attempt to correct date format */
	if (!/^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{4}$/.test(obj)){
		var d = new Date()
		obj = [d.getMonth()+1, d.getDate(), d.getFullYear()].join('/');
	}
	return (/^[\d+]{1,2}\/[\d+]{1,2}\/[\d+]{4}$/.test(obj)) ?
		true : {result: false, message: 'Date is invalid [mm/dd/yyyy]' }
}

[jas-Member]

Hello Peter,

Thanks for the prompt response. I understood the ‘cellsformat’ option and have set this to the appropriate value (I.E. cellsformat: ‘MM/dd/yyyy’) which has resolved the display format for the cell in question.

However upon initialization of the ‘validation’ event (I.E. valDate(value), in this case) the value is passed as a UTC format. I am assuming the ‘initeditor’ callback in the example above is not correct and I must also specify the same format within the ‘createeditor’ callback? Could you perhaps show an example of this? Thanks in advance.

[jas-Member]

Hello Peter,

Great, thanks for that. I have been scouring the API but overlooked this method.

[jas-Member]

Errr… I mean default width set to 0 vs. hidden.

[jas-Member]

Just so your aware, as a work around I loaded the grid with the following setting…

$(“#jqxgrid”).jqxGrid(
{
…
width: window.innerWidth,
…
});

Though not a real complete solution it seems to overcome the limitation imposed by the jQuery Mobile framework’s collapsible content area as a hidden element holding the gridview on page load.

[jas-Member]

Well then it is because I am loading it within a collapsed jQuery Mobile UI component then. Is there a way to force a refresh with the ‘ready’ callback?

[jas-Member]

The only thing I can see that would allow recreation of the problem would be to use an ajax loader (besides the built in method supplied with the $.jqx.dataAdapter()) like so…

$.ajax({
  url: 'http://server.com/path/to/json/data',
  success: function(x, status, xhr) {
   _grid(x);
  }
});
function _grid(obj){
  // your code from previous post
}

[jas-Member]

Sure. A working example can be found @ Demo.

System details:
Browser: Firefox 19.0a1
OS & Kernel: Fedora Linux 15 (Linux laptop 2.6.43.8-1.fc15.x86_64 #1 SMP Mon Jun 4 20:33:44 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux)
jqWidgets: 2.7

The code in question…

  $(document).ready(function(){
	$('#current-inventory').offline({
	  appID:'MLIB-Inventory',
	  url: 'http://new-inventory.scl.utah.edu/?do=current',
	  debug: true,
	  callback: function(){
		_display($(this));
	  }
	});
	function _display(obj){
	  var theme = getDemoTheme();
	  var customsortfunc = function (column, direction) {
		var sortdata = new Array();
		if (direction == 'ascending') direction = true;
		if (direction == 'descending') direction = false;
		if (direction != null) {
		  for (i = 0; i < obj.length; i++) {
			sortdata.push(obj[i]);
		  }
		} else {
		  sortdata = obj;
		}
		var tmpToString = Object.prototype.toString;
		Object.prototype.toString = (typeof column == "function") ? column : function () { return this[column] };
		if (direction != null) {
		  sortdata.sort(compare);
		  if (!direction) {
			  sortdata.reverse();
		  }
		}
		source.localdata = sortdata;
		$("#jqxgrid").jqxGrid('databind', source, 'sort');
		$("#jqxgrid").jqxGrid('savestate');
		Object.prototype.toString = tmpToString;
	  };
	  var compare = function (value1, value2) {
		value1 = String(value1).toLowerCase();
		value2 = String(value2).toLowerCase();
		try {
		  var tmpvalue1 = parseFloat(value1);
		  if (isNaN(tmpvalue1)) {
			if (value1 < value2) { return -1; }
			if (value1 > value2) { return 1; }
		  } else {
			var tmpvalue2 = parseFloat(value2);
			if (tmpvalue1 < tmpvalue2) { return -1; }
			if (tmpvalue1 > tmpvalue2) { return 1; }
		  }
		} catch (error) {
		  var er = error;
		}
		return 0;
	  };
	  $('#export-csv').on('click', function(){
		$("#jqxgrid").jqxGrid('exportdata', 'csv', _date()+'-MLIB-Inventory');
	  });
	  $('#export-pdf').on('click', function(){
		$("#jqxgrid").jqxGrid('exportdata', 'pdf', _date()+'-MLIB-Inventory');
	  });
	  $('#export-xls').on('click', function(){
		$("#jqxgrid").jqxGrid('exportdata', 'xls', _date()+'-MLIB-Inventory');
	  });
	  $("#jqxgrid").on("pagesizechanged", function (event) {
		$("#jqxgrid").jqxGrid('savestate');
	  });
	  var source = {
		localdata: obj,
		sort: customsortfunc,
		datafields:[
		  { name: 'Computer', type: 'string' },
		  { name: 'SKU', type: 'string' },
		  { name: 'Serial', type: 'string' },
		  { name: 'UUIC', type: 'string' },
		  { name: 'MSerial', map: 'Monitor>0>Serial', type: 'string' },
		  { name: 'MSKU', map: 'Monitor>0>SKU', type: 'string' }
		],
		datatype: "json"
	  };
	  var dataAdapter = new $.jqx.dataAdapter(source);
	  $("#jqxgrid").on('cellendedit', function (event) {
		var args = event.args;
		//$("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
	    // call offline to send edited row contents
	  });
	  $("#jqxgrid").jqxGrid({
		autoshowloadelement: true,
		width: '100%',
		columnsmenuwidth: '20%',
		altrows: true,
		pagesizeoptions: ['5', '10', '20', '30', '40', '50'],
		source: dataAdapter,
		theme: theme,
		sortable: true,
		pageable: true,
		autoheight: true,
		editable: true,
		selectionmode: 'multiplecellsadvanced',
		ready: function () {
		  $('#gridR').jqxGrid('autoresizecolumns', 'cells');
		  $("#jqxgrid").jqxGrid('loadstate', $("#jqxgrid").jqxGrid('getstate'));
		  $("#jqxgrid").jqxGrid('sortby', 'Hostname', 'asc');
		},
		columns: [
		  { text: 'Hostname', datafield: 'Computer', width: '20%' },
		  { text: 'SKU', datafield: 'SKU', width: '20%' },
		  { text: 'Serial', datafield: 'Serial', width: '20%' },
		  { text: 'UUIC', datafield: 'UUIC', width: '10%' },
		  { text: 'Monitor Serial', datafield: 'MSerial', width: '20%' },
		  { text: 'Monitor SKU', datafield: 'MSKU', width: '10%' }
		]
	  });
	}
	function _inspect(obj){
	  $.each(obj, function(x, y){
		if ((/object|array/.test(typeof(y))) && (_size(y) > 0)){
		  console.log('inspect: Examining '+x+' ('+typeof(y)+')');
		  _inspect(y);
		} else {
		  console.log('inspect: '+x+' => '+y);
		}
	  });
	}
	function _size(obj){
	  var n = 0;
	  if (/object/.test(typeof(obj))) {
		$.each(obj, function(k, v){
		  if (obj.hasOwnProperty(k)) n++;
		});
	  } else if (/array/.test(typeof(obj))) {
		n = obj.length;
	  }
	  return n;
	}
	function _date(){
	  var _d = new Date();
	  return _d.toISOString();
	}
  });

[Author]

Posts