ColumnControl: Setting specific values for a searchList dropdown

timb72

I'm using ColumnControl and have a column that has simple "Yes" and "No" options in a searchList. I have a requirement where we are using a button as a preset so that when clicked it should "force" the selected option to be "Yes" for this dropdown, clearing any currently selected options.

So in summary, is there a way to programmatically first clear all selected options and then specifically set one or more options as selected in a specific searchList dropdown when using ColumnControl? I'm using ajax so it should then fire that request once the selected options have been modified.

Tim

allan

It is possible to programmatically clear the selected options using a method called columns().ccSearchClear() on the API (there is a singular method if you want to target a specific column as well).

That is currently undocumented and could change. I don't have any plans to change it - I use it internally for the ccSearchClear button, and has wondered about making it a public, supported and documented API but wasn't sure how useful it would be!

There isn't however, an API method to then select specific values. You can do it by triggering click events on the dropdown button and then the list item you want - that's what I've got it doing in the unit tests. I suppose you could even add a class to the body while doing that so it hides the dropdown visually, so the user doesn't get confused.

So while it is possible, its a bit hacky and isn't as trivial as I would perhaps like it to be! I'll add a feature request with your vote to have this implemented .

Allan

timb72

Thanks @allan for the clarification and details. I will try triggering click events on the dropdown as this was going to be my approach if there was nothing built in currently, I do think it would be a very useful future feature.

For the ccSearchClear() method, how would you target a specific column with that?

Tim

timb72

It's ok I've worked out the singular method

table.column(7).ccSearchClear();

Thanks again for the help.
Tim

allan

Yup - exactly that. Nice one

Allan

timb72

I've now got it working quite nicely for my own use case - and if anyone else needs some pointers I currently have (for the specific index 7 column) and my original table name with id tblDataset

// clear the column index 7
table.column(7).ccSearchClear();        
// trigger the click event for the dropdown list of column index 7
$('div#tblDataset_wrapper .dt-scroll-headInner > table.dataTable > thead > tr > td[data-dt-column="7"] button.dtcc-button_dropdown').trigger('click');
// trigger the click on the specific item in the dropdown (in my case this was for the text 'Yes'
('.dtcc-list-buttons > button:nth-child(1) > span:nth-child(2)').trigger('click');

I also discovered that if I included

$('div#tblDataset_wrapper.dt-container.dt-empty-footer div.dtcc-dropdown').remove();

in preXHR (because I'm using ajax) you don't "see" the dropdowns as they are being clicked programmatically.

Tim

EDAC

Re:

That is currently undocumented and could change. I don't have any plans to change it - I use it internally for the ccSearchClear button, and has wondered about making it a public, supported and documented API but wasn't sure how useful it would be!

I'm using columns().ccSearchClear() in a button where I needed to extend the functionality of the ccSearchClear button (specifically, to clear a date range filter that I added outside of columnControl). Having that be official/documented would be nice

allan

Thanks for the feedback! One of the things about it I don't like for a public API is the name. It should probably be columns().columnControl.searchClear() really. I'll keep this discussion in mind for when it does get promoted to being a public API and try to keep the old one as an alias, unless there is a really good reason not to.

Allan