jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid cell edit
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 5 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorGrid cell edit Posts
-
Hi,
We using two tabs(tab1,tab2). In tab2, we are having a editable grid, in which if we start to edit a cell and enter a value, without focus out from the cell; if we click the tab1 then we are getting the Script error in IE8. Please find the Error below.
JQX Library Version: v2.8.0
“Can’t move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.”
Please suggest me how to handle this issue.
Regards
K.VadiveluHello K.Vadivelu,
We could not reproduce the reported issue by testing the following example, based on the jqxTabs demo Integration with other widgets:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.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/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; var initGrid = function () { var source = { datatype: "csv", datafields: [ { name: 'Date' }, { name: 'S&P 500' }, { name: 'NASDAQ' } ], url: '../sampledata/nasdaq_vs_sp500.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); $("#jqxGrid").jqxGrid( { width: '100%', height: '84%', source: dataAdapter, theme: theme, editable: true, columns: [ { text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 }, { text: 'S&P 500', datafield: 'S&P 500', width: 150 }, { text: 'NASDAQ', datafield: 'NASDAQ' } ] }); } var initChart = function () { // prepare the data var source = { datatype: "csv", datafields: [ { name: 'Date' }, { name: 'S&P 500' }, { name: 'NASDAQ' } ], url: '../sampledata/nasdaq_vs_sp500.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // prepare jqxChart settings var settings = { title: "U.S. Stock Market Index Performance (2011)", description: "NASDAQ Composite compared to S&P 500", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, categoryAxis: { dataField: 'Date', formatFunction: function (value) { return months[value.getMonth()]; }, toolTipFormatFunction: function (value) { return value.getDate() + '-' + months[value.getMonth()]; }, type: 'date', baseUnit: 'month', showTickMarks: true, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, showGridLines: true, gridLinesInterval: 3, gridLinesColor: '#888888', valuesOnTicks: false }, colorScheme: 'scheme04', seriesGroups: [ { type: 'line', valueAxis: { unitInterval: 500, minValue: 0, maxValue: 3000, displayValueAxis: true, description: 'Daily Closing Price', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'S&P 500', displayText: 'S&P 500' }, { dataField: 'NASDAQ', displayText: 'NASDAQ' } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); } // init widgets. var initWidgets = function (tab) { switch (tab) { case 0: initChart(); break; case 1: initGrid(); break; } } $('#jqxTabs').jqxTabs({ width: 600, height: 560, theme: theme, initTabContent: initWidgets }); }); </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/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> <li> <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> </ul> <div style="overflow: hidden;"> <div id='jqxChart' style="width: 100%; height: 100%"> </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> </body> </html>Please make sure you are correctly initializing the grid and other widgets in jqxTabs using the callback function initTabContent, as shown in the example. We also recommend updating to the latest version of jQWidgets (3.0.4).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.