jqx-grid - select condition on a different table

Question

Using angular 1.x and jqx-grid, I have two separate tables on the same page (same scope).

The tables have a one-to-one relationship with one another. A Commodity table and a CommodityDetails table. The Commodity table has a CommodityDetailsId column corresponding to the Id on the CommodityDetails table.

I'd like to be able to click the CommodityDetailsId in the Commodity table and on-click, I'd like the CommodityDetails table's corresponding row to be scrolled to and highlighted.

In a particular example I came across, the jqx api provides the grid with a selectRow(int) function that allows you to select the particular row on a grid. Now this works across differing tables, however I have yet to come across a way to select a row based on a condition. I would need something along the lines of selectRowBasedOn(x => x.CommodityDetailsId === commodityDetailsGrid.Id) or something along those lines.

Is there a way to select/highlight a row in jqx-grids based on a condition of the grid?

Answer 1

Saw this post randomly. I happened to work on something similar recently. I modified my own code as an example. Not sure if it's suitable for your use case scenario, but hope it helps.

You need a on rowclick listener for the grid you first click. Then, you get the Id from the row you selected. After that, use a for loop to find the corresponding row in another grid. Finally, use selectrow to select the row.

Example: https://jsfiddle.net/gvy2s81w/ (You need to modify it to fit your case!)

html code:

<div id="commodityGrid"></div>
<div id="commodityDetailsGrid"></div>

JavaScript + jQuery code:

$(document).ready(function () {
    // Test data
    var commodityData = [
        { CommodityDetailsId: 1, Name: 'Commodity 1' },
        { CommodityDetailsId: 2, Name: 'Commodity 2' },
        { CommodityDetailsId: 3, Name: 'Commodity 3' }
    ];

    var commodityDetailsData = [
        { Id: 1, Detail: 'Detail 1' },
        { Id: 2, Detail: 'Detail 2' },
        { Id: 3, Detail: 'Detail 3' }
    ];

    // Create dataAdapters
    var commodityDataAdapter = new $.jqx.dataAdapter({ localdata: commodityData, datatype: "array" });
    var commodityDetailsDataAdapter = new $.jqx.dataAdapter({ localdata: commodityDetailsData, datatype: "array" });

    // Initialize your jqxGrids
    var commodityGrid = $("#commodityGrid").jqxGrid({
        width: 850,
        height: 150,
        source: commodityDataAdapter,
        columns: [
            { text: 'CommodityDetailsId', datafield: 'CommodityDetailsId', width: 180 },
            { text: 'Name', datafield: 'Name', width: 180 }
        ]
    });

    var commodityDetailsGrid = $("#commodityDetailsGrid").jqxGrid({
        width: 850,
        height: 150,
        source: commodityDetailsDataAdapter,
        columns: [
            { text: 'Id', datafield: 'Id', width: 180 },
            { text: 'Detail', datafield: 'Detail', width: 180 }
        ]
    });

    // Add a click event handler to the Commodity grid
    commodityGrid.on('rowclick', function (event) {
        var args = event.args;
        var row = args.rowindex;
        var data = commodityGrid.jqxGrid('getrowdata', row);

        // Get the CommodityDetailsId from the clicked row
        var commodityDetailsId = data.CommodityDetailsId;

        // Find the corresponding row in the CommodityDetails grid
        var rows = commodityDetailsGrid.jqxGrid('getrows');
        for (var i = 0; i < rows.length; i++) {
            if (rows[i].Id === commodityDetailsId) {
                // Select the row and break the loop
                commodityDetailsGrid.jqxGrid('selectrow', i);
                break;
            }
        }
    });

    // Add a click event handler to the CommodityDetails grid
    commodityDetailsGrid.on('rowclick', function (event) {
        var args = event.args;
        var row = args.rowindex;
        var data = commodityDetailsGrid.jqxGrid('getrowdata', row);

        // Get the Id from the clicked row
        var id = data.Id;

        // Find the corresponding row in the Commodity grid
        var rows = commodityGrid.jqxGrid('getrows');
        for (var i = 0; i < rows.length; i++) {
            if (rows[i].CommodityDetailsId === id) {
                // Select the row and break the loop
                commodityGrid.jqxGrid('selectrow', i);
                break;
            }
        }
    });
});