33
rated 0 times
[
38]
[
5]
/ answers: 1 / hits: 18234
/ 12 Years ago, mon, october 15, 2012, 12:00:00
How to write such functions and bind them to two buttons like add row and remove row:
The now working example code only support adding new row by editing on the blank bottom line.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=iso-8859-1>
<title>SlickGrid example 3: Editing</title>
<link rel=stylesheet href=../slick.grid.css type=text/css/>
<link rel=stylesheet href=../css/smoothness/jquery-ui-1.8.16.custom.css type=text/css/>
<link rel=stylesheet href=examples.css type=text/css/>
<style>
.cell-title {
font-weight: bold;
}
.cell-effort-driven {
text-align: center;
}
</style>
</head>
<body>
<div style=position:relative>
<div style=width:600px;>
<div id=myGrid style=width:100%;height:500px;></div>
</div>
<div class=options-panel>
<h2>Demonstrates:</h2>
<ul>
<li>adding basic keyboard navigation and editing</li>
<li>custom editors and validators</li>
<li>auto-edit settings</li>
</ul>
<h2>Options:</h2>
<button onclick=grid.setOptions({autoEdit:true})>Auto-edit ON</button>
<button onclick=grid.setOptions({autoEdit:false})>Auto-edit OFF</button>
</div>
</div>
<script src=../lib/firebugx.js></script>
<script src=../lib/jquery-1.7.min.js></script>
<script src=../lib/jquery-ui-1.8.16.custom.min.js></script>
<script src=../lib/jquery.event.drag-2.0.min.js></script>
<script src=../slick.core.js></script>
<script src=../plugins/slick.cellrangedecorator.js></script>
<script src=../plugins/slick.cellrangeselector.js></script>
<script src=../plugins/slick.cellselectionmodel.js></script>
<script src=../slick.formatters.js></script>
<script src=../slick.editors.js></script>
<script src=../slick.grid.js></script>
<script>
function requiredFieldValidator(value) {
if (value == null || value == undefined || !value.length) {
return {valid: false, msg: This is a required field};
} else {
return {valid: true, msg: null};
}
}
var grid;
var data = [];
var columns = [
{id: title, name: Title, field: title, width: 120, cssClass: cell-title, editor: Slick.Editors.Text, validator: requiredFieldValidator},
{id: desc, name: Description, field: description, width: 100, editor: Slick.Editors.LongText},
{id: duration, name: Duration, field: duration, editor: Slick.Editors.Text},
{id: %, name: % Complete, field: percentComplete, width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
{id: start, name: Start, field: start, minWidth: 60, editor: Slick.Editors.Date},
{id: finish, name: Finish, field: finish, minWidth: 60, editor: Slick.Editors.Date},
{id: effort-driven, name: Effort Driven, width: 80, minWidth: 20, maxWidth: 80, cssClass: cell-effort-driven, field: effortDriven, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox}
];
var options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: false
};
$(function () {
for (var i = 0; i < 500; i++) {
var d = (data[i] = {});
d[title] = Task + i;
d[description] = This is a sample task description.n It can be multiline;
d[duration] = 5 days;
d[percentComplete] = Math.round(Math.random() * 100);
d[start] = 01/01/2009;
d[finish] = 01/05/2009;
d[effortDriven] = (i % 5 == 0);
}
grid = new Slick.Grid(#myGrid, data, columns, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
grid.onAddNewRow.subscribe(function (e, args) {
var item = args.item;
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();
});
})
</script>
</body>
</html>
More From » jquery
