Best IT Recipes

Editable DataGrid in AngularJS

Is there any AngularJS module for the DataGrid that provides in-line editing? KendoUI has one http://demos.kendoui.com/web/grid/editing-inline.html

Can AngularJS and KendoUI be used together?

+49
javascript angularjs kendo-ui
Aug 18 2018-12-12T00:
source share
9 answers

check ui-grid

templates, virtualization, simple data binding for selection, grouping, etc.

+44
Oct 30 '12 at 6:44
source share

Take a look at this pretty general example where I loop first through rows and then through columns. then a simple change between a range and an input field. http://jsfiddle.net/3BVMm/3/

this will allow you to do inline editing with a few lines of code.

BUT: it does not work as expected, since there seems to be an error that I have already posted on angular.

+9
Sep 18 '12 at 23:37
source share

You can also use a smart table.

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

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

On the home page there is an example of editing In-Line on the Edit Cell page. The cell edit mode is entered with a double click.

Github: lorenzofox3 / smart-table

It has features such as pagination, sorting, filtering, data formatting, row selection, and the creation of a simple table structure that simplifies style / customization.

+8
Jun 10 '13 at 8:57
source share

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

+6
Oct. 15 '13 at 12:20
source share

Kendo is working on AngularJS http://kendo-labs.imtqy.com/angular-kendo/

+4
May 19 '13 at 9:30
source share

Grid Angular Grid can perform inline editing. This is an AngularJS directive, so it connects to your Angular application. Also comes with other standard grid features (selection, filtering, etc.).

Editing documentation page here

To do the editing, set the editable parameter to true in the column definition, that is:

 colDef.editable = true;

By default, the grid is managed as a string value. If you want to perform custom processing on a cell, for example, to convert it to an integer or to perform a check, you provide newValueHandler for the definition of the column, that is:

 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; } }
+4
Apr 28 '15 at 10:20
source share

You can use the ng-table directive to revitalize your tables. It supports sorting, filtering and pagination. Header headers with headers and filters are automatically generated at compile time.

 For example

editable demo

+3
Dec 24 '13 at 4:53 on
source share

You can create your own Angular resource. You may not need to look for third-party plugins.

I made a basic sample that supports: -

  • Inline Editing of attached data.
  • Add a new row when hitting the last grid.

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

Apply 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 this works, lemme knows if there are any problems.

+2
Jan 09 '16 at 16:00
source share

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

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

+1
Jul 28 '14 at
source share


More articles:


All Articles