Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  September 2023 Answer ✓

  That's not working because you are attempting to manipulate the DOM like a string there. Line 5 creates a whole optgroup for example. Line 7 also creates a single optgroup and line 9 does nothing. You can check that out on the console:

  

  What you'd have to do is insert the two optgroups into the select and then move the option elements that you want into each one.

  I'd also suggest you do this only once (i.e. immediately after the options have loaded into Editor) rather than on every opened - otherwise you might end up adding many option groups!

  You can't just create new option elements as Editor adds custom properties to them to allow for strict typing of data.

  Allan
• rf1234 Posts: 2,809Questions: 85Answers: 406

  September 2023

  What you'd have to do is insert the two optgroups into the select and then move the option elements that you want into each one.

  That sounds very cumbersome. I am loading the options from the server ...

  I'd also suggest you do this only once (i.e. immediately after the options have loaded into Editor) rather than on every opened - otherwise you might end up adding many option groups!

  Sure hadn't gotten that far when the question came up

  I chose a simple solution because it isn't really required that the options are within an optgroup. All I need is headings for the various groups of options.

  This is what I am using now:

  editor
      .one('opened', function (e, mode, action) {
          $("#DTE_Field_report-report_type_id option").each(function(i) {
              if ( i == 0 ) {
                  $(this).before("<optgroup label='1st group'>");
              } else if ( $(this).text().substr(0,2) == "09" ) {
                  $(this).after("<optgroup label='2nd group'>");
              }
          });
      })
  
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  September 2023 Answer ✓

  optgroups for the select are something I want to add support for in Editor in future! They really are useful for organising data .

  Allan
• rf1234 Posts: 2,809Questions: 85Answers: 406

  September 2023

  That would really be useful, Allan!

  I modified my solution and really move the options into the optgroups now. That was easier than I thought.

  I found this when googling:

  All you have to do is select the element(s) you want to move, then call an “adding” method such as append() , appendTo() or prepend() to add the selected elements to another parent element. jQuery automatically realises that the element(s) to add already exist in the page, and it moves the element(s) to the new parent.

  editor
      .one('opened', function (e, mode, action) {
          $("#DTE_Field_report-report_type_id option").each(function(i) {
              if ( i == 0 ) {
                  $(this).before("<optgroup label='1st group' id='1stgroup'>");
              } else if ( $(this).text().substr(0,2) == "09" ) {
                  $(this).after("<optgroup label='2nd group' id='2ndgroup'>");
              }
              if ( $(this).text().substr(0,2) <= "09" ) {
                  $(this).appendTo('#1stgroup');
              } else {
                  $(this).appendTo('#2ndgroup');
              }
          });
      })
  
• rf1234 Posts: 2,809Questions: 85Answers: 406

  September 2023

  The solution above created issues when you do ajax.reloads of the data table. Suddenly you have empty optgroups and stuff like that.

  This is now my approach that also works when the table is reloaded from the server without page refresh.

  editor
      .on('opened', function (e, mode, action) {
          var optionsAdjusted = false;
          //do we have optgroups that are filled? => do nothing!
          $("#DTE_Field_report-report_type_id optgroup").each(function(i) {
              if ( $(this).children().length > 0 ) {
                  optionsAdjusted = true;
                  return false;
              }
          });
          if ( optionsAdjusted ) {
              return true; //we can stop here if we have adjusted options with optgroups
          }
          //remove empty optgroups (if there are any)
          $("#DTE_Field_report-report_type_id optgroup").each(function(i) {
              if ( $(this).children().length == 0 ) {
                  $(this).remove();
              }
          });
          //build the new optgroups with options inside
          optionsAdjusted = true;
          var oldReportType = "";
          var id = 0;
          $("#DTE_Field_report-report_type_id option").each(function(i) {
              if ( i == 0 ) {
                  return true;
              }
              var n = $(this).text().lastIndexOf("#");
              var reportType = $(this).text().substr(n + 1);
              $(this).text( $(this).text().substr(0, n) );
              if ( oldReportType != reportType ) {
                  id++;
                  $(this).before('<optgroup label="' + reportType + '"id="' + id + '">');
                  oldReportType = reportType;
              }
              $(this).appendTo('optgroup#' + id);
          });
      })
  
• rf1234 Posts: 2,809Questions: 85Answers: 406

  September 2023 edited September 2023

  @allan

  optgroups for the select are something I want to add support for in Editor in future! They really are useful for organising data .

  Could you make those optgroups collapsible as well please.

  I have just implemented this using select2.

  This is what is looks like uncollapsed:
  

  And (partly) collapsed:
  

  This does the trick when using select2:

  $("body").on('click', '.select2-results__group', function() {
      $(this).siblings().toggle();
  });
  
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  September 2023

  Could you make those optgroups collapsible as well please.

  I don't believe that is something that is built into the browser. For such a thing you'd need to use Select2 or similar.

  Allan
• rf1234 Posts: 2,809Questions: 85Answers: 406

  September 2023

  No problem to do that if your select2 plugin allows the definition of outgroups within the Editor api.