jQWidgets Forums

Tagged: window dataAdapter

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 13 years, 1 month ago.

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

Author

dataAdapter set to null after initialising window Posts

April 3, 2012 at 11:15 am dataAdapter set to null after initialising window #3183

edhrx

Participant

$(document).ready(function () {
page.initialise();
});

var page = {

source:null,
dataAdapter: null,

initialise:function(

$(“#dialog1”).jqxWindow({ height:550, width: 600,isModal:true, theme:’classic’, autoOpen:false, title:’Editing connection’});
page.dataAdapter = new $.jqx.dataAdapter(page.source);

$(“#jqxgrid”).jqxGrid(
{
………………………………………
});

…………load of other code

The issue is this. I have to initialize the jqxWindow before I create the page.dataAdapter. Why ? because if I do it the other way
around
page.dataAdapter = new $.jqx.dataAdapter(page.source);
$(“#dialog1”).jqxWindow({ height:550, width: 600,isModal:true, theme:’classic’, autoOpen:false, title:’Editing connection’});
or initialise jqxWindow in some other the function the page.dataAdapter get set to null.

Because the jqWindow has already been initialized I cannot then change height and width later…. In terms of coding I tend to use just one div for all the popup windows.

Ed.

April 3, 2012 at 11:28 am dataAdapter set to null after initialising window #3184

Peter Stoev

Keymaster

Hi Ed,

There’s no connection between the dataAdapter and the jqxWindow initialization. However, it is very important to initialize all the widgets and plug-ins in the $(document).ready function. For example, in our DataGrid Popup Editing demo the dataAdapter is initialized before the Window.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 3, 2012 at 2:29 pm dataAdapter set to null after initialising window #3187

edhrx

Participant

Peter no problem, I can code around it. But you’ll have to admit its a draw back. What you are effectively saying it that all the dialogs you may use on a page to ‘produce’ windows have to already exists. Instead of having just one dialog. I am writing a complex app for use in the NHS here and with jquery ui I can just use the one… but overall I like using the product is evaluating well.

Ed.

April 3, 2012 at 2:49 pm dataAdapter set to null after initialising window #3188

Peter Stoev

Keymaster

Hi Ed,

I will illustrate that the initialization order is not important with an example:

In the code below, the jqxWindow is initialized after the jqxDataAdapter.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
           // 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 < 200; 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 source =
            {
                localdata: data,
                datatype: "array",
            };
  
                // initialize the popup window.
            $("#popupWindow").jqxWindow({ width: 250, isModal: true, modalOpacity: 0.01 });
            var dataAdapter = new $.jqx.dataAdapter(source);
            
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 190 },
                  { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });    
        });
    </script>
</head>
<body class='default'>
      <div id="jqxgrid"></div> 
       <div id="popupWindow">
            <div>Title</div>
            <div>Content</div>
       </div>
</body>
</html>

Now, if you switch the order and initialize the jqxWindow after the jqxDataAdapter, the result is the same on my side.

           var dataAdapter = new $.jqx.dataAdapter(source);
            
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 190 },
                  { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
               // initialize the popup window.
            $("#popupWindow").jqxWindow({ width: 250, isModal: true, modalOpacity: 0.01 });

However, if I am missing something, then could you please send me a sample code which reproduces the issue(if applicable).

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.