Type Datatable don't select

marianidiego

Link to test case:
https://my.cleanlife.ch/adr_form.php

code:

                                                {
                                                    label:      'UN Number:',
                                                    name:       'onu',
                                                    type:       'datatable',
                                                    options:    dataproducts,
                                                    config: {
                                                                ordering:       false,
                                                                columns: [
                                                                    {
                                                                        title:  'UN',
                                                                        data:   'onu'
                                                                    },
                                                            /*      {
                                                                        title:  'Label\nClass\nTunnel',
                                                                        data:   'value',
                                                                        render: function ( data, type, row, meta ) {
                                                                            return row['labels']+"\n"+ row['class']+"\n"+ row['tunnel'].match( /\((.*?)\)/g);
                                                                        }
                                                                    },
                                                            *//*        {
                                                                        title:  'Etichette',
                                                                        data:   'labels',
                                                                        visible: false,
                                                                    },
                                                                    {
                                                                        title:  'Classe',
                                                                        data:   'class',
                                                                        visible: false,
                                                                    },
                                                                    {
                                                                        title:  'Tunnel',
                                                                        data:   'tunnel',
                                                                        visible: false,
                                                                        render: function ( data, type, row, meta ) {
                                                                            console.log(data);
                                                                            return ((data.match( /\((.*?)\)/g)??[])[0]??"").replace(/\(|\)/g, '');
                                                                        }
                                                                    },
                                                            */      {
                                                                        title:  'Nome',
                                                                        data:   'label'
                                                                    }
                                                                ]
                                                            }
                                                },

Description of problem:
I can't select the row in Field Type datatable: https://editor.datatables.net/reference/field/datatable

Why?!?

allan

The DataTable for the input is missing the class table, which is used in Bootstrap styling to indicate that it should be displayed as a table. I'm not immediately sure why that is the case on your page, but the examples don't have that problem. I need to dash at the moment (running a charity event) but I'll look at this when I get back.

Allan

allan

I should say, the selection does work - the class is correctly applied. It is purely a visual thing - the classes for the styling just aren't applying.

marianidiego

Thank's a lot.

marianidiego

I haven't been able to find the exact error issue.

I've shared a page with you: https://my.cleanlife.ch/adr_form.php

On this page, you can add a product. However, when editing a product, the File datatable isn't loading. Is it possible to manually set the field using something like: materialEditor.field("onu").set( .... ??

allan

Can you tell me the steps I need to take to see the error please? Do I need to create a new entry from the "Neu" button, or is there some other sequence tht I need to perform to see the issue?

Allan

marianidiego

That's the error I was writing in this chat. Once you enter a value in the table, if you edit it, the “dattable” field does not select the value that was in the table.

allan

I think the issue is that the value column in the onu DataTable field is a number, but in the data for the host table onu is a string. "1" !== 1 and therefore the row isn't selected.

Are you able to make the types match? Either change the host table's onu to be a number, or the field's value to be a string.

Allan

marianidiego

The unique relationship value of the table is "value". I converted both "value" and "onu" to string. While previously "value" was an integer.

Currently, datatable davlors are loaded in this way:

                        <?php
                            // Caricamento dei valori UN
                            $query = 'SELECT CAST(data_ADR_id AS CHAR) AS value,
                                        `data_ADR`.`1` onu, 
                                        `data_ADR`.`5` labels,
                                        `data_ADR`.`4` class,
                                        `data_ADR`.`15` tunnel,
                                        `data_ADR`.`IT` label,
                                        `data_ADR`.`2` EN
                                        FROM `data_ADR`;';



                            $data = $ADMIN['db']->sql($query)->fetchAll(PDO::FETCH_BOTH);
                            $data = json_encode($data, JSON_HEX_QUOT );
                        ?>

Several times I come across this kind of error. I have not yet been able to find the cause.

I also use in datatable setting:

                                            options:    dataproducts,
                                            optionsPair: { 
                                                            label: 'value', 
                                                            value: 'value' 
                                                        },

allan

I don't understand why the row isn't being selected I'm afraid. Can you change dataTables.editor.min.js to be dataTables.editor.js so it loads the non-modified version of Editor. I'll need to debug the code to understand what is going wrong here.

Thanks,
Allan

marianidiego

Make!

allan

Thank you. That proved to be rather difficult to track down, but I got it in the end. In your DataTable defaults file you have:

                drawCallback: function( settings ) {
                    try{
                        
                        this.api().row( { selected: true }).deselect(); // Deselezione ex righa
                        //this.api().row(':eq(0)', { page: 'current' }).select();
                    }catch(e){}
                },

That is causing the issue. When the table is redrawn, the row is deselected!! You need to remove that from the defaults or add drawCallback: () => {} into your config object for the onu field.

Allan

marianidiego

Tank's a lot!