Select2 is not loading the selected values when edit the row the first time in a page

Select2 is not loading the selected values when edit the row the first time in a page

jose.tristanjose.tristan Posts: 3Questions: 1Answers: 0

Hi,

I have tried to create a test case but there is any issue adding the libs. If you can give me any clue about how to finish the test case I will: https://live.datatables.net/kaquqexa/3/

I have one field of type select2 (blend) with option: multiple and other (format) allowing only single values. When I load the first time the page and edit a row the modal editor is loaded without the selected values. However, if I edit a second time the values are loaded.

var editor = new DataTable.Editor({
        ajax: {
            create: '/save/${id}',
            edit: '/update/',
            remove: '/delete/',
            idSrc: 'id'
        },
        fields: [
            {
                name: 'DT_RowId',
                type: 'hidden',
            },
            {
                label: 'Blend',
                name: 'blend',
                type: "select2",
                separator: ":",
               opts: {
                    "multiple": true,
                    "allowClear": true,
                    "separator": ":",
                       "placeholder": {
                           "id": "",
                           "text":"(Select blends)"
                       }
                },
                options: [
                    { label: '', value: '' },
                    { label: '9000 Extra', value: '9000'},                    
                    { label: '9001 RA', value: '9001'},                    
                    { label: '9001 Col', value: '9001'},                    
                    { label: '900R Classic', value: '900R'}
                    
                ]
            },
            {
                label: 'Format',
                name: 'format',
                type: 'select2',
                options: [
                    { label: '', value: '' },
                    { label: '0000 Auxiliary Materials', value: '0000' },                    
                    { label: '0001 Lid 50g.', value: '0001' },
                ]
            },
            {
                label: 'Reference',
                name: 'reference',
                type: 'datatable',
                config: {
                    columns: [
                        {
                            title: 'Reference',
                            data: 'label'
                        }
                    ]
                },
                options: [
                        {label:'', value:''},
                        {
                            label: '9022 sp.20 Kg',
                            value: '8020'
                        },
                        
                        {
                            label: '22G0 spr.300Kg.',
                            value: '8023'
                        },
                        
                    ]
            },
            {
                label: 'Quantity',
                name: 'quantity'
            },
            {
                label: 'Unit',
                name: 'unit',
                def: 'KG',
                type: 'select',
                options: [
                     {label: 'Caja', value: 'BOX'},                    
                     {label: 'Kilo', value: 'KG'},
                ]
        },
        {
            label: 'Status',
            name: 'status',
            def: 'NO_ACTIVED',
            type: 'select',
            options: [
                {label: 'Activo', value: 'ACTIVED'},                
                {label: 'No activo', value: 'NO_ACTIVED'},
            ]
        },
        {
            label: 'quantity to reduce',
            name: 'quantityToBeReduced',
        },
                
        ],
            table: '#items'
        })
    ;




   var table = new DataTable('#items', {
        ajax:  {
            url: '/list/${id}'
        },
        columns: [
            { data: 'blends.description' },
            { data: 'formats.description' },
            { data: 'references.description' },
            { data: 'quantity' },
            { data: 'units.description' },
            { data: 'statuses.description' }            
        ],
        layout: {
            topStart: {
                buttons: [
                    { extend: 'create', editor: editor },
                    { extend: 'edit', editor: editor },
                    { extend: 'remove', editor: editor }
                ]
            }
        },
        select: true
    });

Thank you very much.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin

    Here is the example running: https://live.datatables.net/kaquqexa/4/edit . If not exactly working. I'm not entirely sure what the loaded data would be, and therefore not sure what the error you are seeing is.

    In the example there is no data point named 'blend', so it won't be able to load the data. Also in the example the HTML sourced data is 9000 Extra Decaf SD/Aglo which doesn't match a value in the list of options for the Select2 input.

    If you can show the Ajax loaded data for a row, that should help address these questions.

    Allan

  • jose.tristanjose.tristan Posts: 3Questions: 1Answers: 0
    edited September 27

    Thanks Allan for your support.

    I have seen you have fixed the errors I did at prepare the test.

    This is the json as response to the "list" called:

    [
      {
        "reference": "8020",
        "unit": "KG",
        "formats": {
          "description": "0001 Lid 50g."
        },
        "quantity": 6000,
        "references": {
          "description": "9022 sp.20 Kg"
        },
        "blend": "9000",
        "format": "0001",
        "DT_RowId": 117,
        "statuses": {
          "description": "ACTIVED"
        },
        "units": {
          "description": "KG"
        },
        "blends": {
          "code": "9000",
          "description": "9000 Extra"
        },
        "status": "ACTIVED"
      }
    ]
    

    Thanks and regards.

  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin

    Thank you. With that in the test case I can see the error happening: https://live.datatables.net/kaquqexa/8/edit .

    I'll reply back later once I've had a chance to look into what is going wrong.

    Allan

  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin
    Answer ✓

    I updated the Select2 plugin to match the latest available plugin code and it seems to work as expected: https://live.datatables.net/kaquqexa/9/edit .

    Allan

  • jose.tristanjose.tristan Posts: 3Questions: 1Answers: 0

    Thank you very much Allan. It is working as expected.

Sign In or Register to comment.