Angular UI Grid show another view when row is clicked

Question

This topic is very related with this one. Briefly, there is a ui grid (table) and when you click (touch) on an row item in table, it shows another view, but I'm stuck (ES5):

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.router']);

app.controller('MainCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) {
  $scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };

  $scope.gridOptions.columnDefs = [
    { field: "contactId", displayName: "CID", width: 60 },
    { field: "name", displayName: "Contact Name" } 
  ];

  $scope.myData = [{contactId: 1, name: "Contact 1"},
                   {contactId: 2, name: "Contact 2"},
                   {contactId: 3, name: "Contact 3"},
                   {contactId: 4, name: "Contact 4"}];

  $scope.gridOptions.data = [];

  $scope.gridOptions.data = $scope.myData;

  $scope.gridOptions.multiSelect = false;
  $scope.gridOptions.modifierKeysToMultiSelect = false;
  $scope.gridOptions.noUnselect = true;

  $scope.gridOptions.onRegisterApi = function (gridApi) {
        //set gridApi on scope
        $scope.gridApi = gridApi;
        gridApi.selection.on.rowSelectionChanged($scope, function (row) {
            $state.go("contact.detail.view", {contactId: row.entity.contactId});
        });
    }
}]);

Here is the plunker http://plnkr.co/edit/eHLXMDd7e3vnjsf2BWWf?p=preview

svikasg · Answer 1 · 2015-07-29T20:33:15.370

1

For one, I do not see a "DetailController" defined that you are using to call on click of a contact.

And secondly, you might want to pass $state to your MainCtrl to be able to use $state.go

Updated answer after the above edits ->

In your app's routing, you are defining a $state as 'contact', so you might want to use that for when you are trying to use $state.go

$state.go('contact', {contactId: row.entity.contactId});

edited Jul 29 '15 at 20:33

answered Jul 28 '15 at 16:21

svikasg

93
6

Tnx, I corrected those mistakes [forked plunker](http://plnkr.co/edit/WOHKrlEWix1GYj0Q1nW8?p=preview), but click still does not work – corry Jul 29 '15 at 12:26
I've updated with new suggestion. Check if that works. – svikasg Jul 29 '15 at 21:06
I've tried just with 'contact' state, still doesn't work. – corry Jul 30 '15 at 07:37

score 1 · Answer 2 · answered Jul 30 '15 at 14:25

Add to your controller these lines:

     function rowTemplate() {
        return '<div ng-dblclick="grid.appScope.rowDoubleClick(row)" >' +
                '  <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"  ui-grid-cell>'+
                 ' </div> ' +
               '</div>';
    }

    $scope.rowDoubleClick = function (row) {
        alert(console.log(row.entity));            
    };

And place to your gridOptions rowTemplate: rowTemplate(),

And in rowDblClick reroute to your view/template which you need. Or another solution could be to have a watcher on rowDblClick, and then reroute to your view/template. Not whole solution, but at least something ;)

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

I have checked a lit bit your Plunkr and I have done a couple of changes just to make it work, you can see the result here.

Please check

When you specify a state with dots, parent must exists

Parent MUST Exist

If you register only a single state, like contacts.list, you MUST define a state called contacts at some point, or else no states will be registered. The state contacts.list will get queued until contacts is defined. You will not see any errors if you do this, so be careful that you define the parent in order for the child to get properly registered.

Then when you declare a controller, such DetailController, it must exists.

I hope that is what you where expecting.

Angular UI Grid show another view when row is clicked

3 Answers3