Bootstrap-table: Add button into the data show column dropdown list

[BenoitFroment]

Hi,
I've created my buttons to check or uncheck some columns with the show/hideColumn function.
I want theses buttons into the dropdown list of data show column toggle.
I tried to give an id to the list and append my buttons but does'nt work.
Someone got an easy way to do this?
Thanks a lot,

[dabros]

@Aorewen - the showColumns option has a very simple and useable ui

Its not clear what exactly your trying to do otherwise, so please provide fiddle and more detail

https://github.com/wenzhixin/bootstrap-table#reporting-issues

[BenoitFroment]

http://imgur.com/guMQiEa

As u can see, i want to put my group of buttons into the showColumns dropdown menu.
The problem is he's generated by the bootstrap-table.js, so i don't know how to interact with him.

If u don't understand me, i'll do a fiddle^^

Ty for u reply, sorry for my english.

[dabros]

Yes please, do a fiddle

I see 2 main possible solutions, here are links to help you create fiddles:

A. Callback Events

I would you incorperate or even use http://bootstrap-table.wenzhixin.net.cn/examples/#events as a base, so we get the callback options and the console.log that shows when they occur.

B. Custom Toolbar
These two examples might also help as they detail custom toolbars, which is the other way this might be solved:
http://bootstrap-table.wenzhixin.net.cn/examples/#toolbar
http://issues.wenzhixin.net.cn/bootstrap-table/#options/custom-toolbar.html

But, we lack understanding of the core problem

The key being you need to remove your focus on the solution and consider carefully the original problem, i.e. why these buttons need to exist?

Please explain a litte more, for starters:

1. Do you still need 'showColumns'?
2. What do these new buttons do (and how are they different from showColumns default buttons)?
3. Why do they need to be in same dropdown?
4. Would a custom dropdown to complement or even replace the 'showColumns' dropdown work instead?

Thanks

[djhvscf]

@dabros Excellent answer! thanks a lot.. @Aorewen, please double check the dabros' answer.

[BenoitFroment]

First of all, a big thank u for ur time and ur complete answer. U try to understand me and i really appreciate that.

https://jsfiddle.net/Aorewen/p9mq5r7o/
Here's my fiddle, u will understand that my problem is really simple.

1. Do you still need 'showColumns'?

Yes absolutely! My buttons are needed in addition, to quickly set columns to show/hide.

1. What do these new buttons do (and how are they different from showColumns default buttons)?

These buttons show/hide some columns, because they are too much columns to be managed.

1. Why do they need to be in same dropdown?

Only for the UI (and now for my personnal knowledge :))

1. Would a custom dropdown to complement or even replace the 'showColumns' dropdown work instead?

To complement, like I tried to explain before.

Thanks u again.

[dabros]

https://jsfiddle.net/dabros/emLthg41/

So this isnt complete, but shows how to add custom items.

My best bet is that the logic inside the function that sets up the header (look for when the event 'postHeader'/'post-header' is called inside bootstrap table js), that is where the behaiviour is added to not close the dropdown on selection.

So look at how those other options created and see what you need to add in the callback to make them work.

You can see from the fiddle how to call that logic only once each refresh (add custom class check else will run twice) and how to add an item with click behaiviour, or just as a string.

Maybe add them as strings then after $.prepend() use a custom class on those buttons or LI to attach behaivour, using a data-attribute to hold a comma seperated list of fields you wanted to affect.

In any case - there is how you add to that ui, and some examples of behaiviour. Look at bootstrap-table.js for how to keep dropdown open and ect.

[BenoitFroment]

Thanks for ur answer, i will study and check it tomorrow morning :)

[dabros]

Though, all this said, maybe a better approach is a custom dropdown titled 'layout', with options that affect the columns and anything else you want.

This way you arnt having to interact with any existing elements, and just use the custom toolbar approach i linked above.

No need for checkboxes either, unless you fixed on that, but if desired you can track the 'selected' state by a js variable and use of callbacks (column-switch.bs.table and post-header.bs.table most likely) which could also reset that selected variable to null and remove the 'selected' class on the matching item.

[BenoitFroment]

If u have the time for it, could u provide me a simple fiddle of that?

[dabros]

The 2 toolbar example links i shared above are good examples, with you just needing to add the logic for what to do onClick ofcourse

[aacostamx]

I had a similar problem. My solution was only added a new option in drowndop menu call "select all".
http://imgur.com/a/vewWA

[djhvscf]

Close this issue because the solution was provided

[sendilgan]

the photo and look really looks really really good.. can you add working fiddle ?
that will be really helpful...........................