jQWidgets Forums

This topic contains 9 replies, has 2 voices, and was last updated by jas- 12 years, 1 month ago.

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

Author

Grid size on load Posts

February 20, 2013 at 2:55 pm Grid size on load #15545

jas-

Member

I am running into a problem when using fluid sizing.

The datasource is pulled in from a CORS AJAX request (working fine) which pushes the results to the ‘$.jqx.dataAdapter()’ function (which also works fine). The problem is on initial page load all columns are minimized until I beging paging through record sets.

I have tried using the ‘ready’ option as well as refreshing the source but perhaps I am doing it wrong. Any tips?

$(‘#id’).jqxGrid({
…
width: ‘100%’,
…
columns: [
{ text: ‘Col 1’, datafield: ‘col-1’, width: ‘10%’ },
{ text: ‘Col 2’, datafield: ‘col-2’, width: ‘10%’ },
{ text: ‘Col 3’, datafield: ‘col-3’, width: ‘10%’ },
…

Thanks in advance

February 20, 2013 at 3:01 pm Grid size on load #15546

Peter Stoev

Keymaster

Hi jas-,

Would you provide a complete sample which demonstrates the reported behavior? We need the full initialization code for jqxGrid and also information about your browser, browser version, jQuery version and jQWidgets version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 20, 2013 at 3:06 pm Grid size on load #15547

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();
	}
  });

February 20, 2013 at 3:30 pm Grid size on load #15548

Peter Stoev

Keymaster

Hi jas-

I tried to reproduce the issue without avail. Here’s my test code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to enable the paging feature of the Grid.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
   <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/orders.xml";
            var dataAdapter;
            var customsortfunc = function (column, direction) {
                var obj = dataAdapter.records;
                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;
            };
            var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
            // prepare the data
            var source =
            {
                datatype: "json",
                sort: customsortfunc,
                datafields: [
                    { name: 'CompanyName', type: 'string' },
                    { name: 'ContactName', type: 'string' },
                    { name: 'ContactTitle', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'Country', type: 'string' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                autoshowloadelement: true,
                width: '100%',
                altrows: true,
                pagesizeoptions: ['5', '10', '20', '30', '40', '50'],
                width: '100%',
                source: dataAdapter,
                theme: theme,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                autoheight: true,
                ready: function()
                {
                    $('#jqxgrid').jqxGrid('autoresizecolumns', 'cells');
                    $("#jqxgrid").jqxGrid('loadstate', $("#jqxgrid").jqxGrid('getstate'));
                    $("#jqxgrid").jqxGrid('sortby', 'CompanyName', 'asc');
                },
                columnsresize: true,
                columns: [
                         { text: 'Company Name', datafield: 'CompanyName', width: '20%' },
                         { text: 'Contact Name', datafield: 'ContactName', width: '20%' },
                         { text: 'Contact Title', datafield: 'ContactTitle', width: '20%' },
                         { text: 'City', datafield: 'City', width: '20%' },
                         { text: 'Country', datafield: 'Country', width: '20%' }
                ]
            });
            $("#jqxgrid").on("pagesizechanged", function (event) {
                $("#jqxgrid").jqxGrid('savestate');
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Could you please tell me, if I am missing something for reproducing it?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 20, 2013 at 3:36 pm Grid size on load #15549

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
}

February 20, 2013 at 3:44 pm Grid size on load #15550

Peter Stoev

Keymaster

Hi jas-,

That should not be a problem, because the Grid will be initialized from a local data as in my demo, because “x” will be local for the _grid function. Until the “success” callback, the Grid of course will not be displayed.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 20, 2013 at 3:54 pm Grid size on load #15551

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?

February 20, 2013 at 4:02 pm Grid size on load #15552

Peter Stoev

Keymaster

Hi jas-,

That could be the reason, because it is initialized in a hidden container so the Grid will be initially resized with width=0. The solution is to trigger when the Grid’s container element is displayed and then initialize the Grid. You can also force the Grid to render itself again by using its “render” method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 20, 2013 at 4:03 pm Grid size on load #15553

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.

February 20, 2013 at 4:14 pm Grid size on load #15554

jas-

Member

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

Author

Posts

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

You must be logged in to reply to this topic.