Replies

• allan Posts: 65,506Questions: 1Answers: 10,880 Site admin

  January 23 edited January 23

  It seems I chose the incorrect category when posting this, and can't change or delete this post. Please help me change it

  Done. To be honest, I'm not sure how much the categories are used! I don't use them myself, just the front page and search.

  Users were asking for the search input inside the dropdown to be automatically focused, so they can start typing right after the dropdown opens

  Good idea - thanks for the suggestion and the patch. I'll look at adding that as an option.

  Another requirement was quickly selecting the filtered options by pressing enter. For that, I patched the following functions:

  I currently have "buttons" for "Select all" and "Deselect". I wonder if a "Select filtered" would do it, or perhaps the "Select all" should be changed to be "Select filtered" when a filter is applied?

  Allan
• hserveira Posts: 14Questions: 4Answers: 0

  January 26

  Thanks for your reply!
  Yes, I believe the "Select all" could be a little misleading if the user entered something on the search box, so having it change into "Select filtered" would be great.
• hserveira Posts: 14Questions: 4Answers: 0

  January 26

  Still on this topic, I came up with a solution to another common requirement: cascading the filters.

  This was achieved by creating a new function:

  function cascadeDropdown(dropdown, dt, btn) {  // Line 253
      // Get the column index from the button host
      let columnIndex = btn._s.host._s.columnIdx;
      // Get the data from the filtered rows only, so that the cascade effect works
      let rows = dt.rows({search: 'applied'}).indexes();
      let columnData = dt.cells(rows, columnIndex).data().toArray();
      // Transform into set for easier lookup
      let uniqueData = Array.from(new Set(columnData));
      let options = dropdown.querySelectorAll('button.dtcc-button');
  
      // Loop through each button in the dropdown and hide it if its value is not present in the column data
      options.forEach((button) => {
          const buttonValue = button.getAttribute('aria-label');
          const isValuePresent = uniqueData.some(data => {
              return data == buttonValue; // Use loose equality for type coercion
          });
          if (!isValuePresent) {
              button.style.display = 'none';
          } else {
              button.style.display = '';
          }
      });
  }  // Line 277
  

  And registering it inside dropdownContent:

  var btn = new Button(dt, this)
              .text(dt.i18n('columnControl.dropdown', config.text))
              .icon(config.icon)
              .className(config.className)
              .dropdownDisplay(liner)
              .handler(function (e) {
              // Do nothing if our dropdown was just closed as part of the event (i.e. allow
              // the button to toggle it closed)
              if (e._closed && e._closed.includes(dropdown)) {
                  return;
              }
              attachDropdown(dropdown, dt, config._parents ? config._parents[0] : btn);
              // PATCH START [Line 389]
              cascadeDropdown(dropdown, dt, config._parents ? config._parents[0] : btn);
              // PATCH END [Line 391]
              // When activated using a key - auto focus on the first item in the popover
              var focusable = dropdown.querySelector('input, a, button');
              if (focusable && e.type === 'keypress') {
                  focusable.focus();
              }
          });
  

  I'm sure it can be optimized somehow
• hserveira Posts: 14Questions: 4Answers: 0

  January 26

  I found out that putting cascadeDropdown after attachDropdown makes it not work very well along with selectNone. It seems like a better option is attach it to a search event on the table:

     dt.on('search.dt', function () {
         console.log('search event triggered')
         cascadeDropdown(dropdown, dt, btn);
     });
  

  It's working pretty well so far. I just noticed by adding the console.log that search.dt event fires quite a few times:
  
  Is this normal or did I mess up?
• allan Posts: 65,506Questions: 1Answers: 10,880 Site admin

  January 26

  Sounds like there is a loop somewhere. I wouldn't expect it to fire that many times.

  At the moment a cascade for the search in ColumnControl is not something I'm intending to add, but I am going to start on a rewrite of SearchPanes soon, and will be looking at how it might be integrated with ColumnControl and if there is scope there for that functionality.

  Allan
• allan Posts: 65,506Questions: 1Answers: 10,880 Site admin

  January 26

  For auto focus on the search input in the dropdown, I've committed a change to add that ability. It will be in the next major release of ColumnControl, which will ship alongside DataTables 3 (which is where all new feature development is currently going).

  Allan
• allan Posts: 65,506Questions: 1Answers: 10,880 Site admin

  January 26 edited January 26

  Regarding the Select All issue, I've committed a change for that as well, renaming "Select all" to simply "Select" and having it select the visible options.

  

  Deselect isn't "smart" in that regard, it just deselects everything, which I think would be the most common use case / expectation.

  Allan