Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/all selected text #234

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Feature/all selected text #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a195b86
added selected/unselected all label
corrajj Jan 31, 2020
6b6edf6
minor mod to ngx-bootstrap imports
corrajj May 7, 2020
0adb7b3
Fixed logic on demo page for enabled all selected/unselected label; f…
corrajj May 8, 2020
e5c9cbb
updates to readme.md
corrajj May 8, 2020
9eade46
removed spaces readme.md
corrajj May 8, 2020
617ba35
minor type showFilter in demo app
corrajj May 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 24 additions & 17 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,17 +56,21 @@ export class AppComponent implements OnInit {
selectedItems = [];
dropdownSettings = {};
ngOnInit() {
this.dropdownList = [
{ item_id: 1, item_text: 'Mumbai' },
{ item_id: 2, item_text: 'Bangaluru' },
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' },
{ item_id: 5, item_text: 'New Delhi' }
];
this.selectedItems = [
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' }
];

this.cities = [
{ item_id: 1, item_text: 'New Delhi' },
{ item_id: 2, item_text: 'Mumbai' },
{ item_id: 3, item_text: 'Bangalore', isDisabled: this.disableBangalore },
{ item_id: 4, item_text: 'Pune' },
{ item_id: 5, item_text: 'Chennai' },
{ item_id: 6, item_text: 'Navsari' },
{ item_id: 7, item_text: 'Corral' }
];
this.selectedItems = [
{ item_id: 4, item_text: 'Pune' },
{ item_id: 6, item_text: 'Navsari' }
];

this.dropdownSettings:IDropdownSettings = {
singleSelection: false,
idField: 'item_id',
Expand Down Expand Up @@ -106,23 +110,26 @@ export class AppComponent implements OnInit {
| placeholder | String | Text to be show in the dropdown, when no items are selected. | 'Select' |
| disabled | Boolean | Disable the dropdown | false |
| data | Array<any> | Array of items from which to select. Should be an array of objects with id and `text` properties. You can also use custom properties. In that case you need to map idField and `textField` properties. As convenience, you may also pass an array of strings, in which case the same string is used for both the ID and the text(no mapping is required) | n/a |
| idField | String | map id field in case of custom array of object | 'id' |
| textField | String | map text field in case of custom array of object | 'text' |
| idField | String | Map id field in case of custom array of object | 'id' |
| textField | String | Map text field in case of custom array of object | 'text' |
| enableCheckAll | Boolean | Enable the option to select all items in list | false |
| selectAllText | String | Text to display as the label of select all option | Select All |
| unSelectAllText | String | Text to display as the label of unSelect option | UnSelect All |
| allowSearchFilter | Boolean | Enable filter option for the list. | false |
| searchPlaceholderText | String | custom search placeholder | Search |
| searchPlaceholderText | String | Custom search placeholder | Search |
| clearSearchFilter | Boolean | clear search filter on dropdown close | true |
| maxHeight | Number | Set maximum height of the dropdown list in px. | 197 |
| itemsShowLimit | Number | Limit the number of items to show in the input field. If not set will show all selected. | All |
| limitSelection | Number | Limit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled. | none |
| searchPlaceholderText | String | Custom text for the search placeholder text. Default value would be 'Search' | 'Search' |
| noDataAvailablePlaceholderText | String | Custom text when no data is available. | 'No data available' |
| closeDropDownOnSelection | Boolean | Closes the dropdown when item is selected. applicable only in cas of single selection | false |
| defaultOpen | Boolean | open state of dropdown | false |
| allowRemoteDataSearch | Boolean | allow search remote api if no data is present. | false |

| defaultOpen | Boolean | Open state of dropdown | false |
| allowRemoteDataSearch | Boolean | Allow search remote api if no data is present. | false |
| selectedAllLabel | String | Alternate `selectAllText` Label styled as a `selected-item` when enabled. | 'All Selected' |
| unSelectedAllLabel | String | Alternate `unSelectAllText` Label styled as a `selected-item` when enabled. | 'All UnSelected' |
| enableSelectedAllLabel | Boolean | If set to `true`, this option will show the `selectedAllLabel` string using the `selected-item` styling when all items in list are selected. This provides a consistent UX to when any item is selected. | false |
| enableUnSelectedAllLabel | Boolean | If set to `true`, this option will show the `unSelectedAllLabel` string using the `selected-item` styling when all items in list are unselected. This provides a consistent UX to when any item are selected. | false |

### Callback Methods

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
"karma-jasmine-html-reporter": "^1.4.2",
"ng-multiselect-dropdown": "^0.2.10",
"ng-packagr": "^5.5.0",
"ngx-bootstrap": "^5.1.1",
"ngx-bootstrap": "^5.6.1",
"protractor": "~5.4.2",
"rimraf": "^3.0.0",
"rxjs": "^6.2.1",
Expand Down
3 changes: 2 additions & 1 deletion src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { TabsModule, ButtonsModule } from 'ngx-bootstrap';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { NgMultiSelectDropDownModule } from '../ng-multiselect-dropdown/src';
// import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';

Expand Down
11 changes: 7 additions & 4 deletions src/app/components/select/multiple-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h3>Option</h3>
</div>
<div class="checkbox">
<label>
<input type="checkbox" [checked]="ShowFilter" (change)="toogleShowFilter()"> Show Search filter
<input type="checkbox" [checked]="showFilter" (change)="toogleShowFilter()"> Show Search filter
</label>
</div>
<div class="checkbox">
Expand All @@ -35,6 +35,11 @@ <h3>Option</h3>
<input type="checkbox" [checked]="disableBangalore" [(ngModel)]="disableBangalore" (change)="handleDisableBangalore()"> Disable Bangalore
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" [checked]="enableAllSelectedUnSelectedLabel" [(ngModel)]="enableAllSelectedUnSelectedLabel" (change)="handleAllSelectedUnSelectedLabel()"> Enable Selected/UnSelected All Label
</label>
</div>
<div class="checkbox">
<label>
<input type="button" (click)="handleReset()" value="reset">
Expand All @@ -45,9 +50,7 @@ <h3>Option</h3>
<div class="panel panel-default">
<div class="panel-heading">Settings</div>
<div class="panel-body">
<pre>
{{dropdownSettings | json}}
</pre>
<pre>{{dropdownSettings | json}}</pre>
</div>
</div>
<tabset>
Expand Down
Loading