jQWidgets Forums
Forum Replies Created
-
Author
-
November 20, 2022 at 9:45 pm in reply to: Can I use 1 grid to filter another grid both having some common grid columns? Can I use 1 grid to filter another grid both having some common grid columns? #127537
Dear support,
The first grid is displaying but on click the other grid is not displaying and getting error
jqxgrid.js:8 Uncaught TypeError: Cannot read properties of null (reading ‘length’);
My code is<%@ page language=”java” contentType=”text/html; charset=ISO-8859-1″
pageEncoding=”ISO-8859-1″%>
<%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core”%><!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ /><title>Vetan</title>
<link rel=”stylesheet” href=”../jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../jqwidgets/styles/jqx.arctic.css” type=”text/css” /><script type=”text/javascript” src=”../scripts/jquery-1.12.4.min.js”></script>
<%@include file=”externalJsImports.jsp”%><script type=”text/javascript” src=”../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.columnsreorder.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.aggregates.js”></script><script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{name: ‘ec’, type: ‘string’},
{name: ‘ename’, type: ‘string’},
{name: ‘area’, type: ‘string’},
{name: ‘bcode’, type: ‘string’},
{name: ‘loan_type’, type: ‘string’},
{name: ‘loan_amt’, type: ‘number’}
],
id: ‘ec’,
url: ‘${pageContext.request.contextPath}/report/getEmpdet’,
type: ‘POST’,async: true,
cache: false,
root: ‘Rows’,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{source: dataAdapter,
theme: ‘classic’,
pageable: true,
autoheight: true,
virtualmode: true,
rendergridrows: function () {
return dataAdapter.records;
},
columns: [
{text: ‘Code’, datafield: ‘ec’, width: 50},
{text: ‘Name’, datafield: ‘ename’, width: 100},
{text: ‘Zone’, datafield: ‘area’, width: 50},
{text: ‘Branch’, datafield: ‘bcode’, width: 50, cellsalign: ‘right’},
{text: ‘Loan Type’, datafield: ‘loan_type’, width: 50},
{ text: ‘Amount’, datafield: ‘loan_amt’, width: 100, cellsalign: ‘right’}
]
});
// init Orders Grid$(“#ordersGrid”).jqxGrid(
{
virtualmode: true,
pageable: true,
autoheight: true,
theme: ‘classic’,
rendergridrows: function (obj) {
return [];
},
columns: [
{name: ‘ec’, type: ‘string’},
{name: ‘ename’, type: ‘string’},
{name: ‘area’, type: ‘string’},
{name: ‘bcode’, type: ‘string’},
{name: ‘type1’, type: ‘number’},
{name: ‘type2’, type: ‘number’},
{name: ‘type3’, type: ‘number’},
{name: ‘type4’, type: ‘number’},
{name: ‘type5’, type: ‘number’},
{name: ‘total’, type: ‘number’} ]
});
$(“#jqxgrid”).bind(‘rowselect’, function (event) {
var row = event.args.rowindex;
var id = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row)[‘ec’];
var source =
{
url: ‘${pageContext.request.contextPath}/table/getPfview’,
type: ‘POST’,
dataType: ‘json’,
data: {ec: id},
datatype: “json”,
cache: false,
datafields: [
{text: ‘Code’, datafield: ‘ec’, width: 100},
{text: ‘Name’, datafield: ‘ename’, width: 200},
{text: ‘Grade’, datafield: ‘bcode’, width: 100 },
{text: ‘State’, datafield: ‘area’, width: 100},
{text: ‘Employee Contribute’, datafield: ‘type1’, cellsalign: ‘right’, width: 150, aggregates: [‘sum’] },
{text: ‘Employer Contribute’, datafield: ‘type2’, cellsalign: ‘right’, width: 150, aggregates: [‘sum’] },
{text: ‘Total Amount’, datafield: ‘total’, cellsalign: ‘right’, width: 100, aggregates: [‘sum’] }],
root: ‘Rows’,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
}
};
var adapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#ordersGrid”).jqxGrid(
{
source: adapter,
rendergridrows: function (obj) {
return obj.data;
}
});
});
});
</script>
</head>
<body class=’default’>
<h3>Employees</h3>
<div id=”jqxgrid”></div>
<h3>PF ledger by employee</h3>
<div id=”ordersGrid”></div>
</body>
</html>Thank you.
Dear jQWidgets Team,
I have already tried the same example by removing g in the beverages.txt and I am able to bet the grid. but when I am trying to click the chart buttons I am getting following error
2jqxgrid.chart.js:106 Uncaught TypeError: Cannot read properties of undefined (reading ‘find’)
at c.<computed>._getChartDataFields (jqxgrid.chart.js:106:51)
at c.<computed>.createChart (jqxgrid.chart.js:185:31)
at t.d [as createChart] (jquery-1.12.4.min.js:2:3856)
at HTMLDivElement.<anonymous> (charting.htm:154:12)
5jqxgrid.chart.js:106 Uncaught TypeError: Cannot read properties of undefined (reading ‘find’)
at c.<computed>._getChartDataFields (jqxgrid.chart.js:106:51)
at c.<computed>.createChart (jqxgrid.chart.js:185:31)
at t.d [as createChart] (jquery-1.12.4.min.js:2:3856)I am posting the code below for your reference
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This example shows how to create a Grid from Array data.</title>
<link rel=”stylesheet” href=”../../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
<script type=”text/javascript” src=”../../../scripts/jquery-1.12.4.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/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.chart.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.pager.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxchart.api.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../../scripts/demos.js”></script>
<style>
#toolbar {
display: flex;
height: 100%;
padding: 0 1rem;
}#toolbar.warning:after {
content: ‘Selected data cannot be used to create a chart.’;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(–smart-error);
}#toolbar > div {
display: flex;
align-items: flex-end;
justify-content: center;
margin-right: 15px;
width: 35px;
height: 30px;
height: 100%;
font-size: 12px;
background-size: contain;
background-repeat: no-repeat;
user-select: none;
cursor: pointer;
}#toolbar > div:hover {
background-color: var(–smart-grid-column-header-background-hover);
}#toolbar > div:active {
background-color: var(–smart-grid-column-header-background-active);
}#toolbar > div.warning {
outline: 2px solid var(–smart-error);
}#column {
background-image: url(“../../../jqwidgets/styles/images/create-column.png”);
}#line {
background-image: url(“../../../jqwidgets/styles/images/create-line.png”);
}#pie {
background-image: url(“../../../jqwidgets/styles/images/create-pie.png”);
}#bar {
background-image: url(“../../../jqwidgets/styles/images/create-bar.png”);
}#area {
background-image: url(“../../../jqwidgets/styles/images/create-area.png”);
}#scatter {
background-image: url(“../../../jqwidgets/styles/images/create-scatter.png”);
}[theme=”dark”] #column {
background-image: url(“../../../jqwidgets/styles/images/create-column-dark.png”);
}[theme=”dark”] #line {
background-image: url(“../../../jqwidgets/styles/images/create-line-dark.png”);
}[theme=”dark”] #pie {
background-image: url(“../../../jqwidgets/styles/images/create-pie-dark.png”);
}[theme=”dark”] #bar {
background-image: url(“../../../jqwidgets/styles/images/create-bar-dark.png”);
}[theme=”dark”] #area {
background-image: url(“../../../jqwidgets/styles/images/create-area-dark.png”);
}[theme=”dark”] #scatter {
background-image: url(“../../../jqwidgets/styles/images/create-scatter-dark.png”);
}
</style>
<script type=”text/javascript”>
window.onload = function() {
var url = “../../sampledata/beverages.txt”;// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘name’, type: ‘string’ },
{ name: ‘type’, type: ‘string’ },
{ name: ‘calories’, type: ‘int’ },
{ name: ‘totalfat’, type: ‘string’ },
{ name: ‘protein’, type: ‘string’ }
],
id: ‘id’,
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);var grid = new jqxGrid(“#jqxgrid”, {
width: ‘100%’,
autoheight: true,
rendertoolbar: function(toolbar){
var template = document.getElementById(‘toolbarTemplate’);
var chartToolbar = document.importNode(template.content, true);
var toolbarElement = toolbar[0];toolbarElement.appendChild(chartToolbar);
toolbarElement.querySelector(‘#column’).addEventListener(‘click’, function () {
grid.createChart(‘column’);
});toolbarElement.querySelector(‘#line’).addEventListener(‘click’, function () {
grid.createChart(‘line’);
});toolbarElement.querySelector(‘#pie’).addEventListener(‘click’, function () {
grid.createChart(‘pie’);
});toolbarElement.querySelector(‘#bar’).addEventListener(‘click’, function () {
grid.createChart(‘bar’);
});toolbarElement.querySelector(‘#area’).addEventListener(‘click’, function () {
grid.createChart(‘area’);
});toolbarElement.querySelector(‘#scatter’).addEventListener(‘click’, function () {
grid.createChart(‘scatter’);
});
},
source: dataAdapter,
showtoolbar: true,
toolbarheight: 50,
sortable: true,
ready: function () {
},
selectionmode: ‘multiplecellsadvanced’,
columns: [
{ text: ‘Name’, datafield: ‘name’, width: 250 },
{ text: ‘Beverage Type’, datafield: ‘type’, width: 250 },
{ text: ‘Calories’, datafield: ‘calories’, width: 180 },
{ text: ‘Total Fat’, datafield: ‘totalfat’, width: 120 },
{ text: ‘Protein’, datafield: ‘protein’, minwidth: 120 }
]
});}
</script>
</head>
<body class=’default’>
<template id=”toolbarTemplate”>
<div id=”toolbar”>
<div id=”column”>Column</div>
<div id=”line”>Line</div>
<div id=”pie”>Pie</div>
<div id=”bar”>Bar</div>
<div id=”area”>Area</div>
<div id=”scatter”>Scatter</div>
</div>
</template>
<div id=”jqxgrid”></div>
</body>
</html>Dear jQWidgets Team,
I have already tried the same example by removing g in the beverages.txt and I am able to bet the grid. but when I am trying to click the chart buttons I am getting following error
2jqxgrid.chart.js:106 Uncaught TypeError: Cannot read properties of undefined (reading ‘find’)
at c.<computed>._getChartDataFields (jqxgrid.chart.js:106:51)
at c.<computed>.createChart (jqxgrid.chart.js:185:31)
at t.d [as createChart] (jquery-1.12.4.min.js:2:3856)
at HTMLDivElement.<anonymous> (charting.htm:154:12)
5jqxgrid.chart.js:106 Uncaught TypeError: Cannot read properties of undefined (reading ‘find’)
at c.<computed>._getChartDataFields (jqxgrid.chart.js:106:51)
at c.<computed>.createChart (jqxgrid.chart.js:185:31)
at t.d [as createChart] (jquery-1.12.4.min.js:2:3856)I am posting the code below for your reference
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This example shows how to create a Grid from Array data.</title>
<link rel=”stylesheet” href=”../../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
<script type=”text/javascript” src=”../../../scripts/jquery-1.12.4.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/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.chart.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.pager.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxchart.api.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../../scripts/demos.js”></script>
<style>
#toolbar {
display: flex;
height: 100%;
padding: 0 1rem;
}#toolbar.warning:after {
content: ‘Selected data cannot be used to create a chart.’;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(–smart-error);
}#toolbar > div {
display: flex;
align-items: flex-end;
justify-content: center;
margin-right: 15px;
width: 35px;
height: 30px;
height: 100%;
font-size: 12px;
background-size: contain;
background-repeat: no-repeat;
user-select: none;
cursor: pointer;
}#toolbar > div:hover {
background-color: var(–smart-grid-column-header-background-hover);
}#toolbar > div:active {
background-color: var(–smart-grid-column-header-background-active);
}#toolbar > div.warning {
outline: 2px solid var(–smart-error);
}#column {
background-image: url(“../../../jqwidgets/styles/images/create-column.png”);
}#line {
background-image: url(“../../../jqwidgets/styles/images/create-line.png”);
}#pie {
background-image: url(“../../../jqwidgets/styles/images/create-pie.png”);
}#bar {
background-image: url(“../../../jqwidgets/styles/images/create-bar.png”);
}#area {
background-image: url(“../../../jqwidgets/styles/images/create-area.png”);
}#scatter {
background-image: url(“../../../jqwidgets/styles/images/create-scatter.png”);
}[theme=”dark”] #column {
background-image: url(“../../../jqwidgets/styles/images/create-column-dark.png”);
}[theme=”dark”] #line {
background-image: url(“../../../jqwidgets/styles/images/create-line-dark.png”);
}[theme=”dark”] #pie {
background-image: url(“../../../jqwidgets/styles/images/create-pie-dark.png”);
}[theme=”dark”] #bar {
background-image: url(“../../../jqwidgets/styles/images/create-bar-dark.png”);
}[theme=”dark”] #area {
background-image: url(“../../../jqwidgets/styles/images/create-area-dark.png”);
}[theme=”dark”] #scatter {
background-image: url(“../../../jqwidgets/styles/images/create-scatter-dark.png”);
}
</style>
<script type=”text/javascript”>
window.onload = function() {
var url = “../../sampledata/beverages.txt”;// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘name’, type: ‘string’ },
{ name: ‘type’, type: ‘string’ },
{ name: ‘calories’, type: ‘int’ },
{ name: ‘totalfat’, type: ‘string’ },
{ name: ‘protein’, type: ‘string’ }
],
id: ‘id’,
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);var grid = new jqxGrid(“#jqxgrid”, {
width: ‘100%’,
autoheight: true,
rendertoolbar: function(toolbar){
var template = document.getElementById(‘toolbarTemplate’);
var chartToolbar = document.importNode(template.content, true);
var toolbarElement = toolbar[0];toolbarElement.appendChild(chartToolbar);
toolbarElement.querySelector(‘#column’).addEventListener(‘click’, function () {
grid.createChart(‘column’);
});toolbarElement.querySelector(‘#line’).addEventListener(‘click’, function () {
grid.createChart(‘line’);
});toolbarElement.querySelector(‘#pie’).addEventListener(‘click’, function () {
grid.createChart(‘pie’);
});toolbarElement.querySelector(‘#bar’).addEventListener(‘click’, function () {
grid.createChart(‘bar’);
});toolbarElement.querySelector(‘#area’).addEventListener(‘click’, function () {
grid.createChart(‘area’);
});toolbarElement.querySelector(‘#scatter’).addEventListener(‘click’, function () {
grid.createChart(‘scatter’);
});
},
source: dataAdapter,
showtoolbar: true,
toolbarheight: 50,
sortable: true,
ready: function () {
},
selectionmode: ‘multiplecellsadvanced’,
columns: [
{ text: ‘Name’, datafield: ‘name’, width: 250 },
{ text: ‘Beverage Type’, datafield: ‘type’, width: 250 },
{ text: ‘Calories’, datafield: ‘calories’, width: 180 },
{ text: ‘Total Fat’, datafield: ‘totalfat’, width: 120 },
{ text: ‘Protein’, datafield: ‘protein’, minwidth: 120 }
]
});}
</script>
</head>
<body class=’default’>
<template id=”toolbarTemplate”>
<div id=”toolbar”>
<div id=”column”>Column</div>
<div id=”line”>Line</div>
<div id=”pie”>Pie</div>
<div id=”bar”>Bar</div>
<div id=”area”>Area</div>
<div id=”scatter”>Scatter</div>
</div>
</template>
<div id=”jqxgrid”></div>
</body>
</html>Dear Tech team,
Can we bind the charting grid to json. Please provide an example.
Regards
ksheerApril 15, 2021 at 12:48 am in reply to: card view Uncaught Invalid property: cardview card view Uncaught Invalid property: cardview #115071Dear Jqwidgets
it is working fine from jQWidgets v12.0.1 but when I copy the same in another application it is giving only the button cardview and shows no grid.
jqxcore.js:15 Uncaught Invalid property: cardview in console.
May 6, 2014 at 11:54 am in reply to: Master-Detail Grid: Resetting Datasource Master-Detail Grid: Resetting Datasource #54040Dear Peter,
Can we have same example with oracle database. It will be of great help to my project.
-
AuthorPosts