SlickGrid - handling DataView with grid.onAddNewRow
I am using SlickGrid to create a data grid. The data is retrieved by jQuery AJAX call. With the help of StackOverflow question, I can process the response data and set it to the DataView. But my problem comes when I make the Grid parameter "enableAddRow: true".
Here, when I try to add something on a new line, whenever I insert something in any cell and go to another, there is no data there. For example:
My declaration for the grid:
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;
var column = args.column;
grid.invalidateRow(dataView.length);
dataView.push(item);
grid.updateRowCount();
grid.render();
});
function fetchData() {
$.ajax({
type: "POST",
url: url,
dataType: "json",
data: {schoolclass: {{ schoolclass }}},
success: function( response ) {
createGrid(response);
}
});
}
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};
}
}
function createGrid(response) {
data = response.data;
categories = response.categories;
categoryList = generateCategoryList(categories);
subjectList = generateSubjectList(categories);
dataView.beginUpdate();
dataView.setItems(data);
console.log(data);
dataView.endUpdate();
}
function generateCategoryList(categories) {
var categoryList = {};
$.each(categories, function(index, item) {
categoryList[item.id] = item.name;
});
return categoryList;
}
function generateSubjectList(categories) {
var subjectList = {};
$.each(categories, function(index, category) {
$.each(category.subjects, function(index, subjects) {
subjectList[subjects.id] = subjects.name;
});
});
return subjectList;
}
function sendData(data) {
$.ajax({
type: "POST",
url: url,
dataType: "json",
data: data,
success: function( response ) {
createGrid(response);
alert("data successfully saved");
},
error: function(textStatus, errorThrown) {
alert("sorry could not save the data");
console.log("text Status = "+ textStatus);
console.log("Error Thrown = "+ errorThrown);
}
});
}
$(function () {
fetchData();
$("#save").click(function() {
var newData = JSON.stringify(grid.getData());
sendData(newData);
});
})
Any help is appreciated.
source to share
To fix the problem, the reason your data is missing has to do with dataView.push(item);
in the handler onAddNewRow
. Use the addItem function of the dataview function.
I am assuming your data has a property id
for each item, otherwise the data will not be displayed. Thus, you will also need to solve the problem of a new item requiring a unique id
one by adding it in var item = args.item;
in the handler.
If your data items have an existing field, take serial
for example unique for all items, then you can configure your dataview to use that field as the required id by passing it to setItems . At this point, you don't have to manually assign id
.
Also, you will have data persistence problem due to grid.getData()
. To get data from dataview use grid.getData().getItems()
.
source to share