jQWidgets Forums

Forum Replies Created

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

Author

Posts

November 13, 2012 at 1:25 pm in reply to: Any way to abort jqxadapter calls? Any way to abort jqxadapter calls? #10966

slodge

Member

ajax does have an abort feature?

e.g.
http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery

September 27, 2012 at 1:16 pm in reply to: Displayed selection value when checkboxes are enabled can be misleading Displayed selection value when checkboxes are enabled can be misleading #8601

slodge

Member

+1 for this suggestion – a comma separated list would be most helpful

September 27, 2012 at 1:07 pm in reply to: How to display the 'loading' animation for subsequent fetches How to display the 'loading' animation for subsequent fetches #8599

slodge

Member

Thanks – adding that works nicely for me.

I tried to repro the original problem with this sample – I’m using 4.2.2 and I can’t get the loading to display after the first hit.

Note: To repro this, I’m using:
– jQWidgets v2.4.2 (2012-Sep-12)
– FFox
– Fiddler2 to simulate slow network connections

Hope this helps

Stuart

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Remote Data 2.</title>
    <link rel="stylesheet" href="/Content/jqx/jqx.base.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script src="/Scripts/jqx/jqx-all.js" type="text/javascript"></script>
    <script type="text/javascript" src="/Scripts/jqx/globalization/jquery.global.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'name' },
                    { name: 'countryName' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' }
                ],
                url: "http://ws.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 50,
                    q: $('#startWith').val()
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                formatData: function (data) {
                    data.q = $('#startWith').val();
                }
            });
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columnsresize: true,
                columns: [
                    { text: 'City', datafield: 'name', width: 170 },
                    { text: 'Country Name', datafield: 'countryName', width: 200 },
                    { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
                    { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
                ]
            });
            $('#theButton').click(function () {
                dataAdapter.dataBind();
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <input type="text" id="startWith" value='london'></input>
        <button id="theButton">Press to refresh</button>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

September 27, 2012 at 11:03 am in reply to: Any way to force a grouped grid to redraw when used inside tabs? Any way to force a grouped grid to redraw when used inside tabs? #8590

slodge

Member

Thanks

A small section like:

$(‘#tabs’).bind(‘selected’, function (event) {
var selectedTab = event.args.item;
if (selectedTab == 0) {
$(“#samplegrid1”).jqxGrid(‘render’);
} else {
$(“#samplegrid2”).jqxGrid(‘render’);
}
});

Seems to solve my problem even when the async data in the real app

Thanks

Stuart

September 26, 2012 at 8:24 am in reply to: Any way to force a grouped grid to redraw when used inside tabs? Any way to force a grouped grid to redraw when used inside tabs? #8498

slodge

Member

Hi Again

Unfortunately this problem is still dogging me.

What I’m seeing is that if a Grid update occurs while a tab is not visible, then that grid’s redraw is broken.

I’ve worked around this a bit – especially by trying to avoid updates when not visible, but async data sources are causing updates :/

The sample code below illustrates the problem. To run it:

1. Start the page – switch back and forth between tabs – everything works well
2. Use one of the buttons at the top of the page to request dataAdapter.databind() on the tab which isn’t visible

I’m still wondering if there’s any kind of refresh/redraw\repaint command I can use to work around this?

Stuart

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example tries to work out how to get grouped grids working inside tabs.</title>
    <link rel="stylesheet" href="/Content/jqx/jqx.base.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script src="/Scripts/jqx/jqx-all.js" type="text/javascript"></script>
    <script type="text/javascript" src="/Scripts/jqx/globalization/jquery.global.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(100);
            var source =
                {
                    localdata: data,
                    datatype: "array"
                };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $('#updateFirst').click(function () {
                dataAdapter.dataBind();
            });
            var init1 = function () {
                $("#samplegrid1").jqxGrid(
                    {
                        width: 670,
                        source: dataAdapter,
                        showfilterrow: false,
                        filterable: false,
                        groupable: true,
                        groups: ['productname'],
                        selectionmode: 'singlecell',
                        columns: [
                            { text: 'Name', columntype: 'textbox', datafield: 'name', width: 120 },
                            { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 160 },
                            { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                            { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 180, cellsalign: 'right', cellsformat: 'd' },
                            { text: 'Qty.', datafield: 'quantity', filtertype: 'number', width: 50, cellsalign: 'right' },
                            { text: 'Price', datafield: 'price', filtertype: 'number', cellsalign: 'right', cellsformat: 'c2' }
                        ]
                    });
            };
            
            var data2 = generatedata(100);
            var source2 =
                {
                    localdata: data2,
                    datatype: "array"
                };
            var dataAdapter2 = new $.jqx.dataAdapter(source2);
            $('#updateSecond').click(function() {
                dataAdapter2.dataBind();
            });
            
            var init2 = function () {
                $("#samplegrid2").jqxGrid(
                    {
                        width: 670,
                        source: dataAdapter2,
                        showfilterrow: false,
                        filterable: false,
                        groupable: true,
                        groups: ['available'],
                        selectionmode: 'singlecell',
                        columns: [
                            { text: 'Name', columntype: 'textbox', datafield: 'name', width: 120 },
                            { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 160 },
                            { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                            { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 180, cellsalign: 'right', cellsformat: 'd' },
                            { text: 'Qty.', datafield: 'quantity', filtertype: 'number', width: 50, cellsalign: 'right' },
                            { text: 'Price', datafield: 'price', filtertype: 'number', cellsalign: 'right', cellsformat: 'c2' }
                        ]
                    });
            };
            var initTabsPlease = function (which) {
                switch (which) {
                    case 0:
                        init1();
                        break;
                    case 1:
                        init2();
                        break;
                }
            };
            $('#tabs').jqxTabs({ width: '90%', height: 200, position: 'top', initTabContent: initTabsPlease });
        });
        function generatedata(rowscount) {
            // prepare the data
            var data = new Array();
            if (rowscount == undefined) rowscount = 100;
            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", "Caramel 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 < rowscount; 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["id"] = i;
                row["available"] = productindex % 2 == 0;
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["name"] = row["firstname"] + " " + row["lastname"];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                var date = new Date();
                date.setFullYear(2012, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27));
                date.setHours(0, 0, 0, 0);
                row["date"] = date;
                data[i] = row;
            }
            return data;
        }
    </script>
</head>
    <body class='default'>
        <div>
            <button title="Update First" value="Update First" id="updateFirst">Update First</button>
            <button title="Update Second" value="Update Second" id="updateSecond">Update Second</button>
        </div>
        <div id="tabs">
            <ul>
                <li>by name</li>
                <li>by available</li>
            </ul>
            <div id="samplegrid1">
            </div>
            <div id="samplegrid2">
            </div>
        </div>
    </body>
</html>

September 21, 2012 at 3:49 pm in reply to: Any way to force a grouped grid to redraw when used inside tabs? Any way to force a grouped grid to redraw when used inside tabs? #8328

slodge

Member

Aaaaahhhhh

So the problem in the code I sent was in the shared dataAdapter as well as in the init?

Thanks for your help – I’m still trying to work out how the objects all work together

Stuart

September 21, 2012 at 3:22 pm in reply to: Any way to force a grouped grid to redraw when used inside tabs? Any way to force a grouped grid to redraw when used inside tabs? #8326

slodge

Member

(If it helps) I’m testing in Chrome Canary and IE9 (x64) and seeing the same thing in both

September 21, 2012 at 3:13 pm in reply to: Any way to force a grouped grid to redraw when used inside tabs? Any way to force a grouped grid to redraw when used inside tabs? #8325

slodge

Member

Thanks

If I change the code to use this then I still see the same problem – only now it’s on the first of the two tabs (when I switch back)

Stuart

            var init1 = function() {
                $("#samplegrid1").jqxGrid(
                    {
                        width: 670,
                        source: dataAdapter,
                        showfilterrow: false,
                        filterable: false,
                        groupable: true,
                        groups: ['productname'],
                        selectionmode: 'singlecell',
                        columns: [
                            { text: 'Name', columntype: 'textbox', datafield: 'name', width: 120 },
                            { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 160 },
                            { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                            { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 180, cellsalign: 'right', cellsformat: 'd' },
                            { text: 'Qty.', datafield: 'quantity', filtertype: 'number', width: 50, cellsalign: 'right' },
                            { text: 'Price', datafield: 'price', filtertype: 'number', cellsalign: 'right', cellsformat: 'c2' }
                        ]
                    });
            };
            var init2 = function() {
                $("#samplegrid2").jqxGrid(
                    {
                        width: 670,
                        source: dataAdapter,
                        showfilterrow: false,
                        filterable: false,
                        groupable: true,
                        groups: ['available'],
                        selectionmode: 'singlecell',
                        columns: [
                            { text: 'Name', columntype: 'textbox', datafield: 'name', width: 120 },
                            { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 160 },
                            { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                            { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 180, cellsalign: 'right', cellsformat: 'd' },
                            { text: 'Qty.', datafield: 'quantity', filtertype: 'number', width: 50, cellsalign: 'right' },
                            { text: 'Price', datafield: 'price', filtertype: 'number', cellsalign: 'right', cellsformat: 'c2' }
                        ]
                    });
            };
            var initTabsPlease = function(which) {
                switch (which) {
                    case 0:
                        init1();
                        break;
                    case 1:
                        init2();
                        break;
                }
            };
            $('#tabs').jqxTabs({ width: '90%', height: 200, position: 'top', initTabContent: initTabsPlease });
        });

September 17, 2012 at 5:24 pm in reply to: Using filterRow with dynamic data Using filterRow with dynamic data #8073

slodge

Member

Thanks Peter

In my real code, I’m updating the data using json and asking the data adapter to databind.

The grid is updating correctly, but the filterlist doesn’t change.

e.g. if I adjust the sample to:

var changeData = function() { for (var i in data) data[i].productname = '1' + data[i].productname; var newSource = { localdata: data, datatype: "array" }; var newDataAdapter = new $.jqx.dataAdapter(newSource); $("#jqxgrid").jqxGrid('source', newDataAdapter); }; setInterval(changeData, 5000);

which I think is: create a new source object, then create a new jqxDataAdapter, and set the Grid’s source property to point to the new jqxDataAdapter?

then I see the filter list look like:

I’ve tried calling clearfilters too – but I think I need to do something else?

Stuart

September 17, 2012 at 5:14 pm in reply to: Using filterRow with dynamic data Using filterRow with dynamic data #8069

slodge

Member

… actually, not quite working still ….

If I change the data, then I don’t think my ‘filterlist’ gets updated correctly.

e.g. if I use code like:

var changeData = function() { for (var i in data) data[i].productname = '1' + data[i].productname; dataAdapter.dataBind(); }; setInterval(changeData, 5000);

then after data update the filterlist for product continues to show “Black Tea”, “Green Tea”, “Caffe Espresso”, etc and not “1Black Tea”, “1Green Tea”, “1Caffe Espresso”, etc.

Is there an easy way to force the filter list to update?

Stuart

September 17, 2012 at 5:05 pm in reply to: Using filterRow with dynamic data Using filterRow with dynamic data #8068

slodge

Member

…

and then I tried updating to 2.4.2…

… and you’ve already fixed it

THANKS

Author

Posts

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