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

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