jQWidgets Forums

Tagged: grid event destroy create, javascript grid, jquery grid, updatebounddata

This topic contains 4 replies, has 2 voices, and was last updated by ksaidi 9 years ago.

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

Author

Re Create a grid after destroy Posts

May 20, 2016 at 10:10 am Re Create a grid after destroy #84497

ksaidi

Participant

Hi everybody,

On my page, I have instancied a grid.
To update this grid content (from the result of an ajax query) i destroyed it and then re create it.
It works fine, the content is updated…
But i noticed that all the events on the grid were “deleted”.
Do you have an explication and eventually a workaround solution for me ?

Example for test :
In the inital grid, an alert is displayed when a row is selected.
Click the destroy button and then click the re create button. The alert is no more displayed…


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 
    </title>
    <meta name="description" content="JavaScript Grid with rich support for Data Filtering, Paging, Editing, Sorting and Grouping" />
    <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/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/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" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            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, rowdata) {
                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 jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,                
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'rowselect',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
			
			
			 $("#jqxbutton").jqxButton({
				 theme: 'energyblue',
				 width: 100,
				 height: 30
			 });
			 $("#jqxbutton2").jqxButton({
				 theme: 'energyblue',
				 width: 100,
				 height: 30
			 });

			 $('#jqxbutton').click(function () {
				 $('#jqxgrid').jqxGrid('destroy');
			 });
			 
			 $("#jqxgrid").on('rowselect', function (event) {
				alert("row select");
			});
			
			$('#jqxbutton').click(function () {
				var gridPlace = document.getElementById("jqxWidget");
				gridPlace.innerHTML ="<div id='jqxgrid' style='border-color: transparent;'></div>";
				
				// initialize jqxGrid
				$("#jqxgrid").jqxGrid(
				{
					width: 850,
					source: dataAdapter,                
					pageable: true,
					autoheight: true,
					sortable: true,
					altrows: true,
					enabletooltips: true,
					editable: true,
					selectionmode: 'rowselect',
					columns: [
					  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
					  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
					  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
					  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
					  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
					],
					columngroups: [
						{ text: 'Product Details', align: 'center', name: 'ProductDetails' }
					]
				});
				
			 });

        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
	 <input type="button" style="margin: 10px;" id="jqxbutton" value="Destroy" />
	 <input type="button" style="margin: 10px;" id="jqxbutton2" value="Re create" />
</body>
</html>

May 20, 2016 at 10:49 am Re Create a grid after destroy #84498

ivailo

Participant

Hi ksaidi,

If you want to update your data – use updatebounddata method.
This example illustrates how to dynamically update and clear the Grid’s source.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

May 20, 2016 at 12:12 pm Re Create a grid after destroy #84500

ksaidi

Participant

Hi Ivailo,

Thx a lot dude !!!!
It works fine !

May 20, 2016 at 1:03 pm Re Create a grid after destroy #84501

ksaidi

Participant

I’m also using a kanban component and i’m facing the same problem.
There is no updatebounddata method for kanban…
So i’m looking for a similar method for kanban.
Does this method exists ?

May 20, 2016 at 3:00 pm Re Create a grid after destroy #84502

ksaidi

Participant

I found !
to refresh all the kanban content i’m using removeItem and addItem,
it works for me !

Author

Posts

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

You must be logged in to reply to this topic.