Topic: Table Editor inputType

drs123 priority asked 3 years ago


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 }
    );
});

Dawid Wajszczuk staff commented 3 years ago

Hi. Could you please provide a snippet with this issue? It will help a lot. Thanks.


Dawid Wajszczuk staff answered 3 years ago


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


drs123 priority answered 3 years ago


That was it. Thank you very much!


drs123 priority answered 3 years ago


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}]


Dawid Wajszczuk staff answered 3 years ago


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


drs123 priority answered 3 years ago


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • 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