Customize context menu in handsontable

Using handsontable we can create excel like grid and it allows to customize a lot. Handsontable has a default context menu but it allows developers to customize. Let us check how we can create a simple handsontable with default context menu.

View

<div id="sample"></div>

JS

var data = [
 ["", "India", "US", "China", "Russia"],
 ["2016", 10, 11, 12, 13],
 ["2017", 20, 11, 14, 13],
 ["2018", 30, 15, 12, 13]
];

var container = document.getElementById('sample');
var hot = new Handsontable(container, {
 data: data,
 rowHeaders: true,
 colHeaders: true,
 dropdownMenu: true,
 contextMenu : true
});

If you don't want context menu simply don't add it or set it as false.

Customize context menu

Let us check with asn example how we can customize context menu.

var data = [
 ["", "India", "US", "China", "Russia"],
 ["2016", 10, 11, 12, 13],
 ["2017", 20, 11, 14, 13],
 ["2018", 30, 15, 12, 13]
];

var container = document.getElementById('sample');
var hot = new Handsontable(container, {
 data: data,
 rowHeaders: true,
 colHeaders: true,
 dropdownMenu: true,
 contextMenu : {
  callback: function(key, options) {
 if (key === 'custom_menu1') {
  console.log(hot.getSelected());
  //your function 
 }
 if (key === 'custom_menu1') {
  console.log(hot.getSelected());
  //your function
 }
 },
 items: {
 "custom_menu1": {
  "name": "My first context menu",
 },
 "custom_menu2": {
  "name": "My second context menu",
 }
}
};
});

Suppose if we need to hide some context menu option for any particular selection, we can do that very easily. See the below code which will hide the particular option if the condition is true.

"custom_menu1": {
 "name": "Disable this selection if the condition is true",
 disabled: function() {
 //hot.getSelected()// get selected row/column info and data
 if(your_condtion){
  return true
 }
}
}

And also you can override the custom context menu option as well. Below list contains the custom context menu option provided by handsontable and you can override these also using the above example.

1. row_above

2. row_below

3. hsep1

4. col_left

5. col_right

6. hsep2

7. remove_row

8. remove_col

9. hsep3

10. undo

11. redo

12. make_read_only

13. alignment

Excel like feature grid for UI

Many plugins are available for creating grid/table. But if we want to create excel like feature for UI which plugin should we use? Yes there are some plugins available. In those I found Handsontable is much better and easy for customization. You can easily add columns and rows and has a great support for doing data validation. You can go to this link Handsontable for understanding about the features provided by Handsontable.

(This image is captured from handsontable official site)

Let us check how we can start with Hanndsontable. You can go to Handsontable plugin site and download plugin. It is pretty straight forward to start with Handsontable.

Html

<div id="sample"></div>

JS

var data = [
  ["", "India", "US", "China", "Russia"],
  ["2016", 10, 11, 12, 13],
  ["2017", 20, 11, 14, 13],
  ["2018", 30, 15, 12, 13]
];

var container = document.getElementById('sample');
var hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  dropdownMenu: true
});

You are done with your first excel like grid. What we have done is a very basic thing, you can go to handsontable site and explore more thing. However in my future posts I will be writing about customizing handsontable like customizing context menu, custom validation, clickable header options etc. If you are interested please book mark this post for future updates.

Related Posts

1. Customize context menu in handsontable

How to use filter concept in angular 2

Yes we can do the filtering in Angular 2 as well, instead of filter it is pipe concept. Pipe will take the data and convert into desired output. There are many built in pipes like date, uppercase etc. Let us check here how we can create a custom pipes.

Sample JSON

[
 {
 name:'Prashobh',
 exp:'9',
 },
 {
 name:'Abraham',
 exp:'15',
 },
 {
 name:'George',
 exp:'2',
 },
 {
 name:'John',
 exp:'20',
 }
]

Above JSON contains the list of employees and their experience. I am going to filter this data in such a way that, if the person has more than 10 years experience it should display over qualified and less than 5 as average and the remains as it is.

Let us check first how we can achieve in Angular one.

Using Angular 1

---

Filter

angular.module('yourmodule').filter('quality', function($filter)
{
 return function(value)
 {
    var input = '';
 if(value<5)
 {
    input = 'Average';
 }
 else if(value>10)
 {
    input = 'Over Qualified (Exp '+value+')';
 }
 else
 {
    input = value
 }
 return input;
 };
});

HTML

<div>
 <ul>
  <li ng-repeat="i of items">
 <p>{{i.name}}</p>
 <p>{{i.exp | quality}}</p>
  </li>
 </ul>
</div>

It is pretty straight forwards and you can see the desired output. Now let us see how it is in angular 2. Here we will be using angular 2 + typescript.

Using Angular 2

---

Component

import {Component} from 'angular2/core'

@Component({
    selector: 'sample-list',
    templateUrl: 'app/sample-list.html',
})
export class sampleComponent {
    title: string;
    items: any[];
    constructor() {
        this.title = "Angular 2 filter";
        this.items = [{
            name:'Prashobh',
            exp:'9',
        },
        {
            name:'Abraham',
            exp:'15',
        },
        {
            name:'George',
            exp:'2',
        },
        {
            name:'John',
            exp:'20',
        }
        ]
    }
}

Now let us create a sample pipe.

import {Pipe,PipeTransform} from 'angular2/core';
@Pipe({
    name:'quality'
})

export class QualityPipe implements PipeTransform{
    transform(value:any){
        var input = '';
        if(value<5)
            input = 'Average';
        else if(value>10)
            input = 'Over Qualified (Exp '+value+')';
       else
            input = value
        return input;
    }
}

We are done with the pipe, here Quality is the pipe name. If you add the pipe directly in view it won't work as we didn't import dependencies in our component.

Import pipe dependencies.

import {QualityPipe} from './sample-pipe';

And add pipe name inside our decorator.

@Component({
    selector: 'sample-list',
    templateUrl: 'app/sample-list.html',
    pipes:[QualityPipe]
})

Final component

import {Component} from 'angular2/core'
import {QualityPipe} from './sample-pipe';

@Component({
    selector: 'sample-list',
    templateUrl: 'app/sample-list.html',
    pipes:[QualityPipe]
})
export class sampleComponent {
    title: string;
    items: any[];
    constructor() {
        this.title = "Angular 2 filter";
        this.items = [{
            name:'Prashobh',
            exp:'9',
        },
        {
            name:'Abraham',
            exp:'15',
        },
        {
            name:'George',
            exp:'2',
        },
        {
            name:'John',
            exp:'20',
        }
        ]
    }
}

View

<h2>{{title}}</h2>

<div>
 <ul>
  <li *ngFor="let i of items">
 <p>{{i.name}}</p>
 <p>{{i.exp | quality}}</p>
  </li>
 </ul>
</div>

Run "npm start" you can see the output like below.

Related Post

1. How to start with Angular js 2

2. ng-repeat in angular js 2

ng-repeat in angular 2

Looping is very simple in Angular js 1, don't worry it is more simple in Angular js 2 as well with lot of performance improvement. Let us check first how it is in Angular 1.

JSON

$scope.data = [
 {
  name:'Prashobh',
  country:India
 },
 {
  name:'Abraham',
  country:US
 },
 {
  name:'Jhon',
  country:China
 }
]

Html

<div ng-repeat="d in data">
  <span>Name : {{ d.name }}</span>
  <span>Age : {{ d.country }}</span>
</div>

Now let us check how we can do the same using angular js 2

Typescript

export class sampleComponent {
    data: any[];
    constructor() {
        this.data = [{
               name:'Prashobh',
               country:India
             },
             {
              name:'Abraham',
              country:US
             },
             {
              name:'Jhon',
              country:China
             }
         ]
    }

I added JSON file inside the constructor itself for now, ideally it should be from service file, I am not going to explain those in this post.

Don't forget to import angular2/core in your typescript file.

import {Component} from 'angular2/core'

If you are facing any issue on setting up your angular 2 app, please check this reference How to start with Angular js 2

Html

<div *ngFor="let d of data">
  <span>Name : {{ d.name }}</span>
  <span>Age : {{ d.country }}</span>
</div>

Here * is important, without that it won’t work. Angular 2 is making use of powerful css and html properties.The let key is part of angular 2 template syntax.

Related Posts

1. How to start with Angular js 2

How to start with Angular 2

This post is outdated now

Here we will discuss about how we can create a simple app using angular js 2. So first up all the question is why angular js 2?

Angular js 1 is basically developed for google developers for their internal use and more over it is developed for UI designing purpose and later they extended many features like two way data binding etc. Now Angular js 1 is widely used by developers. Recent past some architectures and developers points about performance issues and angular core team finally come up with a new version of Angular and it is Angular js 2. Which is well structured and it offers a very good performance.

There is a lot of difference between angular one and two. Angular two is supporting JavaScript ES6 which is not yet supported by latest browsers however you can use current JavaScript ES5 with angular 2, but you may not be able to enjoy all features of angular 2 in this case.

So the best option is to use Angular two with typescript. In this case you need to compile the files before rendering into the browser as browser is not yet supporting ES6. But in coming future it should be supported and you can use angular 2 with JavaScript ES6 directly.

In this article I am going to explain how we can start a simple application using Angular 2 + Typescript. Typescript is superscript of JavaScript.

Before starting be ready with following things.

1. Visual Studio Code [ https://code.visualstudio.com/ ]
(As this editor supporting typescript so that you can enjoy coding)

2. NodeJS [ https://nodejs.org/en/download/current/ ]

Create folder structure similar like below screen shot

 

package.json

  {
  "name": "angular2_app",
  "version": "1.0.0",
  "description": "My first Angular 2",
  "main": "index.js",
  "scripts": {
    "start": "tsc && concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "lite" : "lite-server",
    "tsc": "tsc",
    "tsc:w" : "tsc -w",
    "typings" : "typings"
  },
  "keywords": [
    "angular2",
    "node",
    "typescript",
    "javascript",
    "html5"
  ],
  "dependencies": {
    "angular2": "2.0.0-beta.17",
    "es6-shim": "0.35.1",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12",
    "systemjs":"0.19.31"
  },
  "devDependencies": {
    "concurrently" : "1.0.0",
    "lite-server" : "1.3.1",
    "typescript":"1.7.3"
  },
  "author": "Prashobh",
  "license": "ISC"
}

It contains all the dependencies. The script sections details are used for typescript for compiling purpose.Once you add package.json, go to command prompt and run "npm install" or you can open the folder and do "shift + right" click you will find an option "open command window here" ,click that and type "npm install". You can add other dependencies as well (eg:bootsrtap) then you can just type "npm update". You can see a folder "node-modules" is created with all the files.

Index.html

<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--Lib includes-->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<!--App includes-->
<script type="text/javascript">
  System.config({
 packages: {
  app : {
   format: 'register', 
   defaultExtension: 'js'
  }
 }
   });
 System.import('app/boot').then(
  console.log.bind(console),
  console.error.bind(console)
 );
</script>
<title>MY first angular 2 app</title>
 </head>
   <body class="container">
     <sample-list></sample-list>
    </body>
</html>

tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module":"system",
        "moduleResolution":"node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude":["node_modules"]
}

Under App I am creating some files, please see the below screenshot

sample-list.html

<h2>{{title}}</h2>
<div>
 <ul>
  <li *ngFor="let i of items">
   <p>{{i.name}}</p>
   <p>{{i.des}}</p>
   <p>{{i.exp}}</p>
  </li>
 </ul>
</div>

sampleComponent.ts

sampleComponent.ts is typescript file. I added JSON file inside the constructor itself for now, ideally it should be from service file, I am not going to explain those in this post.

import {Component} from 'angular2/core'

@Component({
    selector: 'sample-list',
    templateUrl: 'app/sample-list.html',
})
export class sampleComponent {
    title: string;
    items: any[];
    constructor() {
        this.title = "My first Angular 2 Application";
        this.items = [{
            name:'Prashobh',
            des:'SSE',
            exp:'10',
        },
        {
            name:'Abraham',
            des:'PM',
            exp:'15',
        },
        {
            name:'Anil',
            des:'SE',
            exp:'2',
        }]
    }
}

Boot.ts

In angular 2 we need to initialize the things rather than browser taking the control.

import { bootstrap } from 'angular2/platform/browser'
import { sampleComponent } from './sampleComponent'

bootstrap(sampleComponent)
    .then(
 a => { 
  console.log('--Bootstrap success!')
  console.log('--Catalog App is ready!')                    
 },
 err => console.error(err)
);

Now open command prompt and type "npm start". You can see your first Angular 2 app.

If you are getting any error check typo mistake and also try to debug in chrome.

The above demo is a kind of hello word application just to start with angular js 2. I will be writing more about on angular js 2 and things like setting a single page application. If you are interested bookmark this page.

Related Post

1. ng-repeat in angular js 2

2. Angular 2 filter using pipe concept

3. ng-click in angular js 2

testing

This page contains some of the images which uploaded for this blog.This page is only for internal purpose, please ignore this.