Product - Sigma Grid 2.2 - Sample

Column editor

Sigma grid allow end user to modify data in a grid and post the changes back to the database.
With the following sample, you can

• Start to edit a cell by clicking on it with mouse
• Press tab key to complete your edit and go to next column.
• Add or remove rows dynamically by clicking plus or minus on toolbar.

If you try the demo above, probably you will notice that each column has its own editor. Some cells have text box for typing, some cells have drop-down list which you can choose one option from, and a date picker pops up for date cells.

Developer can also specify some cells to be editable or read-only. Maybe you have noticed that bills of 2005,2005 are read-only.

var colsOption = [ {id: 'no' , header: "Order No" , width :60, editor: { type :"text" } }, {id: 'employee', header: "Employee" , width :80, editor: { type :"text" } }, {id: 'country', header: "Country" , width :70, editor : { type :"select" ,options : {'US': 'US' ,'FR':'FR', 'BR':'BR'} ,defaultText : 'US' } }, {id: 'customer' , header: "Customer" , width :80,editor: {type :"text" } }, {id: 'bill2005' , header: "2005" , width :60}, {id: 'bill2006' , header: "2006" , width :60}, {id: 'bill2007' , header: "2007" , width :60, editor: { type :"text" }}, {id: 'bill2008' , header: "2008" , width :60, editor: { type :"text" }}, {id: 'orderDate' , header: "Delivery Date" , width :100, editor: {type :"date"}} ];

Related Links

Demos List - Customized cell editor