Editable DataGrid in AngularJS
JavascriptAngularjsKendo UiJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
check out ui-grid
templating, virtualization, simple data binding for selections, grouping, etc...
Solution 2 - Javascript
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 - Javascript
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 - Javascript
You can also try angular-xeditable.
For tables it has following:
Solution 5 - Javascript
Kendo is working on AngularJS http://kendo-labs.github.io/angular-kendo/
Solution 6 - Javascript
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;
}
}
Solution 7 - Javascript
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
Solution 8 - Javascript
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.
Solution 9 - Javascript
The more recent open source angular grids I can see is ux-angularjs-datagrid, I haven't tried it but demos look promising...