jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by cosostones 11 years, 4 months ago.

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

Author

Destroy problem of a grid in a tab Posts

January 27, 2014 at 4:49 pm Destroy problem of a grid in a tab #48447

Participant

Hello,

In my application I use jqxTabs and jqxGrid. When I want to destroy a grid that has not been shown (in the second tab) I got an error.

I host a sample with a screenhot : http://sdrv.ms/1bsLSmb.

Regards.

January 27, 2014 at 8:19 pm Destroy problem of a grid in a tab #48465

Peter Stoev

Keymaster

Hi cosostones,

If the Grid was created in the way we demonstrated in our demo, you would not experience such problem. In general, it is not possible to destroy something which is not yet rendered.

Here’s a modification of your code which ensures that the Grid is destroyed only if it is initialized:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo shows how to integrate jqxTabs with other widgets.
    </title>
    <link rel="stylesheet" href="jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqxdata.js"></script>
    <script type="text/javascript" src="jqxbuttons.js"></script>
    <script type="text/javascript" src="jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqxtabs.js"></script>
    <script type="text/javascript" src="jqxgrid.js"></script>
    <script type="text/javascript" src="jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqxgrid.edit.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var initGrid = function () {
                $("#jqxGrid").jqxGrid(
                {
                    width: '100%',
                    height: '84%',editable: true,
                    columns: [
                        { text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 },
                        { text: 'NASDAQ', datafield: 'NASDAQ' }
                    ]
                });
            }
           
			var initialized = false;
            $('#jqxTabs').jqxTabs({ width: 600, height: 560, initTabContent: function(index){
				if (index == 1)
				{
					initialized = true;
					initGrid();
				}
			}});
			
			
			$("#btnTest").click(function(evt){
				if (initialized)
				{
					$("#jqxGrid").jqxGrid("destroy");
				}
			});
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs'>
            <ul>
                <li style="margin-left: 30px;">
                    <div style="height: 20px; margin-top: 5px;">
                        <div style="float: left;">
                            <img width="16" height="16" src="../../images/catalogicon.png" />
                        </div>
                        <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                            US Indexes</div>
                    </div>
                </li>
                <li>
                    <div style="height: 20px; margin-top: 5px;">
                        <div style="float: left;">
                            <img width="16" height="16" src="../../images/pieicon.png" />
                        </div>
                        <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                            NASDAQ compared to S&P 500</div>
                    </div>
                </li>
            </ul>
           
            <div style="overflow: hidden;">
                <div id='jqxChart' style="width: 100%; height: 100%">
					blabla
                </div>
            </div>
			 <div style="overflow: hidden;">
                <div id="jqxGrid">
                </div>
                <div style="margin-top: 10px; height: 15%;">
                    The S&P 500 index finished 2011 less than a point away from where it ended 2010
                    -- 0.04 points down to be exact. That's the smallest annual change in history. At
                    its peak in April, the S&P had climbed more than 8%. But by October, at the lowest
                    levels of the year, it was down more than 12%. The Nasdaq, meanwhile, lost 1.8%
                    for the year.</div>
            </div>
        </div>
    </div>
	<input type='button' id='btnTest' value="destroy grid"/>
</body>
</html>

Best Regards,
Peter Stoev

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

January 28, 2014 at 9:55 am Destroy problem of a grid in a tab #48503

cosostones

Participant

Hello Peter,

Okay thanks for the clarification, it works in this way.

Regards.

Author

Posts

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

You must be logged in to reply to this topic.