Reputation: 656
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?
Upvotes: 3
Views: 86
Reputation: 183
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;
}
}
});
});
Upvotes: 0