jQuery UI Widgets Forums Dialogs and Notifications Window re-create/reset window

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • 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

    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/

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

You must be logged in to reply to this topic.