Sometimes you want to be able to have master detail views in your applications. Since there is no connected property to bind datasets in WIX yet we can accomplish this using this trick.
Let’s say we have a table and a dataset with courses in it and then another dataset with attendees in. When we click on a course we would like to connect and show all attendees from a course.
The datasets are binded to the above tables, table1 and table2. When we click on table1 that row is selected (demands that you specify row-select in table settings). Get the title and also add a field in the second dataset with courseTitles to connect to.
The first table which we connect to table1.
The second table which we connect to table2.
Let’s add the code on a page level now.
import wixData from ‘wix-data’;
$w.onReady(function () {
console.log("page is loaded");
});
export function table1_onRowSelect(event) {
//Get the selected rows title property
let selectedRowTitle = event.rowData[“title”];
console.log(selectedRowTitle);
wixData.query("secondDatasetName").eq("connectedFieldName", selectedRowTitle).find().then((results) => {
let items = results.items;
$w("#table2").rows = items;
console.log("Rows added");
});
}
Very easy, works like a charm. Happy coding in WIX.