custom search input search with grid

Posted by: bemes9226 on 18 February 2021, 10:32 pm EST

  • 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
  • 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
  • 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.
  • 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
  • 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.




  • 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>
  • 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)}`;
    });
    }
  • 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels