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?

Solution 1

check out ui-grid

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

Solution 2

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.

Solution 3

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.

Solution 4

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

• editable row
• editable column
• editable whole grid

Solution 5

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;
    }
}

View more solutions

Comments

[Adam Arold]

The bug is still there. If you type into any field it immediately exits.

[iLemming]

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.

[abhijeet nigoskar]

@Agzam What are the alternatives? Commercial: KendoUI?

[iLemming]

@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 stackoverflow.com/questions/25676574/… 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

[Arne H. Bitubekk]

An alternative could be to use the trNgGrid: moonstorm.github.io/trNgGrid/release/index.html

[KreepN]

For future visitors, I believe the developer has removed editing from Smart-Table, as the section no longer exists.

[laurent]

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!

[MR.ABC]

any example how will be great. like smart table most.

[Răzvan Flavius Panda]

@MR.ABC: Added a link to a plunker example of how it is used.

[MR.ABC]

Next will be the question when to save these... (Is it not declarative anymore?)

[Răzvan Flavius Panda]

I haven't got to use it. I'd recommend to have a look at the source code(perhaps the tests 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.

[Jose Ricardo Bustos M.]

you should expand and improve your answer

[John Henckel]

hmm, price starting at $999 per developer

[Saber]

@JohnHenckel you're right, the time I wrote this answer it was free!