grid data source not from jqxDataAdapter

[m0j0r1s1ngParticipant]

I have a jqxTabs control with each tab having its own jqxGrid.

Each grid is basically the same as the other grids (same columns and settings) except that each one is from a different dataset (on the mySQL side, I have a stored function that produces a different filter based on an input parameter so the data that come out is the same columns but with a different filter).

When I set this up in my JS code I made a common var for the common parameters of the data source and then, in the initTabContent callback function for the jqxTabs control I add on to the data source var with the specifics for that tab’s jqxGrid. Example below:

var source = {  datatype: "json",
                datafields: [{
                    name: 'col1',
                    type: 'string'
                }, {
                    name: 'col2',
                    type: 'date'
               }],
                url: 'http://domain.com/data_feed.php',
                type: 'post'
            };
            
            var gridsettings = {
                width: 800,
                source: source,
                ...
                columns: [{
                    text: 'Column 1',
                    datafield: 'col1',
                    width: 145
                }, {
                    text: 'Column 2',
                    datafield: 'col2',
                    width: 145
                }]
                };
var tab1 = function (source) {
              //called when tab(0) is initialized
              source['data'] = {
                      filter: 'filtervalue1'
                  };
               $('#jqxgrid1').jqxGrid(gridsettings);  
            };
var tab2 = function (source) {
              //called when tab(1) is initialized
              source['data'] = {
                      filter: 'filtervalue2'
                  };
               $('#jqxgrid2').jqxGrid(gridsettings);  
            };

So my questions are based on the above.

1. Notice that I did not declare a jqxDataAdapter. This was somewhat by accident when coding, but it worked so I left it. I believe all your examples show using a jqxDataAdapter as the source: of a jqxGrid. Does jqxGrid implement a jqxDataAdapter implicitly if one is not declared explicitly?

2. I am wondering if I actually do need to declare an explicit jqxDataAdapter as I am seeing some undesirable behavior with my current setup. All the data is right but when I set: sortcolumn: col1 in the var source it works for only the first tab’s grid. The rest all have no default sort, even though they each have their own grid (all different DIVs) and each has a “col1” defined.

Thanks

[Peter StoevKeymaster]

Hi m0j0r1s1ng,

The source should always point to jqxDataAdapter instance as shown in our samples. At least that is what is expected by the Grid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[m0j0r1s1ngParticipant]

fair enough… are you suprised it worked without a jqxDataAdapter?

in the above code, if I add a declaration in the tab functions, do you know if this will work? I am somewhat new to JS and am wondering if I declare the data adapter in a function that it will be available outside the function.

What I am talking about is this:

var tab1 = function (source) {
              //called when tab(0) is initialized
              source['data'] = {
                      filter: 'filtervalue1'
                  };
              var dataadapter1 = new $.jqx.dataAdapter(gridsettings)
               $('#jqxgrid1').jqxGrid(dataadapter1);  
            };
var tab2 = function (source) {
              //called when tab(1) is initialized
              source['data'] = {
                      filter: 'filtervalue2'
                  };
               var dataadapter2 = new $.jqx.dataAdapter(gridsettings)
               $('#jqxgrid2').jqxGrid(dataadapter2);  
            };

[Peter StoevKeymaster]

Hi m0j0r1s1ng,

I suppose that it will not, because to set the Grid to point a new dataAdapter, you will have to set the “source” property again.

It should be something like that:

$('#grid').jqxGrid({source: dataadapter});  

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[m0j0r1s1ngParticipant]

so I converted it all to jqxDataAdapters and I still have the same issue where the grids are all identical but with different data values (same columns). In the data adapters, I set a sortcolumn but it only seems to work on the first tab/grid.

Can you take a peek and let me know if you think this is a bug or am I doing something wrong?

http://teamgamer.com/bf4-gldstats/index.html

You need to select at least 1 of the listed soldiers, then click on “Weapon Stats” at the bottom.

This will take you to the page I am talking about. (http://teamgamer.com/bf4-gldstats/weapons.html)

See how “Assault Rifles” (the first tab) has its groups sorted by “kills”? Now if you go to the rest of the tabs, the grids are NOT sorted by “kills” any longer, even though each data adapter and each grid were initialized with their own objects (but using the same settings). All the data is correct and it’s correctly retrieving a different dataset per tab/grid, but the “sortcolumn” property is not being applied to subsequent tabs.

[Peter StoevKeymaster]

Hi m0j0r1s1ng,

According to me, the problem is that the “source” object seems to be reused and the Grid modifies the “sortcolumn” field after the Grid’s Initialization. The solution for you is to create new source object instances in some Function instead of overriding them.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[m0j0r1s1ngParticipant]

They may be the same name for source: but isn’t each one a totally new and unique object as they are created inside a function where the variables are local to that function? I can try and alter the source and see but I believe I have tried that already. I think it gets confused because all the datasource columns are the same.

[Peter StoevKeymaster]

Hi m0j0r1s1ng,

No, not in Javascript.

Ex:

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript">
        var source = { x: 1, y: 2 };
        var fn = function (src) {
            src.z = 10;
        }
        fn(source);
        alert(source.z);
    </script>
</head>
<body class='default'>
</body>
</html>

The result is Alert which displays 10.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[m0j0r1s1ngParticipant]

I have completely isolated each variable from the global… take a look at the way I set up tab(1) “Carbines” now… each DataAdapter has a unique name, a unique source and a unique array feeding it. Although this column sort is a minor thing, it’s still a bug as far as I can see.

[Peter StoevKeymaster]

Hi mOjOr1s1ng,

You can find below how to correctly initialize multiple Grids and apply Sorting through the “sortcolumn” and “sortdirection” members of the “source” object.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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/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/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var getData = 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",
                    sortcolumn: 'firstname',
                    sortdirection: 'asc',
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ]
                };

                var dataAdapter = new $.jqx.dataAdapter(source);
                return dataAdapter;
            }

            var createGrid = function (gridName) {
                $("#" + gridName).jqxGrid(
                {
                    width: 670,
                    source: getData(),
                    sortable:true,
                    columnsresize: true,
                    columns: [
                      { text: 'Name', dataField: 'firstname', width: 100 },
                      { text: 'Last Name', dataField: 'lastname', width: 100 },
                      { text: 'Product', editable: false, 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', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                    ]
                });
            }
            createGrid("jqxgrid");
            createGrid("jqxgrid2");
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <div id="jqxgrid2"></div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[m0j0r1s1ngParticipant]

Thank you very much Peter… that worked great when I adapted it to my code.

I think my problem was not returning a jqxAdapter from my function… I think I still have some area to work on in regards to Javascript variable scope

[Author]

Posts