Table Editor inputType


Topic: Table Editor inputType

drs123 pro premium priority asked 2 weeks 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 commented a week ago

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


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 pro premium priority answered a week ago

That was it. Thank you very much!


drs123 pro premium priority answered a week 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.


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 pro premium priority answered a week 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}]


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • 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