jQuery UI Widgets › Forums › Getting Started › Can I use 1 grid to filter another grid both having some common grid columns?
Tagged: filter, grid, jqxGrid ;, master-details, row
This topic contains 3 replies, has 4 voices, and was last updated by svetoslav_borislavov 2 years, 2 months ago.
-
Author
-
October 26, 2013 at 9:43 pm Can I use 1 grid to filter another grid both having some common grid columns? #31390
lets say I have 2 tables that I want to use: 1) has varying qualifying characteristics of the other table 2) has all the grid columns that I wish to display on the site.
Both are linked by first name, last name.
The first table I would like to use as a FILTER table.
Table 1 fields: First Name, Last Name, quality1, quality2, quality3, quality4, etc..
Table 2 fields: First Name, Last Name, City, State, Zip, Phone, Best Time to Call
I would like to use #1 as a filtering table of #2 whereby selecting various quality#’s automatically selects records in table #2.
Is this possible using Jgrid?
Thanks for your time and awesome widgets!
October 28, 2013 at 10:54 am Can I use 1 grid to filter another grid both having some common grid columns? #31432Hello insiderbeacon,
Please check out the demo Master-Details. We hope it is helpful to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/November 20, 2022 at 9:45 pm Can I use 1 grid to filter another grid both having some common grid columns? #127537Dear 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>November 21, 2022 at 12:31 pm Can I use 1 grid to filter another grid both having some common grid columns? #128136Hi,
You are swapping the data fields array with the columns’ array. Look in the second grid’s setting the column field is your data fields and in the row select you are setting a new data source for your grid. There your data fields array is actually your columns’ definitions
Best regards,
Svetoslav BorislavovjQWidgets Team
https://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.