Angularjs ui grid example

Angularjs ui grid example DEFAULT
Filtering is an important feature in any data grid, since you will be dealing to hundreds on rows. AngularJS UI-Grid provides simple methods to filter rows. You can easily add filters to all columns or on specific columns only. Here in this post I’ll explain how to implement or add filtering to a paging enabled UI-Grid, add filter to specific UI-Grid columns and finally add a dropdown list to a UI-Grid column for filtering.

Implementing Filtering in AngularJS UI-Grid

See this demo

To enable filters to UI-Grid columns, you will have to set the enableFiltering option to your grid. The option takes a Boolean value, that is, true or false. Set true to enable the filter and false to disable the filter. The default is false. For example, to enable filter on UI-Grid, set

enableFiltering: true

Now, lets apply the filtering option on a real example.

JSON Data for UI-Grid

I am using JSON data to populate my UI-Grid. Below in the data, saved in sample.json file. I’ll extract the data using $http Get method.

1) Add Filtering to All UI-Grid Columns

In my first example here, I am applying filtering to all the columns of my UI-Grid.

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs//angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid//ui-grid.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid//ui-grid.min.css" type="text/css"> <style> .uiGrd { width: px; height: px; } </style> </head> <body> <div ng-app="myApp" ng-controller="myController"> <p>{{title}}</p> <div class="uiGrd" id="grd" ui-grid="gridOptions" ui-grid-pagination> </div> </div> </body> <script> var app = angular.module('myApp', ['ui.grid', 'ui.grid.pagination']); app.controller('myController', function ($scope, $http) { $scope.title = "Adding Filters to AngularJS UI-Grid" $scope.gridOptions = { paginationPageSizes: [5, 10, 20], paginationPageSize: 5, enableFiltering: true }; var request = { method: 'get', url: 'https://www.encodedna.com/library/sample.json', dataType: 'json', contentType: "application/json" }; $http(request) .success(function (jsonData) { $scope.gridOptions.data = jsonData; }) .error(function () { }); }); </script> </html>

Try it

The UI-Grid is paging-enabled, that is, I have applied pagination to the UI-Grid. This is to make sure that the filtering will work on paging enabled grid.

I have added the enableFiltering option (with value set as true) inside $scope.gridOptions. I have not mentioned on which column. It will apply filtering to all columns.

See this demo

This is a very good start. Look how simple it is to apply filtering in AngularJS UI-Grid.

2) Add Filtering to Specific UI-Grid Columns Only

Now, let’s limit our filtering on specific columns only. This feature is useful when you want restrict filtering to few columns. For example, I have three columns and I want to apply filters only on two columns, that is, on Bird Name and Type.

You just have to make little changes in the $scope.gridOptions.

$scope.gridOptions = { paginationPageSizes: [5, 10, 20], paginationPageSize: 5, enableFiltering: true, columnDefs: [ { field: 'ID', enableFiltering: false }, { field: 'Bird_Name' }, { field: 'Type' } ] };

See this demo

What I am doing here? I have first set the enableFiltering option as true. This, as you have seen in the first example, will add filters on all the columns. Next, I am defining each column with specific parameters. I have disabled filtering to the first column.

Important Point

Defining columns in this way has another benefit. You can hide a column in the grid, by not adding the column name in the columnDefs option. For example, if you remove option field: 'type', (from the above grid options) the UI-Grid will only show ID and Bird_Name, where the second column will have the filtering option.

This is a very nice feature.

3) Add Dropdown List to a Specific Column to Filter

You can also add a dropdown list as a filtering option. The dropdown will have pre-populated or pre-defined items (or values), with which you can filter the rows.

To enable dropdown filtering, you’ll first have to add uiGridConstants service to the controller function, like I have defined the $http service.

app.controller('myController', function ($scope, $http, uiGridConstants) {

Next, we need data to populate our dropdown list. Here’s an array of type of birds. The types are defined in the JSON file (see above). I’ll collect the unique types and create an array.

var typeOfBirds = [ { value: 'Dove', label: 'Dove' }, { value: 'Hawk', label: 'Hawk' }, { value: 'Hawk', label: 'Woodpecker' } ];

Finally, I’ll add a dropdown for filtering to the column Type.

{ field: 'Type', filter: { selectOptions: typeOfBirds, type: uiGridConstants.filter.SELECT} }

Here’s the complete controller script to add dropdown list to a column for filtering.

<script> var app = angular.module('myApp', ['ui.grid', 'ui.grid.pagination']); app.controller('myController', function ($scope, $http, uiGridConstants) { $scope.title = "Adding Filters to AngularJS UI-Grid" var typeOfBirds = [ { value: 'Dove', label: 'Dove' }, { value: 'Hawk', label: 'Hawk' }, { value: 'Woodpecker', label: 'Woodpecker' } ]; $scope.gridOptions = { paginationPageSizes: [5, 10, 20], paginationPageSize: 5, enableFiltering: true, columnDefs: [ { field: 'ID', enableFiltering: false }, { field: 'Bird_Name' }, { field: 'Type', filter: { selectOptions: typeOfBirds, type: uiGridConstants.filter.SELECT} } ] }; var request = { method: 'get', url: 'sample.json', dataType: 'json', contentType: "application/json" }; $http(request) .success(function (jsonData) { $scope.gridOptions.data = jsonData; }) .error(function () { }); }); </script>

See this demo


That’s it. Thanks for reading. &#;

&#; PreviousNext &#;


Sours: https://www.encodedna.com/angularjs/tutorial/how-to-implement-or-add-filtering-to-angularjs-ui-grid.htm

AngularJS UI Grid (Sorting, Filtering, Paging, Grouping)

Here we will learn UI grid (ng-grid) in angularjs with example, UI grid with sorting, filtering, paging/pagination and grouping in angularjs with examples.

AngularJS UI Grid

UI Grid formerly known as ng-grid which is purely built on angularjs library and it covered all core grid features like sorting, paging, filtering, exporting, etc.

Following are the features available in UI Grid.

  1. Column Sorting either asc or desc or none
  2. Column Filtering
  3. Bind complex functionalities to cell values
  4. Ability to change header and cell content with custom templates
  5. Grouping
  6. Expandable Rows

Steps to use UI-Grid in AngualrJS

Following are the steps to use ui-grid in angularjs applications.

First, create a new application and open page and add the following angularjs reference file in the header section.

<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs//angular.min.js"></script>

Now add the following ui-grid css and script files in header section of your page

<script src="http://ui-grid.info/release/ui-grid.js"></script>

<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">

Now add ui.grid module reference in angularjs application while defining module like as shown following

var app = angular.module("uigridApp", ["ui.grid"]);

In JavaScript file define array of object like as shown below to render data with ui-grid

$scope.users = [

{ name: "Suresh Dasari", age: 30, location: 'Chennai' },

.

.

.

{ name: "Rohini Alavala", age: 29, location: 'Chennai' }

];

Add following css style to your application to define ui grid dimensions

<style type="text/css">

.myGrid {

width: px;

height: px;

}

</style>

In html code we need to define ui-grid directive and specify JSON object to render data with ui-grid like as shown following

<div ng-controller="uigridCtrl">

<div ui-grid="{ data: users }" class="myGrid"></div>

</div>

This is how we can use ui grid in our angularjs applications to render data in table formats.

AngularJS UI Grid Example

Following is the example of showing data in table format using ui grid in angularjs applications.

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org//xhtml">

<head>

<title>

Angularjs UI-Grid Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs//angular.min.js"></script>

<script src="http://ui-grid.info/release/ui-grid.js"></script>

<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">

<script type="text/javascript">

var app = angular.module("uigridApp", ["ui.grid"]);

app.controller("uigridCtrl", function ($scope) {

$scope.users = [

{ name: "Madhav Sai", age: 10, location: 'Nagpur' },

{ name: "Suresh Dasari", age: 30, location: 'Chennai' },

{ name: "Rohini Alavala", age: 29, location: 'Chennai' },

{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },

{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }

];

});

</script>

<style type="text/css">

.myGrid {

width: px;

height: px;

}

</style>

</head>

<body ng-app="uigridApp">

<h2>AngularJS UI Grid Example</h2>

<div ng-controller="uigridCtrl">

<div ui-grid="{ data: users }" class="myGrid"></div>

</div>

</body>

</html>

If we run above code our data will be shown in grid format and by default sorting functionality enabled for all columns. Now we will run and see the output of ui grid example to show data in table format.

Output of AngularJS UI Grid Example

Following is the result of binding data in table format using ui grid module in angularjs applications.

Angularjs ui grid example result or output

AngularJS UI Grid Sorting

In angularjs by using ui grid we can implement or remove sorting functionality for columns based on our requirement with few lines of code.

Syntax of AngularJS UI Grid Sorting

Following is the syntax of implementing sorting functionality for columns in angularjs ui grid.

$scope.gridOptions = {

enableSorting: true,

columnDefs: [

{ field: 'name' },

{ field: 'age' },

{ field: 'location', enableSorting: false }

]

};

If you observe above code, we enabled sorting feature by setting property enableSorting: true and disabling sorting feature for particular columns by setting property enableSorting: false based on our requirement.

AngularJS UI Grid Sorting Example

Following is the example of using a sorting feature in angularjs ui grid.

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org//xhtml">

<head>

<title>

Angularjs UI-Grid Sorting Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs//angular.min.js"></script>

<script src="http://ui-grid.info/release/ui-grid.js"></script>

<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">

<script type="text/javascript">

var app = angular.module("uigridApp", ["ui.grid"]);

app.controller("uigridCtrl", function ($scope) {

$scope.gridOptions = {

enableSorting: true,

columnDefs: [

{ field: 'name' },

{ field: 'age' },

{ field: 'location', enableSorting: false }

],

onRegisterApi: function (gridApi) {

$scope.grid1Api = gridApi;

}

};

$scope.users = [

{ name: "Madhav Sai", age: 10, location: 'Nagpur' },

{ name: "Suresh Dasari", age: 30, location: 'Chennai' },

{ name: "Rohini Alavala", age: 29, location: 'Chennai' },

{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },

{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }

];

$scope.gridOptions.data = $scope.users;

});

</script>

<style type="text/css">

.myGrid {

width: px;

height: px;

}

</style>

</head>

<body ng-app="uigridApp">

<h2>AngularJS UI Grid Sorting Example</h2>

<div ng-controller="uigridCtrl">

<div ui-grid="gridOptions" class="myGrid"></div>

</div>

</body>

</html>

Now we will run and see the output of angularjs ui grid sorting example.

Output of AngularJS UI Grid Sorting Example

Following is the result of implementing a sorting feature in angularjs ui grid application.

Angularjs ui grid sorting example result or output

AngularJS UI Grid Filtering

If we use UI Grid in angularjs applications, we can implement filtering functionality easily with few configurations.

Syntax of AngularJS UI Grid Filtering

Following is the syntax of implementing filter/search functionality for columns in angularjs ui grid.

$scope.gridOptions = {

enableFiltering: true,

columnDefs: [

{ field: 'name' },

{ field: 'age' },

{ field: 'location', enableFiltering: false }

],

onRegisterApi: function (gridApi) {

$scope.grid1Api = gridApi;

}

};

If you observe above code, we enabled filtering feature by setting property enableFiltering: true and disabled filtering feature for particular columns by setting property enableFiltering: false based on our requirement.

AngularJS UI Grid Filtering Example

Following is the example of implementing a filtering feature using angularjs ui grid.

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org//xhtml">

<head>

<title>

Angularjs UI-Grid Filtering Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs//angular.min.js"></script>

<script src="http://ui-grid.info/release/ui-grid.js"></script>

<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">

<script type="text/javascript">

var app = angular.module("uigridApp", ["ui.grid"]);

app.controller("uigridCtrl", function ($scope) {

$scope.gridOptions = {

enableFiltering: true,

columnDefs: [

{ field: 'name' },

{ field: 'age' },

{ field: 'location', enableFiltering: false }

],

onRegisterApi: function (gridApi) {

$scope.grid1Api = gridApi;

}

};

$scope.users = [

{ name: "Madhav Sai", age: 10, location: 'Nagpur' },

{ name: "Suresh Dasari", age: 30, location: 'Chennai' },

{ name: "Rohini Alavala", age: 29, location: 'Chennai' },

{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },

{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }

];

$scope.gridOptions.data = $scope.users;

});

</script>

<style type="text/css">

.myGrid {

width: px;

height: px;

}

</style>

</head>

<body ng-app="uigridApp">

<h2>AngularJS UI Grid Fitering Example</h2>

<div ng-controller="uigridCtrl">

<div ui-grid="gridOptions" class="myGrid"></div>

</div>

</body>

</html>

If you observe above example, we enabled filtering feature with enableFiltering: true property and disabled filtering feature for “location” column.

Output of AngularJS UI Grid Filtering Example

Following is the result of angularjs ui grid filtering example.

Angularjs ui grid filtering example result or output

AngularJS UI Grid Paging / Pagination

In angularjs UI Grid we can implement paging/pagination easily with few lines of code.

Syntax of AngularJS UI Grid with Paging

Following is the syntax of implementing pagination for ui grid

var app = angular.module("uigridApp", ["ui.grid", "ui.grid.pagination"]);

app.controller("uigridCtrl", function ($scope) {

$scope.gridOptions = {

paginationPageSizes: [25, 50, 75],

paginationPageSize: 5,

columnDefs: [

{ field: 'name' },

{ field: 'age' },

{ field: 'location' }

]

};

});

<div ng-controller="uigridCtrl">

<div ui-grid="gridOptions" ui-grid-pagination class="myGrid"></div>

</div>

As mentioned in above code we need add “ui.grid.pagination” reference to angular module and need  to define pagination size.

AngularJS UI Grid Paging / Pagination Example

Following is the example of implementing paging to UI Grid in angularjs application.

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org//xhtml">

<head>

<title>

Angularjs UI-Grid Paging Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs//angular.min.js"></script>

<script src="http://ui-grid.info/release/ui-grid.js"></script>

<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">

<script type="text/javascript">

var app = angular.module("uigridApp", ["ui.grid", "ui.grid.pagination"]);

app.controller("uigridCtrl", function ($scope) {

$scope.gridOptions = {

paginationPageSizes: [25, 50, 75],

paginationPageSize: 5,

columnDefs: [

{ field: 'name' },

{ field: 'age' },

{ field: 'location' }

],

onRegisterApi: function (gridApi) {

$scope.grid1Api = gridApi;

}

};

$scope.users = [

{ name: "Madhav Sai", age: 10, location: 'Nagpur' },

{ name: "Suresh Dasari", age: 30, location: 'Chennai' },

{ name: "Rohini Alavala", age: 29, location: 'Chennai' },

{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },

{ name: "Sateesh Chandra", age: 27, location: 'Vizag' },

{ name: "Siva Prasad", age: 38, location: 'Nagpur' },

{ name: "Sudheer Rayana", age: 25, location: 'Kakinada' },

{ name: "Honey Yemineni", age: 7, location: 'Nagpur' },

{ name: "Mahendra Dasari", age: 22, location: 'Vijayawada' },

{ name: "Mahesh Dasari", age: 23, location: 'California' },

{ name: "Nagaraju Dasari", age: 34, location: 'Atlanta' },

{ name: "Gopi Krishna", age: 29, location: 'Repalle' },

{ name: "Sudheer Uppala", age: 19, location: 'Guntur' },

{ name: "Sushmita", age: 27, location: 'Vizag' }

];

$scope.gridOptions.data = $scope.users;

});

</script>

<style type="text/css">

.myGrid {

width: px;

height: px;

}

</style>

</head>

<body ng-app="uigridApp">

<h2>AngularJS UI Grid Paging Example</h2>

<div ng-controller="uigridCtrl">

<div ui-grid="gridOptions" ui-grid-pagination class="myGrid"></div>

</div>

</body>

</html>

Now we will run and see the output of above example.

Output of AngularJS UI Grid Pagination Example

Following is the result of implementing pagination to UI grid in angularjs application.

Angularjs ui grid paging example result or output

Sours: https://www.tutlane.com/tutorial/angularjs/angularjs-ui-grid-sorting-filtering-paging-grouping
  1. My ccsf web4
  2. Norther tool
  3. Subaru power steering o ring
  4. Steel pier tickets

AngularJS uiGrid Module Example

  • Angular ui.grid module is external library for AngularJS to create table.
  • In this demo, "We will create a table using Angular ui grid and YouTube Google developer video json data".
  • $resource is used for create a AJAX request to download the Google developer channel as JSON data.
  • The response for YouTube is a big JSON object.From this response we have used category and title to create a new object.
  • Below code shows the used of ui.grid module injection in AngularJS application.
<!DOCTYPE html> <html ng-app="myApp">

<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs//angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs//angular-resource.min.js"></script>

<script src="//ui-grid.info/release/ui-grid-unstable.min.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<meta charset="utf-8">
<title>AngularJS data grid Example</title>
</head>

<body ng-controller="MyController">
<h3>'ui.grid' module Example</h3>
<div ui-grid="{ data: myData }" class="grid"></div>
<script>
var myApp = angular.module("myApp", ['ui.grid', 'ngResource']);
myApp.controller("MyController",
["$scope", "$resource", function($scope, $resource) {
$scope.myData = [];

var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published");

youtubeVideoService.get()
.$promise.then(function(responseData) {
angular.forEach(responseData.data.items,
function(aSingleRow) {
$scope.myData.push({
"category": aSingleRow.category,
"title": aSingleRow.title
});

});
});
}]);
</script>
</body>

</html>

  • The output of the above code is displayed in below JSBIN link.

AngularJS data grid Example

Sours: http://www.tutorialsavvy.com//11/angularjs-uigrid-module-example.html/
React \u0026 Material UI #10: Grid \u0026 Grid Layout

UI-Grid : An AngularJS data grid

Build StatusCoverage StatusFOSSA StatusnpmOpenCollectiveOpenCollectiveGitter

Selenium Test Status

Head to http://ui-grid.info for documentation and tutorials. Join https://gitter.im/angular-ui/ui-grid to discuss development and ask for specific help.

We're always looking for new contributors, for pro-level contribution guidelines look at Contributor.md, if you're more of a first-timer with open source (or just need a refresher), look at First Time Open Source Contributor.md, also look at Developer.md

Need Some Inspiration? Have a look at our open good first issue issues, or the help wanted issues if you are looking for more of a challenge

Bower

bower install angular-ui-grid
<linkrel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.min.css"><scriptsrc="bower_components/angular-ui-grid/ui-grid.min.js"></script>

NPM

npm install angular-ui-grid
<linkrel="stylesheet" type="text/css" href="node_modules/angular-ui-grid/ui-grid.min.css"><scriptsrc="node_modules/angular-ui-grid/ui-grid.min.js">

CDN

You can use jsdelivr.com's cdn url to access the files. Just alter the version as you need.

UI-Grid is currently compatible with Angular versions ranging from x to x.

UI-Grid comes bundled with several features. Not all of them are currently stable. See the list below for the stability of each:

For more details on the features check the Tutorials.

UI-Grid has an excellent plugin system. Most new features can be added as plugins. Please see some discussion of that in the Developer guidelines. There is a list of known plugins on the tutorial site. If you would like your plugin added to that list, please edit the tutorial page and send a pull request.

The first step is to install dependencies. is required and must be available from the command line. If you don't have it, install git and ensure that the executable is in your path. If you are new to git, the easiest way to install is by installing the github client.

The command line utility is also required.

With and installed you simply run the following commands to install all dependencies.

The default grunt task will test and build files into

Development "watch" task. This will automatically rebuild from source on changes, reload Gruntfile.js if you change it, and rebuild the docs.

  1. A server on localhost serving whichever directory you checked out, with livereload. Navigate to http://localhost/misc/demo to see the demo files.
  2. A server on localhost serving the ./docs directory. These are the docs built from source with grunt-uidocs-generator.

grunt dev

By default will start several karma background watchers that will run the tests against multiple versions of angular. You may specify the version(s) you want to use with the flag:

You can also use the specify what browsers to test with (PhantomJS is the default).

By default the tasks runs e2e tests with protractor. If you have problems with them running slow or hanging, you can disable them with the flag:

The grunt task is getting slower as the body of tests gets larger. If you're only working on the core functionality you can disable the unit tests on the features with the flag:

As a shortcut for options that the developers frequently use, there is also a flag, which equates to :

Karmangular

The task runs tests serially against multiple browsers (it is used internally by the task).

SauceLabs

ui-grid is set up to run against SauceLabs. You must have the environment variable set.

The full list of SauceLabs browsers can be seen by running . Usually it should suffice to let Travis do this testing automatically, unless you're trying to debug a browser-specific issue.

As of the release, 2.x is officially deprecated. There will be no further releases. If for some reason you need to find the 2.x source please see the 2.x branch.

The 2.x docs are here: https://github.com/angular-ui/ng-grid-legacy/wiki.

With the release, the repository has been renamed from "ng-grid" to "ui-grid".

All network traffic to GitHub should redirect automatically but they say you should update your git remote url:

Thanks to Sauce Labs and BrowserStack for providing their testing platforms to open source projects for free.

Support us with a monthly donation and help us continue our activities. [Become a backer]

Become a sponsor and get your logo on our website and on our README on Github with a link to your site. [Become a sponsor]

Sours: https://github.com/angular-ui/ui-grid

Grid angularjs example ui

.

Angular JS, UI Grid \u0026 Salesforce

.

Now discussing:

.



1495 1496 1497 1498 1499