jQWidgets Forums
jQuery UI Widgets › Forums › Grid › jqxGrid in jqxTabs cell select problem
Tagged: Cell, grid, initTabContent, jqxgrid, jqxTabs, multiplecellsadvanced, selection, selectionmode, tab, Tabs
This topic contains 4 replies, has 2 voices, and was last updated by mwlee 10 years, 2 months ago.
-
Author
-
Hi.
I select the two cells. but, three of the cell has been selected.
sample image
step 1 : http://me2.do/xfU9GW7u
result : http://me2.do/5OCj4hKW———————————————————————————————-
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>
This demo shows how to display jqxGrid in jqxTabs.
</title>
<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=”../../scripts/demos.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/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 initGrid = function () {
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Date’ },
{ name: ‘S&P 500’ },
{ name: ‘NASDAQ’ }
],
url: ‘../../demos/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: ‘100%’,
selectionmode: ‘multiplecellsadvanced’,
source: dataAdapter,
columns: [
{ text: ‘Date’, datafield: ‘Date’, cellsformat: ‘d’, width: 250 },
{ text: ‘S&P 500’, datafield: ‘S&P 500’, width: 150 },
{ text: ‘NASDAQ’, datafield: ‘NASDAQ’ }
]
});
}
var initGrid2 = function () {
var data = ‘[{ “CompanyName”: “Alfreds Futterkiste”, “ContactName”: “Maria Anders”, “ContactTitle”: “Sales Representative”, “Address”: “Obere Str. 57”, “City”: “Berlin”, “Country”: “Germany” }, { “CompanyName”: “Ana Trujillo Emparedados y helados”, “ContactName”: “Ana Trujillo”, “ContactTitle”: “Owner”, “Address”: “Avda. de la Constitucin 2222”, “City”: “Mxico D.F.”, “Country”: “Mexico” }, { “CompanyName”: “Antonio Moreno Taquera”, “ContactName”: “Antonio Moreno”, “ContactTitle”: “Owner”, “Address”: “Mataderos 2312”, “City”: “Mxico D.F.”, “Country”: “Mexico” }, { “CompanyName”: “Around the Horn”, “ContactName”: “Thomas Hardy”, “ContactTitle”: “Sales Representative”, “Address”: “120 Hanover Sq.”, “City”: “London”, “Country”: “UK” }, { “CompanyName”: “Berglunds snabbkp”, “ContactName”: “Christina Berglund”, “ContactTitle”: “Order Administrator”, “Address”: “Berguvsvgen 8”, “City”: “Lule”, “Country”: “Sweden” }, { “CompanyName”: “Blauer See Delikatessen”, “ContactName”: “Hanna Moos”, “ContactTitle”: “Sales Representative”, “Address”: “Forsterstr. 57”, “City”: “Mannheim”, “Country”: “Germany” }, { “CompanyName”: “Blondesddsl pre et fils”, “ContactName”: “Frdrique Citeaux”, “ContactTitle”: “Marketing Manager”, “Address”: “24, place Klber”, “City”: “Strasbourg”, “Country”: “France” }, { “CompanyName”: “Blido Comidas preparadas”, “ContactName”: “Martn Sommer”, “ContactTitle”: “Owner”, “Address”: “C\/ Araquil, 67”, “City”: “Madrid”, “Country”: “Spain” }, { “CompanyName”: “Bon app\'”, “ContactName”: “Laurence Lebihan”, “ContactTitle”: “Owner”, “Address”: “12, rue des Bouchers”, “City”: “Marseille”, “Country”: “France” }, { “CompanyName”: “Bottom-Dollar Markets”, “ContactName”: “Elizabeth Lincoln”, “ContactTitle”: “Accounting Manager”, “Address”: “23 Tsawassen Blvd.”, “City”: “Tsawassen”, “Country”: “Canada” }, { “CompanyName”: “B\’s Beverages”, “ContactName”: “Victoria Ashworth”, “ContactTitle”: “Sales Representative”, “Address”: “Fauntleroy Circus”, “City”: “London”, “Country”: “UK” }, { “CompanyName”: “Cactus Comidas para llevar”, “ContactName”: “Patricio Simpson”, “ContactTitle”: “Sales Agent”, “Address”: “Cerrito 333”, “City”: “Buenos Aires”, “Country”: “Argentina” }, { “CompanyName”: “Centro comercial Moctezuma”, “ContactName”: “Francisco Chang”, “ContactTitle”: “Marketing Manager”, “Address”: “Sierras de Granada 9993”, “City”: “Mxico D.F.”, “Country”: “Mexico” }, { “CompanyName”: “Chop-suey Chinese”, “ContactName”: “Yang Wang”, “ContactTitle”: “Owner”, “Address”: “Hauptstr. 29”, “City”: “Bern”, “Country”: “Switzerland” }, { “CompanyName”: “Comrcio Mineiro”, “ContactName”: “Pedro Afonso”, “ContactTitle”: “Sales Associate”, “Address”: “Av. dos Lusadas, 23”, “City”: “Sao Paulo”, “Country”: “Brazil” }, { “CompanyName”: “Consolidated Holdings”, “ContactName”: “Elizabeth Brown”, “ContactTitle”: “Sales Representative”, “Address”: “Berkeley Gardens 12 Brewery”, “City”: “London”, “Country”: “UK” }, { “CompanyName”: “Drachenblut Delikatessen”, “ContactName”: “Sven Ottlieb”, “ContactTitle”: “Order Administrator”, “Address”: “Walserweg 21”, “City”: “Aachen”, “Country”: “Germany” }, { “CompanyName”: “Du monde entier”, “ContactName”: “Janine Labrune”, “ContactTitle”: “Owner”, “Address”: “67, rue des Cinquante Otages”, “City”: “Nantes”, “Country”: “France” }, { “CompanyName”: “Eastern Connection”, “ContactName”: “Ann Devon”, “ContactTitle”: “Sales Agent”, “Address”: “35 King George”, “City”: “London”, “Country”: “UK” }, { “CompanyName”: “Ernst Handel”, “ContactName”: “Roland Mendel”, “ContactTitle”: “Sales Manager”, “Address”: “Kirchgasse 6”, “City”: “Graz”, “Country”: “Austria”}]’;
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘CompanyName’, type: ‘string’ },
{ name: ‘ContactName’, type: ‘string’ },
{ name: ‘ContactTitle’, type: ‘string’ },
{ name: ‘Address’, type: ‘string’ },
{ name: ‘City’, type: ‘string’ },
{ name: ‘Country’, type: ‘string’ }
],
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxGrid2”).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
selectionmode: ‘multiplecellsadvanced’,
source: dataAdapter,
columns: [
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 250 },
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 150 },
{ text: ‘Contact Title’, datafield: ‘ContactTitle’, width: 180 },
{ text: ‘City’, datafield: ‘City’, width: 120 },
{ text: ‘Country’, datafield: ‘Country’ }
]
});
}
// init widgets.
var initWidgets = function (tab) {
switch (tab) {
case 0:
initGrid();
break;
case 1:
initGrid2();
break;
}
}
$(‘#jqxTabs’).jqxTabs({ width: 600, height: 560, initTabContent: initWidgets });
});
</script>
</head>
<body class=’default’>
<div id=’jqxTabs’>-
<li style=”margin-left: 30px;”>
- Grid 2
Grid 1<div style=”overflow: hidden;”>
<div style=”border:none;” id=”jqxGrid”>
</div>
</div>
<div style=”overflow: hidden;”>
<div style=”border:none;” id=”jqxGrid2″></div>
</div>
</div>
</body>
</html>—————————————————————————————————
Hi mwlee,
Such behaviour does not occur with the latest version of jQWidgets (3.7.1), as demonstrated by the example Cells Selection (when the “multiple cells advanced” option has been selected). Please make sure you are using the latest version, too.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar.
We were upgraded to the latest version of jQWidgets (3.7.1).
The question is solved.
But We have a different problem.
In front of a cell is selected.
This problem occurs only jqxGrid in jqxTabs.
< test image >
action : http://me2.do/xbCYKQIu
result : http://me2.do/xPyeYw6OHi mwlee,
We do not experience such issue with the latest version. We tested the following example, based on the jqxTabs demo Integration with other widgets. Do you experience the same behaviour with it?
<!DOCTYPE html> <html lang="en"> <head> <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="../../scripts/demos.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/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 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%', selectionmode: 'multiplecellsadvanced', source: dataAdapter, 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: { 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: initGrid(); break; case 1: initChart(); break; } } $('#jqxTabs').jqxTabs({ width: 600, height: 560, 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/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="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 style="overflow: hidden;"> <div id='jqxChart' style="width: 100%; height: 100%"> </div> </div> </div> </div> </body> </html>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
We have found the problem.
The cause was a demo page source .
———————————————————-
demos/jqxgrid/tabs-and-grid.htm<body class='default'> <div id='jqxTabs'> <ul> <li style="margin-left: 30px;"> Grid 1 <li> Grid 2 </li> </ul> <div style="overflow: hidden;"> <div style="border:none;" id="jqxGrid"> </div> </div> <div style="overflow: hidden;"> <div style="border:none;" id="jqxGrid2"></div> </div> </div> </body>——————————————————-
style=”border:none;” <—- problem cause
The results were great! We owe it to you.
Thanks Dimitar. -
AuthorPosts
You must be logged in to reply to this topic.