50

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?

Improve this question
7
  • Have a look at this answer here stackoverflow.com/a/11892676/1057639 Commented Aug 18, 2012 at 8: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. Commented Aug 19, 2012 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. Commented Aug 19, 2012 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 Commented Sep 3, 2012 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. Commented Sep 3, 2012 at 13:09

9 Answers 9

Reset to default
45

check out ui-grid

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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.
@Agzam What are the alternatives? Commercial: KendoUI?
@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
An alternative could be to use the trNgGrid: moonstorm.github.io/trNgGrid/release/index.html
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.

Improve this answer

1 Comment

The bug is still there. If you type into any field it immediately exits.
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.

Improve this answer

6 Comments

For future visitors, I believe the developer has removed editing from Smart-Table, as the section no longer exists.
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!
any example how will be great. like smart table most.
@MR.ABC: Added a link to a plunker example of how it is used.
Next will be the question when to save these... (Is it not declarative anymore?)
|
6

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

Improve this answer

Comments

4

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

Improve this answer

2 Comments

hmm, price starting at $999 per developer
@JohnHenckel you're right, the time I wrote this answer it was free!
4

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;
    }
}
Improve this answer

1 Comment

you should expand and improve your answer
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

Improve this answer

Comments

2

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:-

  1. Inline Editing of Binded-Data.
  2. 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.

Improve this answer

Comments

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.