jQWidgets Forums

Tagged: destroy, grid, initContent, jqxgrid, jqxwindow, window

This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years, 3 months ago.

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

Author

re-create/reset window Posts

February 19, 2015 at 7:52 pm re-create/reset window #67385

badera

Participant

Dear all

I am using jqxWindow. In the initContent function, I initialize all the included controls, mainly jqxGrids.
If I close the window and reopen it, initContent is no more called; the previous state is still stored and displayed. This is often very well; but sometimes, it is not.
How can I achieve that the window is really re-created if opened again? – i.e. destroying it on close. I know that there is a method destroy. But I do not exactly understand, what this function does because after calling destroy, I can no more open the window (I am using the widgets in angularjs way).
However, I do not want to be focues on this destroy method; I just like to have a solution, how to get every time on open the inital window content – as if initContent function of the window would be called again…

Can someone help? – Thanks in advance!
– badera

February 20, 2015 at 11:40 am re-create/reset window #67417

Nadezhda

Participant

Hello badera,

The ‘destroy’ method removes the widget including the html tags. If you want to use destroy method you should create and initialize the window again before to open it. Here is an example which shows how to recreate the window and grid into it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.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/jqxwindow.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.edit.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            initialize();

            $('#jqxwindow').on('close', function (event) {
               // $('#jqxgrid').jqxGrid('destroy');
                $('#jqxwindow').jqxWindow('destroy');

            });

            $('#showWindowButton').jqxButton({ width: '70px' });
            $('#showWindowButton').click(function () {
                $("div input").append('<div id="jqxwindow"><div>jqxGrid in jqxWindow</div><div><div id="jqxgrid"></div></div></div>');
                initialize();
                $('#jqxwindow').jqxWindow('open');
            });
        });

        function initialize() {
            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 < 100; 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"
            };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            $("#jqxwindow ").jqxWindow({
                height: 300,
                width: 550,
                theme: 'summer',
                initContent: function () {
                    $("#jqxgrid").jqxGrid(
                    {
                        source: dataAdapter,
                        editable: false,
                        enablemousewheel: false,
                        autoheight: true,
                        columns: [
                          { text: 'First Name', datafield: 'firstname', width: 100 },
                          { text: 'Last Name', datafield: 'lastname', width: 100 },
                          { text: 'Product', 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', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                        ]
                    });
                }
            });

        }
    </script>
</head>
<body>
    <div>
        <input type="button" value="Open" id="showWindowButton" />
    </div>
    <div id='jqxwindow'>
        <div>jqxGrid in jqxWindow</div>
        <div>
            <div id="jqxgrid"></div>
        </div>
    </div>
</body>
</html>

If you want to manipulate grid content you can do it on window ‘open’ event but in this case you will call ‘initContent’ one time.

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.