jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by nikitaso 11 years, 11 months ago.

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

Author

Refresh grid data source Posts

July 15, 2013 at 6:27 pm Refresh grid data source #25189

Participant

Hi,
I need to completely refresh grid datasource along with columns and clear any filters, before ver 2.9 I did this trick:

var parent = $(“#jqxgrid”).parent();
$(“#jqxgrid”).jqxGrid(‘destroy’);
$(“

“).appendTo(parent);

This no longer works.

Can you please suggest something.

Thank you!

July 15, 2013 at 6:43 pm Refresh grid data source #25192

Peter Stoev

Keymaster

Hi,

I do not see a problem with destroying and adding the Grid.

Example:

<!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.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/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // 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",
                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);
       
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                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' }
                ]
            });
            // destroy.
            var parent = $("#jqxgrid").parent();
            $("#jqxgrid").jqxGrid('destroy');
            $("<div id='jqxgrid'></div>").appendTo(parent);
            // create again.
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                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' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

July 15, 2013 at 7:10 pm Refresh grid data source #25195

nikitaso

Participant

Perhaps I’m doing something wrong, after it’s loaded click “Query 2”

http://axeom.asyncbox.com/axeomquery

Also, getfilterinfo api still not working. Grid erases custom filter.

July 15, 2013 at 8:14 pm Refresh grid data source #25202

Peter Stoev

Keymaster

Hi,

1. When you apply a filter through the UI, the custom filter applied to the same column will be erased
2. The thrown exception is “Uncaught Error: Invalid jQuery Selector! Please, check whether the used ID or CSS Class name is correct.”. That means that you or we try to call a method or set a property of jqxGrid while there is still no such HTML Element in the DOM. You may try with the jQuery’s remove() instead of ‘destroy’ as an alternative.
3. For updating the Grid’s data, you may set its “source” property to a new instance of jqxDataAdapter.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

July 15, 2013 at 8:50 pm Refresh grid data source #25209

nikitaso

Participant

1. is possible not to erase?

2. with version 2.8 i wasnt getting that error (i can setup two links with differetn versions).
but this seems to work:
i wrapped grid into another div ‘gridcontainer’
var grid1 = $(“

“);
$(“#jqxgridContainer”).empty();
$(“#jqxgridContainer”).append(grid1);

3. item 2 fixes this one.

July 16, 2013 at 3:56 pm Refresh grid data source #25270

nikitaso

Participant

i did a work around for filter, but it would be great for grid not to erase custom filter.
Thank you!

Author

Posts

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

You must be logged in to reply to this topic.