I am using Syncfusion grid in Frappe Framework. Its behavior is rather strange. It just doesnt display numbers at all. Everything works flawlessly. Can someone please tell me whats wrong here.
Here is my data.
var grid = new ej.grids.Grid({
dataSource: gridData,
allowPaging: true,
allowFiltering: true,
filterSettings: { type: 'Excel' },
enablePersistence: true,
editSettings: {
allowEditing: true,
allowUpdating: true,
mode: 'Normal'
},
toolbar: [
'Edit',
'Update',
'Cancel',
'Search'
],
columns: [
{ field: 'name', headerText: 'Item ID', isPrimaryKey: true, visible: false },
{ field: 'item_code', headerText: 'Item Code', textAlign: 'Center', width: 120 },
{ field: 'item_name', headerText: 'Item Name', textAlign: 'Center', width: 150 },
{ field: 'purchase_price', headerText: 'Purchase Price', textAlign: 'Center', width: 200, type:'number'},
{ field: 'selling_price', headerText: 'Selling Price', textAlign: 'Center', width: 120, type:'number'},
{ field: 'retail_price_incl_tax', headerText: 'Retail Incl Tax', textAlign: 'Center', width: 120, type:'number'},
],
created: () => {
const searchBar = document.getElementById(grid.element.id + "_searchbar");
searchBar.addEventListener('keyup', () => {
grid.search(event.target.value)
});
searchBar.addEventListener('keydown', (event) => {
if (event.key === 'Tab') {
event.preventDefault();
if (grid.getRows().length > 0) {
grid.selectRow(0);
const firstCell = grid.getCellFromIndex(0, 0);
firstCell.focus();
}
}
});
},
rowSelected: (args) => {
console.log(args.data);
}
});