Load one ui grid based on row selected from another ui grid - angularjs

Question

I have a UI grid component and when you click on a row, I would like it to load the contents of another ui grid component on the page.
How would you write a function to tell the grid to update the second grid based on a rest api call with parameter from selected from first grid row? As an example, the first grid would be a list of states and the second grid would show all of the cities within the selected state.

Answer 1

Here are the steps to achieve what you are looking for.
Register the Grid API
Call modifyRows
Put your secoundary function call inside the onRowSelection call using .get selectedRows() to get all selected rows.
here is a quick example:
$scope.yourGridName.onRegisterApi = function (gridApi) {
// Set gridApi on scope, if you have more then one grid,
// Your grid api name (gApi in this case)must be unique
$scope.gApi = gridApi;
// Allow row modification
$scope.gApi.grid.modifyRows($scope.requestsGrid.data);
// On a change of selection
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
// Get current selected row, current row is an array
var currentRow = $scope.gApi.selection.getSelectedRows();
//put your secondary call for your second grid here ex:
var config = {
params : {param : currentRow[0].prop}
}
$scope.get("/your/URL", config)
.then (function (data) { //success callback })
.then (function (data, status...etc) { //error callback})
.finally( function(data,...etc) {//reset your grid})
});
};
Let me know if this resolves your issue.
http://ui-grid.info/docs/#/tutorial