CODEWITHSUNDEEP
javascriptangularjsonclickrowangular-ui-grid
corry
corry

Reputation: 1529

Angular UI Grid show another view when row is clicked

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

Upvotes: 0

Views: 1784

Answers (3)

felix at housecat
felix at housecat

Reputation: 344

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

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.

Upvotes: 0

LimoJoe
LimoJoe

Reputation: 13

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 ;)

Upvotes: 1

svikasg
svikasg

Reputation: 93

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});

Upvotes: 1

Related Questions