Slickgrid : Dataview : addNewRow

http://stackoverflow.com/questions/31337153/slickgrid-handling-dataview-with-grid-onaddnewrow/31346486#31346486

HTML

<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.editors.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.formatters.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>
<div data-bind='text: ko.toJSON($data)'></div>
<button id="save">Save</button>
<div id='container'>
    <div id="myGrid" style="width:600px;height:300px;"></div>
</div>

JavaScript

var categories, categoryList, subjectList, data, grid;
//var url = "{{ url('get_data', {'_prefix': app.request.get('_prefix')}) }}";

var dataView = new Slick.Data.DataView();

var columns = [
    {id: "serial", name: "Ordnungsnummer", field: "serial", editor: Slick.Editors.Integer, validator: requiredFieldValidator, sortable: true},
    {id: "category", name: "Kategorie", field: "category", editor: Slick.Editors.categoryDropdown, formatter: Slick.Formatters.category, validator: requiredFieldValidator, sortable: true},
    {id: "subject", name: "Themenbereich", field: "subject", editor: Slick.Editors.subjectDropdown, formatter: Slick.Formatters.subject, validator: requiredFieldValidator, sortable: true},
    {id: "week", name: "Schulwoche", field: "week", editor: Slick.Editors.Integer, validator: requiredFieldValidator, sortable: true},
    {id: "note", name: "Anmerkung", field: "note", editor: Slick.Editors.LongText, validator: requiredFieldValidator}
];

var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: true,
    forceFitColumns: true,
    topPanelHeight: 25
};

grid = new Slick.Grid("#myGrid", dataView, columns, options);

// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
});

grid.onAddNewRow.subscribe(function (e, args) {
    var item = args.item;
    item.id = grid.getData().getItems().length
    var column = args.column;
    grid.invalidateRow(dataView.length);
    dataView.addItem(item);
    grid.updateRowCount();
    grid.render();
});

function fetchData() {

    createGrid({data: [{id: '0', serial: '321'}], categories: [{id: "Science", subjects: ["1", "2"]}]})
}

function requiredFieldValidator(value) {
    if (!value || !value.length) {
        return {valid: false, msg: "This is...