CODEWITHSUNDEEP
javascriptangularjsangular-ui-gridui-grid
GOK
GOK

Reputation: 2428

How to create multi select for filters in ui-grid columns which are served from server side filtering?

I have a ui-grid on a page with server side pagination and server side filtering enabled, currently it has only a dropdown which shows the possible values of all the pages in the per page json from server.

Now i need the user to give options to select multiple values from the dropdown like multiselect dropdown and then hit the service and collect the paginated data and refresh the ui-grid.

I have come across many solutions but no one has given me server side solutions all are pertaining to single json source :

1. ui-grid - <http://ui-grid.info/docs/#/tutorial/306_custom_filters>
> I cannot use it as my options can be lengthier and also will be the grid look uneven and user experience will be bad

2. Using angular-dropdown-multiselect.js directive  - <http://plnkr.co/edit/MLT02DpcwoL0AK2QClow?p=preview>
> This looks fine but it is having the options hardcoded and no server interaction

3. Using custom multi select - <http://www.c-sharpcorner.com/article/how-to-create-a-custom-multi-select-filter-for-ui-grid-in-angularjs-1-x/>
> Only problem is this one is in Angular 2 or above and my application is Angular 1.4.0

Please suggest some solutions so that i can get multi-select having options populated from server side response and when selected it interacts with server to get the data set for ui-grid.

Upvotes: 1

Views: 1100

Answers (1)

tonysepia
tonysepia

Reputation: 3510

  1. Using angular-dropdown-multiselect.js directive

You can re-write the showModal method in multiSelectCtrl to fetch all available options for filtering from your API.

Also, within this method, the $scope.col.grid is available to you - you can grab the 'select' values from there (grid.columns[i].filters.selectOptions)

Upvotes: 0

Related Questions