jQWidgets Forums

Tagged: initialize grid, jqxgrid, jqxwindow

This topic contains 2 replies, has 2 voices, and was last updated by rrodini 9 years ago.

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

Author

grid not populating for initial display Posts

June 1, 2016 at 1:56 pm grid not populating for initial display #84807

Participant

I have a jqxgrid embedded within a pop-up jqxwindow. When the window is first displayed the grid is not populated. When the widow is dismissed and then re-opened the grid is populated. The whole sequence with code that closely matches my production code is here https://www.jseditor.io/?key=jqxgrid-in-jqxwindow-1. Can anyone explain how to get the grid to populate the first time?

June 1, 2016 at 2:14 pm grid not populating for initial display #84811

Peter Stoev

Keymaster

Hi rrodini,

Several problems in this code:

1. HTML Structure for the Window is incorrect. You put the Grid in the window’s header.

Correct code below:

<HTML>
	<HEAD>
	</HEAD>
	<BODY>
	    <!-- pop up window -->
        <div id='jqxwindow'>
            <div>Title</div>
            <div>
                <div id="jqxtree" style="float: left; "></div>
                <div id="jqxgrid"></div>
            <div>
                <button id='cancel'>Cancel</button>
                <button id='ok'>Okay</button>
            </div>
            </div>

        </div>
        <button id='button'>Open Window</button>
	</BODY>
</HTML>

2. The code for loading data in the Grid is called before the Grid is created i.e it tries to load data in something which does not exist. Correct code below:

function loadGrid() {
        // prepare the data
    var data = new Array();
    var firstNames = [
        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    ];
    var lastNames = [
        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    ];
    var productNames = [
        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];
    var priceValues = [
        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];
    for (var i = 0; i < 100; i++) {
        var row = {};
        var productindex = Math.floor(Math.random() * productNames.length);
        var price = parseFloat(priceValues[productindex]);
        var quantity = 1 + Math.round(Math.random() * 10);
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["productname"] = productNames[productindex];
        row["price"] = price;
        row["quantity"] = quantity;
        row["total"] = price * quantity;
        data[i] = row;
    }
    var datasource = {
        localdata: data,
        datatype: "array"
    };
     var dataAdapter = new $.jqx.dataAdapter(datasource, {
         loadComplete: function(data) {},
         loadError: function(xhr, status, error) {}
     });
    $('#jqxgrid').jqxGrid(
        {source: dataAdapter}
    );
}

$(document).ready(function() {
    $("#jqxwindow").jqxWindow({
        isModal: true,
        autoOpen: false,
        height: 500,
        width: 650,
        theme: 'energyblue',
        cancelButton: $('#cancel'),
        okButton: $('#ok'),
        initContent:
            function() {
                $("#jqxtree").jqxTree({
                    width: 275,
                    height: 400,
                    theme: 'energyblue',
                    source: null,
                });
                $("#jqxgrid").jqxGrid({
                    width: 275,
                    height: 400,
                    theme: 'energyblue',
                    source: null,
                    columns: [{
                        text: 'First Name',
                        datafield: 'firstname',
                        width: 100
                    }, {
                        text: 'Last Name',
                        datafield: 'lastname',
                        width: 100
                    }, {
                        text: 'Product',
                        datafield: 'productname',
                        width: 180
                    }, {
                        text: 'Quantity',
                        datafield: 'quantity',
                        width: 80,
                        cellsalign: 'right'
                    }, {
                        text: 'Unit Price',
                        datafield: 'price',
                        width: 90,
                        cellsalign: 'right',
                        cellsformat: 'c2'
                    }, {
                        text: 'Total',
                        datafield: 'total',
                        width: 100,
                        cellsalign: 'right',
                        cellsformat: 'c2'
                    }]
       });
                         loadGrid();
        $('#cancel').jqxButton({width: '50'});
                $('#ok').jqxButton({width: '50'});
            }
    });
    $('#button').on('click', function() {
        $('#jqxwindow').jqxWindow('open');
    });
    
});

June 1, 2016 at 8:58 pm grid not populating for initial display #84817

rrodini

Participant

Thanks for pointing out the html error. You made me think about the initialization process and the critical error in initContent was setting ‘source: null’ for the jqxTree. Once I deleted that line things starting working as I expected. Thanks for the feedback.

Author

Posts

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

You must be logged in to reply to this topic.