I wanted to add button in ng-multiselect-dropdown like ok button for closing the dropdown and select all and unSelect button into dropdown
(我想在ng-multiselect-dropdown中添加按钮,如ok按钮以关闭下拉菜单,然后全选并取消选择按钮)
I am using Angular 8 and using ng-multiselect-dropdown below is code snippet.
(我正在使用Angular 8,下面使用的ng-multiselect-dropdown是代码段。)
This how I now manage but the actual requirement is I want to add custom buttons in dropdown like searchable text box is in it for each dropdown.
(这是我现在要管理的方式,但实际要求是我想在下拉菜单中添加自定义按钮,例如每个下拉菜单中都包含可搜索的文本框。)
I think this may be possible but I don't know how can do it I tried all the options whichever I have in internet but I am still stuck.
(我认为这可能是可行的,但我不知道该怎么办,我尝试了互联网上所有可用的选项,但仍然遇到困难。)
Your valuable options / way outs and comment really appreciated.
(非常感谢您的宝贵选择/出路和评论。)
app.component.html code
(app.component.html代码)
<div class="card" style="padding-bottom: 5px;">
<a style="padding-left: 10px" (click)="ConcerGridFilterReset()" routerLink="/" >Reset Filter</a>
<pagination-controls style="padding-left: 30%" (pageChange)="p = $event" id="foo"></pagination-controls>
<div class="table-responsive" style="height:550px">
<table class="table table-bordered" style="max-height: 100px">
<thead>
<tr bgcolor="#e50000" style="color: white;text-align: center;">
<!-- <th></th> -->
<th>Concern ID</th>
<!-- <th>Issue ID</th> -->
<th>Local Market
<div style="width: 150px" >
<ng-multiselect-dropdown name="drLocalMkt" style="font-size: 14px;font-weight: normal;"
[placeholder]="'--Select--'"
[data]="drLocalmarketList"
[(ngModel)]="drSelectedLclMktsFilter"
[settings]="filterdropdownSettings"
(onSelect)="onLclItemSelectForFilter($event)"
(onDeSelect)="onLclItemSelectForFilter($event)"
>
</ng-multiselect-dropdown>
<!-- (onDeSelect)="fnUnselectLclMktforFilter()" -->
</div>
</th>
<th>Process
<div style="width: 150px" >
<ng-multiselect-dropdown name="drProcess" style="font-size: 14px;
font-weight: normal;"
[placeholder]="'--Select--'"
[data]="drProcessList"
[(ngModel)]="drSelectedProcessFilter"
[settings]="filterdropdownSettings"
(onSelect)="onProcessItemSelectForFilter($event)"
(onDeSelect)="onProcessItemSelectForFilter($event)"
>
</ng-multiselect-dropdown>
</div>
</th>
<th>Description</th>
<th>Concern Status</th>
<th>Raised By</th>
<th>Raised Date</th>
<th>Assigned To</th>
<!-- <th>IsActive</th> -->
<!-- <th>Edit</th> -->
</tr>
</thead>
<tbody *ngFor="let item of ConcernGrid |paginate: {id: 'foo', itemsPerPage: 10, currentPage: p}">
<tr (click)="SelectedTableRowConcernList(item)" [ngClass] = "{'SelectedRow' : item.ConcernID == SelectedConcernID}">
<!-- <td>
<i class="fa fa-plus" ></i>
</td> -->
<td>{{item.Code}}</td>
<!-- <td>{{item.IssueCode}}</td> -->
<td>{{item.LocalMarketName}}</td>
<td>{{item.ProcessName}}</td>
<td>{{item.Description}}</td>
<td>{{item.ConcernStatusName}}</td>
<td>{{item.CeatedByName}}</td>
<td>{{item.CREATEDDATE | date:'MM/dd/yyyy'}}</td>
<td>{{item.AssignToName}}</td>
<!-- <td>{{item.UserEmailID}}</td> -->
<!-- <td><button (click)="fnEditConcern(item)" type="button" class="btn btn-primary btn-sm">Edit</button></td> -->
</tr>
</tbody>
</table>
</div>
</div>
App.component.ts code is
(App.component.ts代码是)
ngOnInit() {
this.dropdownSettings={
singleSelection: false,
idField: 'ID',//item.ID
textField: 'Text',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: false,
closeDropDownOnSelection:false,
enableCheckAll:false
};
this.filterdropdownSettings = {
singleSelection: false,
idField: 'ID',//item.ID
textField: 'Text',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 0,
allowSearchFilter: true,
closeDropDownOnSelection:true,
enableCheckAll:false,
maxWidth:400,
Style:"maxWidth:600px"
}
this.fnLocalMarketDropdown();this.fnProcessDropdown();this.fnConcernStatusDropdown();
}
for reference I am showing image of my page.
(供参考,我正在显示页面的图像。)
ask by Anant Doshi translate from so 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…