jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by lopez306 12 years, 3 months ago.

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

Author

Grid Destroy issue Posts

February 28, 2013 at 1:07 pm Grid Destroy issue #16039

Participant

Grid doesn’t destroy correctly (there are some elements left) when I put grid on window.
jqwidgets: 2.7
jquery: 1.9.1
browser: all

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.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 () {
            var theme = 'base';
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            
            // initialize jqxWindow
            $('#jqxWindow').jqxWindow({
            	width: 800,
            	height: 400,
            	theme: theme,
            	isModal: true,
            	closeButtonAction: 'close',
            	initContent: function () {
            	 	// initialize jqxGrid
                    $('#jqxGrid').jqxGrid(
                    {
                        width: 670,
                        source: dataAdapter,
                        theme: theme,
                        pageable: true,
                        autoheight: true,
                        sortable: true,
                        altrows: true,
                        enabletooltips: true,
                        editable: true,
                        selectionmode: 'multiplecellsadvanced',
                        columns: [
                          { text: 'Product Name', datafield: 'ProductName', width: 250 },
                          { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', width: 150 },
                          { text: 'Unit Price', datafield: 'UnitPrice', cellsalign: 'right', cellsformat: 'c2', width: 70 },
                          { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                          { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', width: 100 },
                        ]
                    });
            	}
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    	<div id="jqxWindow">
    		<div id="windowHeader">Grid Destroy Test</div>
    		<div id="windowContent">
    			<div id="jqxGrid"></div>
    		</div>
    	</div>
     </div>
</body>
</html>

February 28, 2013 at 1:13 pm Grid Destroy issue #16042

Peter Stoev

Keymaster

Hi lopez306,

I don’t find where in the code the Grid’s destroy method is called.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 28, 2013 at 1:19 pm Grid Destroy issue #16046

lopez306

Participant

Ooops… my mistake

Author

Posts

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

You must be logged in to reply to this topic.