Showing posts with label angularJS ng-grid. Show all posts

Getting selected rows from ng-grid AngularJS

In this post you are going to learn how to get the selected rows from ng-grid in AngularJS.

Read our previous posts on ng-grid: ng-grid in AngularJS

If you are using a ng-grid then you may need to get the selected rows. You can do this using selectedItems property.

Based on the ng-grid document(http://angular-ui.github.io/ng-grid/) selectedItems is the property of ng-grid .

Consider you have a ng-grid like below.

<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
</div>
</body>

and your javascript would be

$scope.myData=[{ ID:1, Name:'John',Country:'USA'},
{ID:2, Name:'Sachin' , Country:'India'},
{ ID:3, Name:'Smith' , Country:'UK'} ];

//define a array to hold selected rows
$scope.selectedRows=[];

$scope.myGrid={
data:'myData',
selectedItems:$scope.selectedRows
};

Now you can use $scope.selectedRows array to show the selected rows like below.

<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
<pre>{{selectedRows}}</pre>
</div>
</body>

Selecting single row in ng-grid:

If you want your users to click on only one row(single row) of ng-grid then you can do it by using "multiSelect: false" property. By default the multiSelect property will be set to true so that grid allows us to click on more than one row.

To disable multiSelect of ng-grid then change your javascript to

$scope.myGrid={
data:'myData',
multiSelect:false,
selectedItems:$scope.selectedRows
};

Now to show the selected value use below code

<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
<pre>{{selectedRows}}</pre>
</div>
</body>

As we are having single record in our $scope.selectedRows array we are using selectedUsers[0] (First record of the array)

In this way you can get the selected rows form ng-grid in AngularJS

Hope it helps you.

For more useful posts on AngularJS visit: AngularJS

hide columns in ng-grid AngularJS

In this post you are going to learn how to hide specific columns in ng-grid (or) how to show only specific columns in ng-grid in AngularJS.

Please read my previous post on ng-grid to understand this post easily: ng-grid in AngularJS

Consider you have the following HTML code

<html ng-app="myApp">
<head>
<title>My ngGrid Demo</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="myAppstyle.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-1.3.2.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
</div>
</body>
</html>

and the required AngularJS code to show the ng-grid is

var myAppRoot = angular.module('myApp', ['ngGrid']);
 
myAppRoot.controller('MyngGridCtrl', function ($scope) {
    $scope.myData = [{ ID: 1, FirstName: 'John', LastName: 'somename', Country: 'USA' },
                   { ID: 2, FirstName: 'Sachin', LastName: 'somename', Country: 'India' },
                  { ID: 3, FirstName: 'Smith', LastName: 'somename', Country: 'UK' }
    ];
 
    $scope.myGrid = { data: 'myData' };
});

But when you use the above code, all the columns in $scope.myData object will be showed in the grid. If you want to show only specific columns then use the following code.

Let us say, you want to show only FirstName and LastName, then change the code of ng-grid like below

$scope.myGrid = {
    data: 'myData',
    columnDefs: [
           { field: 'FirstName', displayName: 'MyFirstName' },
           { field: 'LastName', displayName: 'MyLastName' },
    ]
};

The above code shows only FirstName and LastName columns and hides all the remaining columns.

In this way you can show specific columns in ng-grid. Hope it helps you.

ng-grid in AngularJS

In this article i am going to explain how to use ng-grid in AngularJS , ng-grid example in AngularJS.

Before using ng-grid in AngularJS you have to add the following references.

1.JQuery
2.AngularJS
3.ngGrid's javascript files
4.ngGrid css files

you can download the above references from this link: angular ngGrid

Consider you have the following HTML code

<html ng-app="myApp">
<head>
<title>My ngGrid Demo</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="myAppstyle.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-1.3.2.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
</div>
</body>
</html>

now add some styles to grid-add following css to your myAppstyle.css

.ngGridStyle {
border: 1px solid black;
width: 200px;
height: 400px
}

Now add the following code to your app.js file

var myAppRoot = angular.module('myApp', ['ngGrid']);

myAppRoot.controller('MyngGridCtrl', function($scope) {

//define some object here
$scope.myData=[{ ID:1, Name:'John',Country:'USA'},
{ID:2, Name:'Sachin' , Country:'India'},
{ ID:3, Name:'Smith' , Country:'UK'} ];

//now add the above object to your ngGrid
$scope.myGrid={data:'myData'};
});

Now when you run your code you will see the data in Grid.

To hide specific columns in ng-grid read: hide columns in ng-grid AngularJS

C#.NET, ADO.NET, ASP.NET, JavaScript, JQuery, AngularJS

Pages

Getting selected rows from ng-grid AngularJS

Selecting single row in ng-grid:

hide columns in ng-grid AngularJS

ng-grid in AngularJS

For more articles on AngularJS refer: angularJS

Flag Counter

alexa

Total Pageviews