Topic: Table Editor inputType
Expected behavior Adding an inputType:'checkbox' to a columns options will cause the Table Editor to render checkbox control for that column.
Actual behavior Whenever I use an inputType:'checkbox' or inputType:'number' then I get an error
Unexpected token u in JSON
Oddly enough, I can use inputType:'date' and get a date picker control.
I'm using ajax to load the data.
Resources (screenshots, code snippets etc.) const columnDefs = [ { label: 'Id', field: 'Id', editable: false }, { label: 'IntegerColumn', field: 'IntegerColumn'}, { label: 'DateColumn', field: 'DateColumn', inputType: 'date' }, { label: 'VarCharColumn', field: 'VarCharColumn', inputType: 'text' }, { label: 'BitColumn', field: 'BitColumn', inputType: 'checkbox' }, { label: 'DecimalColumn', field: 'DecimalColumn', inputType: 'text' }, { label: 'RealColumn', field: 'RealColumn', inputType: 'text' }, ];
const asyncTable = new TableEditor(document.getElementById('datatable'), { columns: columnDefs }, { actionPosition: "start", confirm: true, fullPagination: true, edit: true, entries: 25, hover: true, sm: true, fixedHeader: true, loading: true, maxHeight: 700, maxWidth: "100%" } );
fetch('/api/table/data/dev/test1') .then((response) => response.json()) .then((data) => { asyncTable.update( { rows: data.map((row) => ({ Id: row.Id, IntegerColumn: row.IntegerColumn, DateColumn: row.DateColumn, VarCharColumn: row.VarCharColumn, BitColumn: row.BitColumn, DecimalColumn: row.DecimalColumn, RealColumn: row.RealColumn,
}))
},
{ loading: false }
);
});
Hi,
Try removing "datatable" class from <div id="datatable" class="datatable">. It probably also initializes datatable and this causes some kind of conflict. Here is a snippet showing that checkbox input works https://mdbootstrap.com/snippets/standard/d-wajszczuk/3039067#js-tab-view. So removing or renaming this class should help.
Keep coding,
Dawid
Here is my JSON coming from my API. It looks fine to me.
[{"Id":15,"IntegerColumn":300,"DateColumn":"2021-12-12T00:00:00","VarCharColumn":"Insert","BitColumn":false,"DecimalColumn":250,"RealColumn":250},{"Id":16,"IntegerColumn":200,"DateColumn":"2100-12-21T00:00:00","VarCharColumn":"insert","BitColumn":false,"DecimalColumn":null,"RealColumn":null},{"Id":3,"IntegerColumn":360,"DateColumn":"2021-05-15T00:00:00","VarCharColumn":"testing update","BitColumn":true,"DecimalColumn":300,"RealColumn":300},{"Id":4,"IntegerColumn":475,"DateColumn":"2021-06-15T00:00:00","VarCharColumn":"Text","BitColumn":true,"DecimalColumn":400,"RealColumn":400},{"Id":5,"IntegerColumn":550,"DateColumn":"2021-12-21T00:00:00","VarCharColumn":"add data","BitColumn":false,"DecimalColumn":12,"RealColumn":23.32},{"Id":17,"IntegerColumn":150,"DateColumn":null,"VarCharColumn":null,"BitColumn":false,"DecimalColumn":null,"RealColumn":null},{"Id":7,"IntegerColumn":750,"DateColumn":"2020-12-18T00:00:00","VarCharColumn":"add entry","BitColumn":false,"DecimalColumn":151,"RealColumn":205.12},{"Id":9,"IntegerColumn":950,"DateColumn":"2021-05-04T00:00:00","VarCharColumn":"add test 5","BitColumn":false,"DecimalColumn":131,"RealColumn":215.02},{"Id":10,"IntegerColumn":1000,"DateColumn":"1969-05-08T00:00:00","VarCharColumn":"add test 6","BitColumn":false,"DecimalColumn":152,"RealColumn":323.23},{"Id":11,"IntegerColumn":1100,"DateColumn":"2001-09-09T00:00:00","VarCharColumn":"add test 7","BitColumn":false,"DecimalColumn":501,"RealColumn":100.21},{"Id":8,"IntegerColumn":800,"DateColumn":"2020-12-15T00:00:00","VarCharColumn":"add test 4","BitColumn":false,"DecimalColumn":101,"RealColumn":150.5}]
Hi,
I think that your JSON file causes the problem. One possibility could be that it returns undefined instead of true/false for checkbox inputs or other mismatch in data types. It also cloud be not stringified properly. But in my opinion, there are just simply strings instead of proper number or boolean types.
Keep coding,
Dawid
The snippet is here https://mdbootstrap.com/snippets/standard/drs123/3034430/
I'm using ajax to load the table and can't give access to the internal data source. It's cleaner to read than what I posted in the browser, but it doesn't show the error I'm getting. Which is the
Uncaught SyntaxError: Unexpected token u in JSON at position 0
error. It goes away if I take the inputType: 'checkbox' out.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Dawid Wajszczuk staff commented 3 years ago
Hi. Could you please provide a snippet with this issue? It will help a lot. Thanks.