Multiple select in filter-control

[Valery1991]

Hello,

I was wondering if there is a way to get multiple select in filter-control to work? For example, selecting two (or more) filters in a single dropdown.

Thanks & kind regards.

[jamesRUS52]

Hello When will release v2.0.0 ? Do you have any workaround, to use any custom control? Is it posible use custom controls like select2, bootstrap-select or bootstrap-multiselect?

[wenzhixin]

Consider adding support for https://github.com/wenzhixin/multiple-select plugin.

https://live.bootstrap-table.com/code/sebastiangehrt/2412

[g3rd0]

Consider adding support for https://github.com/wenzhixin/multiple-select plugin.

https://live.bootstrap-table.com/code/sebastiangehrt/2412

https://live.bootstrap-table.com/code/sebastiangehrt/2413 is the correct use case for multi select for e.g. a categorie

[rayoray]

Consider adding support for https://github.com/wenzhixin/multiple-select plugin.

https://live.bootstrap-table.com/code/sebastiangehrt/2412

@wenzhixin multiple-select.js plugin does not seem to work together with bootstrap-table-filter-control.js see https://codepen.io/rayzoray/pen/pojooVo

[wenzhixin]

@rayoray like this: https://live.bootstrap-table.com/code/wenzhixin/2451

[rayoray]

@wenzhixin no not exactly: data-field="city" must be class="multiple-select".

[wenzhixin]

You can use the bootstrap theme: <link href="https://unpkg.com/multiple-select@1.5.2/dist/themes/bootstrap.min.css" rel="stylesheet">.

http://multiple-select.wenzhixin.net.cn/examples#themes.html

[rayoray]

@wenzhixin theme helps, but selecting checkbox options does not filter table; see example pen: https://codepen.io/rayzoray/pen/jObOdvz

[wenzhixin]

Yes, multiple select filtering is not yet supported, so mark it as a feature.

[rayoray]

@wenzhixin do you have a temporary solution or workaround that you can share for this feature? as this issue has been identified in 2017?

[albfan]

Just to update the case:

https://live.bootstrap-table.com/code/albfan/3509

I think some work needs to be done on filtering multiple select (like do a OR instead of AND filter), but that's expected.

@wenzhixin so just using the dist/ directory instead of cdn is enough right?

[UtechtDustin]

@albfan As you can see the issue is still open, which means the table currently dont support multiselects.

[albfan]

@UtechtDustin of course, just mean if there's an unstable dist to deploy and provide feedback.

Just let me know if I can help in any way

[UtechtDustin]

If we need help we will ask you, thanks for the offer.

[UtechtDustin]

@wenzhixin tried to implement that with your multiselect lib, the problem is that we have to check the count of the options. Your lib clears the select element, is there a method to get the options/data ? (Cant find anything on the documentation)

[ghost]

@wenzhixin Is this issue resolved now ? I am looking for the same feature :/

[gp-saurabh]

@wenzhixin We are looking forward for this implementation

[djhvscf]

Working on this in this PR #5129

[ghost]

Is this issue solved in the new release v1.17.0? because I tried and got the same result :/

[UtechtDustin]

@gp-manishverma No its not, we had issue which was not easy to fix (that is the reason why we released 1.17.0 first). I hope this feature will be added in the next version.

[djhvscf]

Hi @gp-manishverma basically we're facing an issue when the table height is set. Because of that we're considering to improve the filter control logic and how this is rendered.

[yuyoux]

anyone know how to do it?

[djhvscf]

This is in progress. But still working on design phase since the height is causing issue with filter control

[Crusader2010]

Hi guys. Any news on this?

[djhvscf]

Still working on it. This requires the extension to be rewritten.

[mayo589]

Hi :) any rough guess, when this feature will be added?

[vlatro]

Hi guys, this would really be a nice functionality. Is there any workaround for now?

[ashmosis]

@djhvscf any update on when this feature may be available? Let me know if I can be of any assistance.

[djhvscf]

hi, I'm working on recreate the extension. This in order to have a better extension, robust and stable. See the progress here: https://github.com/wenzhixin/bootstrap-table/tree/feature/multiselect-filtercontrol

[albfan]

@djhvscf Any running example. I try modifying my old one with your branch, but nothing seems to work

https://live.bootstrap-table.com/code/albfan/6507

[djhvscf]

See this PR https://github.com/wenzhixin/bootstrap-table/pull/5583

[albfan]

I tried to follow PR but can see how to enable multiselect. I expected something like data-filter-control="checkbox"

Is there anything we can check using that PR @djhvscf?

[UtechtDustin]

@albfan The PR is work in progress, so you have to wait until @djhvscf have done (re)implementing the filter control extension. If this is done @djhvscf will document it :-)

[albfan]

@UtechtDustin of course.

In the mean time I just update the example to use multiple-select.

https://live.bootstrap-table.com/code/albfan/7140

NOTE: at onCreatedControls options are still not loaded NOTE2: this multiple select do not filter

[albfan]

Example reworked to use multiselect with filterBy:

It honor cleanSearch:

https://live.bootstrap-table.com/code/albfan/7162

https://user-images.githubusercontent.com/220968/113277762-5cf83780-92e1-11eb-870c-20753d423479.mp4

[djhvscf]

We're going to implement multiselect using this library http://multiple-select.wenzhixin.net.cn/ which is part of @wenzhixin work!

[albfan]

@djhvscf there's a mistake in docs, it is not data-filter-multiple-select but data-filter-control-multiple-select.

After fix, multiselect is working as expected.

Will create a PR targetting your PR to fix that part. Will do the same for data-filter-multiple-select-options

[AdeSupriyadi]

@albfan example above https://live.bootstrap-table.com/code/albfan/7162 the result not same, filter-control appeared just the last column, and not multi-select

[djhvscf]

This feature is removed from the current scope of https://github.com/wenzhixin/bootstrap-table/pull/5583

[gb-noyb]

Hi all, I am looking for exactly this feature; using the Multiple Select widget in a column filter would be perfect.

@djhvscf (or others!): Given that you tried this but then removed it from the scope of #5583, might you have either warnings or tips on how to implement this? Perhaps you have any (incomplete) code/branch that I could try to continue with, instead of starting from scratch?

[djhvscf]

@gb-noyb we need to start from scratch since this is a major feature for this extension. But since the performance is the priority right now, we don't have plans to implement this feature in the near future

[albfan]

I reworked the live example to use @djhvscf and my improvements (based on 1.18.3 version):

https://github.com/albfan/bootstrap-table/tree/feature/multiselect-filtercontrol

See this only works in bootstrap 4:

https://live.bootstrap-table.com/code/albfan/12640

@wenzhixin @djhvscf I can work on this if we describe the problems detected (even if that's from scratch)

[djhvscf]

@albfan let's work on that. What kind of details do you need?

[albfan]

cool @djhvscf.

My understanding is from:

This feature is removed from the current scope of https://github.com/wenzhixin/bootstrap-table/pull/5583

we need to start from scratch since this is a major feature for this extension. But since the performance is the priority right now, we don't have plans to implement this feature in the near future

Some major problems where detected and the feature was rejected.

• First, let's define a branch where we can work on.

I have this https://github.com/albfan/bootstrap-table/tree/feature/multiselect-filtercontrol, but something on upstream would be better. Not sure if it is ok to have another feature branch (looks bootstrap table always work on develop branch until merge to master and tag)

• Next let's define a live example where people can show flaws or corner cases. I reread docs and came out with:

https://live.bootstrap-table.com/code/albfan/12674

which is super clean and works with multiple, non multiple selects, inputs. It uses data-filter-control-multiple-select

Detected problems:

• I can see there's a problem with dropdown on multiple select as it renders inside the table container (see single select is not)

• I tried to define height but that brings more problems (no dropdown is render for multiple select:

https://live.bootstrap-table.com/code/albfan/12676

If @wenzhixin or you @djhvscf are aware of any other problems, or performance penalties let's summarize here. I suppose this could be a solution for many people if we resolve those two I found.

NOTE: Rebase this work is fine for me, but if codebase changed a lot maybe we can start small and fix this working branch

[dharen008]

Hi Guys,

I did it in a different way using filterby and adding a custom button.

please check this out https://live.bootstrap-table.com/code/dharen008/12730

Let me know if you encounter issues

[CosmoFox]

Hello everyone! Will be that future comeback? It`s superactual!

[nickjrotundo]

I'm not entirely sure what updates seem to have broken the previously-submitted workarounds, but, here's one I did today. It could use a little cleaning up (like the placeholder), but the idea is there.

https://live.bootstrap-table.com/code/nickjrotundo/17769 Edit: typo and small cleanup