Editable DataGrid in AngularJS

Question

Is there any AngularJS module as for DataGrid which provides In-Line Editing? There is one in KendoUI http://demos.kendoui.com/web/grid/editing-inline.html

Can AngularJS & KendoUI be used together?

Have a look at this answer here http://stackoverflow.com/a/11892676/1057639 — ganaraj, Aug 18 '12 at 08:20
Thx Ganaraj. As per your exp with AngularJS, how difficult it is to write an Editable Data-Grid widget (as good as Kendo UI inline-editing datagrid), We are thinking abt porting a silverlight app to AngularJS, How mature do you think AngularJS is right now. — Anand, Aug 19 '12 at 15:06
I think angular is quite mature. Creating an editable data-grid widget with Angular should be a task that anyone who has some knowledge ( maybe a bit advanced! ) of Angular can achieve. — ganaraj, Aug 19 '12 at 23:06
Hi Ganaraj Do you know anyone using AngularJS with SlickGrid? Any pointers would help, I am lookng for directive which wrap slickgrid — Anand, Sep 03 '12 at 12:56
Have you tried writing a directive yourself? It is not really hard. If you go through my kendo-ui grid example and follow along and compare how that is done, it should be pretty straight forward. Also should be able to help you get started writing a directive for SlickGrid. — ganaraj, Sep 03 '12 at 13:09
Why you would user kendo and angular together? I didn't know kendo, it seems cool. — Mauro, Nov 07 '13 at 20:26

score 45 · Accepted Answer · edited Oct 18 '15 at 03:07

45

check out ui-grid

templating, virtualization, simple data binding for selections, grouping, etc...

edited Oct 18 '15 at 03:07

Morteza Tourani

3,560
5
36
45

answered Oct 30 '12 at 06:44

timothyswt

559
5
7

5

stay away from ng-grid. In its current state is too buggy and slow and has tons of problems, and version 3 is not ready to use. – iLemming Sep 04 '14 at 19:27
1

@Agzam What are the alternatives? Commercial: KendoUI? – Juri Sep 10 '14 at 07:27
1

@Jury, honestly I have no definitive answer to this question. All different grid widgets I've tried never fully satisfied me. My biggest necessity is smooth scrolling with huge number of rows in the grid. I even posted this long question http://stackoverflow.com/questions/25676574/best-open-source-grid-with-smooth-infinite-scrolling and still awaiting for someone to answer it. For my own needs currently I chose ux-angularjs-datagrid. Although it's not full-fledged grid widget, many things you'd have to implement - like resizable, draggable columns, etc. But it's extremely fast – iLemming Sep 10 '14 at 08:28
An alternative could be to use the trNgGrid: http://moonstorm.github.io/trNgGrid/release/index.html – Arne H. Bitubekk Sep 29 '14 at 10:16

score 10 · Answer 2 · answered Sep 18 '12 at 23:37

10

look at this quite generic example, where i loop first through rows and then through columns. then a simple change between a span and an input field. http://jsfiddle.net/3BVMm/3/

this would enable you to make inline editing with a few lines of code.

BUT: it doesnt work as expected, as there seems to be an bug, which I posted already on angular.

answered Sep 18 '12 at 23:37

Luke

7,250
3
20
33

The bug is still there. If you type into any field it immediately exits. – Adam Arold Apr 30 '14 at 12:47

Răzvan Flavius Panda · Answer 3 · 2014-11-18T21:53:24.720

9

You can also use Smart Table.

Example, double click on an item in balance column: http://plnkr.co/edit/QQQd2znPqh87X2oQONd9?p=preview

  label: 'Balance',
  map: 'balance',
  isEditable: true,
  type: 'number',

~~There is an In-Line editing example on the home page under Edit cell section. Cell edit mode is entered with double click.~~

Github: lorenzofox3 / Smart-Table

It has features like pagination, sorting, filtering, data formatting, row selection and it also generates a simple table structure which makes it easier to style/customize.

edited Nov 18 '14 at 21:53

answered Jun 10 '13 at 08:57

Răzvan Flavius Panda

20,376
13
101
153

1

For future visitors, I believe the developer has removed editing from Smart-Table, as the section no longer exists. – KreepN Oct 21 '14 at 18:07
1

Yes indeed, because is not relevant anymore. Now smart-table follows a declarative approach and you can extend it as you wish using the main controller API for table specific operations. Inline editing is not table specific but you will be able to use whatever edit directive you want inside the table with no extra work! – laurent Nov 13 '14 at 03:54
any example how will be great. like smart table most. – MR.ABC Nov 18 '14 at 21:45
1

@MR.ABC: Added a link to a plunker example of how it is used. – Răzvan Flavius Panda Nov 18 '14 at 21:54
Next will be the question when to save these... (Is it not declarative anymore?) – MR.ABC Nov 18 '14 at 22:08
I haven't got to use it. I'd recommend to have a look at the source code(perhaps the tests https://github.com/lorenzofox3/Smart-Table/tree/master/test/spec) and the issues and if you can't find what you need to open a new issue. – Răzvan Flavius Panda Nov 20 '14 at 05:16

score 6 · Answer 4 · answered Oct 15 '13 at 12:20

6

You can also try angular-xeditable.
For tables it has following:

answered Oct 15 '13 at 12:20

vitalets

3,745
1
32
33

score 4 · Answer 5 · answered May 19 '13 at 09:30

4

Kendo is working on AngularJS http://kendo-labs.github.io/angular-kendo/

answered May 19 '13 at 09:30

Saber

1,626
19
36

hmm, price starting at $999 per developer – John Henckel Aug 18 '16 at 20:31
@JohnHenckel you're right, the time I wrote this answer it was free! – Saber Aug 26 '16 at 04:26

Ceolter · Answer 6 · 2015-05-16T10:19:18.047

The grid Angular Grid is able to do inline editing. It is an AngularJS directive, so plugs into your Angular app. Also comes with other standard grid features (selection, filtering etc).

The documentation page for editing is here

To do editing, set editable to true in the column definition ie:

colDef.editable = true;

By default, the grid manages as a string value. If you want to do custom handling of the cell, eg to convert it into an integer, or to do validation, you provide a newValueHandler onto the column definition ie:

colDef.newValueHAndler = function(params) {
    var valueAsNumber = parseInt(params.newValue);
    if (isNaN(valueAsNumber)) {
        window.alert("Invalid value " + params.newValue + ", must be a number");
    } else {
        params.data.number = valueAsNumber;
    }
}

you should expand and improve your answer – Jose Ricardo Bustos M. Apr 28 '15 at 23:19 — Jose Ricardo Bustos M., Apr 28 '15 at 23:19

score 3 · Answer 7 · edited Jun 30 '16 at 14:14

3

You can use the ng-table directive allow to liven up your tables. It supports sorting, filtering and pagination. Header rows with titles and filters are automatically generated during compilation.

For example

editable demo

edited Jun 30 '16 at 14:14

deltree

3,516
1
25
47

answered Dec 24 '13 at 04:53

Prabin Tp

708
5
15

score 2 · Answer 8 · answered Jan 09 '16 at 16:00

You can make your own using richness of Angular. Perhaps you don't need to look for third party plugins.

I have made a basic sample that supports:-

Inline Editing of Binded-Data.
Add new Row on hitting last Grid-cell.

https://plnkr.co/edit/J0PeIlLsaASer4k8owdj?p=preview

Apply a simple css

.TextBoxAsLabel
{
   border: none;
   background-color: #fff;
   background: transparent;
    width:100%;
}

//for Dropdown    
.selectable::-ms-expand {   
  display: none; 
}
.selectable{
    -webkit-appearance: none;
    appearance: none;
}

hope it works, lemme know if any issues.

score 1 · Answer 9 · answered Jul 28 '14 at 13:58

1

The more recent open source angular grids I can see is ux-angularjs-datagrid, I haven't tried it but demos look promising...

https://github.com/webux/ux-angularjs-datagrid

answered Jul 28 '14 at 13:58

Srivathsa Harish Venkataramana

1,505
20
17

Editable DataGrid in AngularJS

9 Answers9