jQuery UI Widgets Forums Getting Started Can I use 1 grid to filter another grid both having some common grid columns?

This topic contains 3 replies, has 4 voices, and was last updated by  svetoslav_borislavov 2 weeks, 3 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • 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!


    Dimitar
    Participant

    Hello insiderbeacon,

    Please check out the demo Master-Details. We hope it is helpful to you.

    Best Regards,
    Dimitar

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


    ksheer
    Participant

    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>

    Hi,

    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 Borislavov

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

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

You must be logged in to reply to this topic.