jQWidgets Forums

Tagged: datacolumns, refresh

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

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

Author

Change datacolumns in existing grid Posts

May 22, 2015 at 2:26 am Change datacolumns in existing grid #71431

maszk

Participant

Hi,

I have the same problem like in this topic.

But _cachedcolumns is not property in 3.8. Is other solution available?

Thanks

May 22, 2015 at 8:44 am Change datacolumns in existing grid #71451

ivailo

Participant

Hi maszk,

In the last version of the widget you don’t need to use _cachedcolumns property like a workaround.

If you want to change dynamicaly columns and data you can test this example.

I made some little changes of that demo for demonstration how to change on click between 3 different data sources.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The Grid's columns and rows in this examples are retrieved from JSON file.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/rows_and_columns.txt";
            var url2 = "../sampledata/rows_and_columns2.txt";
            var url3 = "../sampledata/rows_and_columns3.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                autoBind: true,
                downloadComplete: function (data) {
                    var columns = data[0].columns;
                    var rows = data[1].rows;
                    var gridAdapter = new $.jqx.dataAdapter({
                        datafields: [
                        { name: 'id', type: 'number' },
                        { name: 'name', type: 'string' },
                        { name: 'type', type: 'string' },
                        { name: 'calories', type: 'int' },
                        { name: 'totalfat', type: 'string' },
                        { name: 'protein', type: 'string' }
                        ],
                        id: 'id',
                        localdata: rows
                    });

                    $("#jqxgrid").jqxGrid('hideloadelement');
                    $("#jqxgrid").jqxGrid('beginupdate', true);
                    $("#jqxgrid").jqxGrid(
                      {
                          source: gridAdapter,
                          columns: columns
                      });
                    $("#jqxgrid").jqxGrid('endupdate');
                }
            }
            );
            $("#jqxgrid").jqxGrid(
                   {
                       width: 850,
                       columnsresize: true
                   });
            $("#jqxbutton").jqxButton(
                  {
                      width: 100
                  });

            var oldUrl = url;

            $("#jqxbutton").on('click', function () {
                if(source.url == url){
                    source.url = url2;
                }else if(source.url == url2){
                    source.url = url3;
                } else if (source.url == url3) {
                    source.url = url;
                }

                dataAdapter = new $.jqx.dataAdapter(source, {
                    autoBind: true,
                    downloadComplete: function (data) {
                        var columns = data[0].columns;
                        var rows = data[1].rows;
                        var gridAdapter = new $.jqx.dataAdapter({
                            datafields: [
                            { name: 'id', type: 'number' },
                            { name: 'name', type: 'string' },
                            { name: 'type', type: 'string' },
                            { name: 'calories', type: 'int' },
                            { name: 'totalfat', type: 'string' },
                            { name: 'protein', type: 'string' }
                            ],
                            id: 'id',
                            localdata: rows
                        });

                        $("#jqxgrid").jqxGrid('hideloadelement');
                        $("#jqxgrid").jqxGrid('beginupdate', true);
                        $("#jqxgrid").jqxGrid(
                          {
                              source: gridAdapter,
                              columns: columns
                          });
                        $("#jqxgrid").jqxGrid('endupdate');
                    }
                }
                );

            });

            $("#jqxgrid").jqxGrid('showloadelement');
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid"></div>
    <p>
        <button id="jqxbutton">Change column/data</button>
    </p>
</body>
</html>

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

May 22, 2015 at 10:52 am Change datacolumns in existing grid #71470

maszk

Participant

Hi Ivailo!

Thank you, this is what I searched.

Regards

Author

Posts

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

You must be logged in to reply to this topic.