Why my select (multiselect) isn't showing selected options?

Why my select (multiselect) isn't showing selected options?

paweltrelapaweltrela Posts: 25Questions: 10Answers: 0
edited April 2020 in Free community support

Hello, i am using datatables editor.
I am using select type field with multiple:true option and inline editing.

Everything works almost fine, when i open page i see data with labels, i can click on field and i see options to select. The problem is, that options which are selected and saved in database are not selected while editing.

The field which i want to multiselect is called assigned.

My response:

{
    "data":
        [
            {
                "order":2,
                "id":209,
                "name":"my task",
                "task_deadline":"",
                "task_status":"Nie przypisano",
                "board_id":3,
                "task_group":null,
                "created_at":"2020-04-21T11:04:04.596Z",
                "updated_at":"2020-04-21T11:42:52.011Z",
                "assigned":
                    [
                        {
                            "label":"Artur",
                            "value":2
                        },
                        {
                            "label":"Artur",
                            "value":6
                        },
                        {
                            "label":"Arkadiusz",
                            "value":7
                        }
                    ]
                }
            ]
        }
}

Fragment of code inside DataTable Editor:

               {
                    label: "Przypisano:",
                    name: "assigned",
                    type: "select",
                    multiple: true,
                    options: [
                        <% @users.each do |item| %>
                            { label: "<%= item.name %>", value: "<%= item.id %>" },
                        <% end %>
                    ]
                }

Fragment of code inside DataTable:

               {
                    data: "assigned",
                    editField: "assigned",
                    render: function ( data, type, full, meta ) {
                        var full_assigned = full.assigned;
                        console.log(full_assigned);
                        items_assigned = '';
                        full_assigned.forEach(printAssigned);
                        function printAssigned(item) {
                            items_assigned = items_assigned + item['label'] + ' ';
                        }
                        return items_assigned;
                    },
                }

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,692Questions: 1Answers: 10,102 Site admin
    Answer ✓

    The problem is, that options which are selected and saved in database are not selected while editing.

    This will happen if the value of the property being edited is not in the list of options for the select. In this case simply using assigned as the data point name, just points at an object, so in fact what you want is:

    name: "assigned[].id",
    

    to get the id property from the objects in the array (since your options use the id as their value).

    Allan

  • paweltrelapaweltrela Posts: 25Questions: 10Answers: 0

    Thank you, it worked well.
    My code after changes:

    Datatables Editor:

                    {
                        label: "Przypisano:",
                        name: "assigned[].value",
                        type: "select",
                        multiple: true,
                        options: [
                            <% @users.each do |item| %>
                                { label: "<%= item.name %>", value: "<%= item.id %>" },
                            <% end %>
                        ],
                    }
    

    Datatables:

                    {
                        data: "assigned[].label",
                        editField: "assigned[].value",
                    }
    

    My PATCH assigned parameters are now like

    "assigned"=>{"0"=>{"value"=>"5"}, "1"=>{"value"=>"6"}}
    

    instead of:

    "assigned"=>{"5","6"}
    

    so i had to change my backend code to transform params a bit.

This discussion has been closed.