Question about using 'select2' field plugin

JerryhXu

Hi,

I am trying to use 'select2' field plugin to achieve 'multi-select' dropdown box. I have the following sample JSON data:

"data": [
    {
      "DT_RowId": "row_1",
     MonthlyCost: 1000,
     MonthlyImpressions: 10000,
     Zone: [{
           Id: 1,
           name: "Zone1"
          },
         {
           id: 2,
          name: "Zone2"
          }
        ]
    },
    {
      "DT_RowId": "row_2",
      MonthlyCost: 100,
     MonthlyImpressions: 100,
     Zone: [{
           Id: 1,
           name: "Zone1"
          },
         {
           id: 2,
          name: "Zone2"
          },
          {
           id: 3,
           name: "Zone3"
          }
        ]
     
    }
]

I am trying to list zone using 'select2' field type with multi-select option. The following code does not work.

        {
            label: "DMA/Zone: ",
            name: "Zone[].id",
            "type": "select2",
            "opts": {
                "multiple": "multiple",
                "allowClear": true,
            },
        }

In addition, I may need to display zones in groups. I know you mentioned using 'children' properties. Can you give me an example? In this case, for example, I need to group 'zone1' and 'zone2' together. How do I do that?

Thank you very much for your help!

Jerry

allan

The id property in your JSON for the first Zone entry in each one is capitalised (Id) which might be a bit of a problem

When you say it isn't working, what is happening. Is the Select2 field created, does it have the options in it? Are you able give me a link to the page so I can check it out?

Regarding the grouping, do you mean a select2 optgroup?

Allan

JerryhXu

Hi, Allan,

Thanks for reply. I am able to get most things to work except select2 optgroup feature. I looked at this URL: https://select2.org/data-sources/formats and add "children" node, still select2 plugin does not seem to recognize it.
I used JSON like this for options:
{
"text": "Group",
"children": [
{value: 3, label: "zone3"},
{value: 4, label: "zone4"}
]
}

Thank you for your help!

Jerry

allan

Hi Jerry,

I've just sent a reply to your e-mail.

Regards,
Allan

Belorta

Hi,

Sorry to hijack this topic, but I'm having a very similar problem. I have some json data with children:

var demodata = [{
    text: "Optgroup 1",
    children: [{
        id: 1,
        text: "Item One"
    }, {
        id: 2,
        text: "Item two"
    },]
}, {
    text: "Optgroup 2",
    children: [{
        id: 3,
        text: "Item 3"
    }, {
            id: 4,
            text: "Item 4"
    },]
},]

Loading the select2 field with the .inst() method seems to work:

editor.field('ART').inst().select2({
    data: demodata
});

Then I create a second demodata object with "label" instead of "text" and "value" instead of "id":

var demodata2 = [{
    label: "Optgroup 1",
    children: [{
        value: 1,
        label: "Item One"
    }, {
        value: 2,
        label: "Item two"
    },]
}, {
    label: "Optgroup 2",
    children: [{
        value: 3,
        label: "Item 3"
    }, {
        value: 4,
        label: "Item 4"
    },]
},]

When I give that object to the .update() method, it seems to ignore the children-nodes:

editor.field('ART').update(demodata2);

which renders the following html:

<select id="DTE_Field_ART" tabindex="-1" class="form-control select2-hidden-accessible" aria-hidden="true">
<option value="Optgroup 1">Optgroup 1</option>
<option value="Optgroup 2">Optgroup 2</option>
</select>

Any help would be very welcome :-)