Posted 18 February 2021, 10:32 pm EST
i have leftside input checkbox right side grid,when i selected row and click ok button populate values in search button
custom search input search with grid
Posted by: bemes9226 on 18 February 2021, 10:32 pm EST
-
bemes9226
-
ashwin.saxena
Replied 21 February 2021, 11:18 pm EST
Hi,
Please refer to the demo link below:
https://www.grapecity.com/wijmo/demos/Grid/Master-Detail/SeparateGrids/angular
This sample demonstrates two different scenarios. Your requirement can be fulfilled by second scenario.
Regards,
Ashwin -
bemes9226
Replied 22 February 2021, 11:41 pm EST
left side text boxes i have filled the text and clicked on search button am unable to get the filter row.give me a example of filter with search button. -
ashwin.saxena
Replied 23 February 2021, 5:45 pm EST
Hi,
Sorry, but I was unable to understand your requirements properly. Can you please explain it in detail and provide some examples that demonstrates your requirements.
~regads -
bemes9226
Replied 23 February 2021, 5:57 pm EST
check below image.i have leftside checkboxs with search and clear buttons.
when i fill the entityname field "SDL",then clicked search button show the respective filter data in the right side of the grid.when user clicks clear button clear the grid and show the all the data.
-
bemes9226
Replied 23 February 2021, 5:58 pm EST
<ng-template #content let-c="close" let-d="dismiss" class="modal">
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<i class="bento-icon-close-x" aria-hidden="true"></i>
</button>
<h3 id="modal-scrollable-title" class="modal-header h2">
Search Client Name & Number
</h3>
<div class="modal-body">
<div class="row">
<div class="col-4">
<div class='left-col'>
<h3>Search Criteria</h3>
<div class="container-fluid formHeight">
<div class="row">
<label class="bento-label content" for="sourceType">Entity Name</label>
<input bentoReset class="form-control" type="text"
(input)="flexGrid.collectionView.refresh()"
[(ngModel)]="EntityName" placeholder="Search" />
</div>
<div class="row">
<label class="bento-label content" for="sourceType">Entity ID</label>
<input bentoReset class="form-control" type="text"
(input)="flex.collectionView.refresh()"
[(ngModel)]="ClientName" placeholder="Search" />
</div>
<div class="row">
<label class="bento-label content" for="sourceType">Entity Type</label>
<input bentoReset class="form-control" type="text"
(input)="flex.collectionView.refresh()"
[(ngModel)]="ClientName" placeholder="Search" />
</div>
<div class="row">
<label class="bento-label content" for="sourceType">Client Name</label>
<input bentoReset class="form-control" type="text"
(input)="flex.collectionView.refresh()"
[(ngModel)]="ClientName" placeholder="Search" />
</div>
<div class="row">
<label class="bento-label content" for="sourceType">Client Number</label>
<input bentoReset class="form-control" [(ngModel)]="ClientNumber" type="text"
(input)="flex.collectionView.refresh()" name="demoSearch" placeholder="Search" />
</div>
<div class="row">
<label class="bento-label content" for="sourceType">Entity Group</label>
<input bentoReset class="form-control" type="text"
(input)="flex.collectionView.refresh()"
[(ngModel)]="ClientName" placeholder="Search" />
</div>
<div class="row">
<label class="bento-label content" for="sourceType">Location</label>
<input bentoReset class="form-control" type="text"
(input)="flex.collectionView.refresh()"
[(ngModel)]="ClientName" placeholder="Search" />
</div>
</div>
<div class="row margin-down">
<button type="button" class="btn btn-outline-primary" (click)="getFilter()">Search</button>
<button type="button" class="btn btn-outline-primary margin-left"
(click)="flex.collectionView.sortDescriptions.clear();">Clear</button>
</div>
</div>
</div>
<div class="col-8">
<div class="container-fluid">
<!-- <wj-flex-grid [deferResizing]="true" #flex [itemsSource]="data" (initialized)="init(flex)">
</wj-flex-grid> -->
<wj-flex-grid #flex [itemsSource]="EntitylookupData" (dblclick)="onRowDblclicked(flex);getEntityData();c('Close click')"
(initialized)="init(flex)" style="height: 413px;">
<wj-flex-grid-column [binding]="'TenantName'" [header]="'Client Name'"></wj-flex-grid-column>
<wj-flex-grid-column [binding]="'TenantNumber'" [header]="'Client Number'"></wj-flex-grid-column>
<wj-flex-grid-column [binding]="'Name'" [header]="'Entity Name'"></wj-flex-grid-column>
<wj-flex-grid-column [binding]="'Number'" [header]="'Entity Number'"></wj-flex-grid-column>
</wj-flex-grid>
<br/><br />
<button type="button" class="btn btn-primary" (click)="c('Close click');getEntityData()">Ok</button>
<button type="button" class="btn btn-outline-primary margin-left"
(click)="c('Close click');getRefresh()">Cancel</button>
</div>
</div>
</div>
</div>
</ng-template>
-
bemes9226
Replied 23 February 2021, 6:01 pm EST
open(content) {
this.drawerService.EntityGetForLookUp(SearchOnlyUsedValues, ModuleName, DrawerID, SearchCriteria,
SortField, SortDir, PageSize, PageIndex, ApplyLocationFilter).subscribe(item => {
debugger;
this.EntitylookupData = new CollectionView(item.EntitiesCollection)
console.log("lookup1", this.EntitylookupData);
});
// Add 'modal-scroll' class to modal window
const options = { windowClass: 'modal-scroll', ariaLabelledBy: 'modal-scrollable-title' };
this.modalService.open(content, options).result.then(result => {
this.closeResult = `Closed with: ${result}`;
}, reason => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
} -
ashwin.saxena
Replied 24 February 2021, 6:51 pm EST
Hi,
Please refer to the sample link below that demonstrates your requirements:
https://stackblitz.com/edit/angular-9-0-0-rc-1-v42lbc
You should use the filters property of CollectionView because you will apply multiple search keys on the items.
~regards
