Custom search input search with grid

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

    • Post Options:
    • Link

    Posted 18 February 2021, 10:32 pm EST - Updated 3 October 2022, 4:22 am EST

    i have leftside input checkbox right side grid,when i selected row and click ok button populate values in search button

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

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

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

  • Posted 23 February 2021, 5:57 pm EST - Updated 3 October 2022, 4:22 am 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.

  • Posted 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’)”>







    Search Client Name & Number











    Search Criteria







    Entity Name

    <input bentoReset class=“form-control” type=“text”

    (input)=“flexGrid.collectionView.refresh()”

    [(ngModel)]=“EntityName” placeholder=“Search” />





    Entity ID

    <input bentoReset class=“form-control” type=“text”

    (input)=“flex.collectionView.refresh()”

    [(ngModel)]=“ClientName” placeholder=“Search” />





    Entity Type

    <input bentoReset class=“form-control” type=“text”

    (input)=“flex.collectionView.refresh()”

    [(ngModel)]=“ClientName” placeholder=“Search” />





    Client Name

    <input bentoReset class=“form-control” type=“text”

    (input)=“flex.collectionView.refresh()”

    [(ngModel)]=“ClientName” placeholder=“Search” />





    Client Number

    <input bentoReset class=“form-control” [(ngModel)]=“ClientNumber” type=“text”

    (input)=“flex.collectionView.refresh()” name=“demoSearch” placeholder=“Search” />





    Entity Group

    <input bentoReset class=“form-control” type=“text”

    (input)=“flex.collectionView.refresh()”

    [(ngModel)]=“ClientName” placeholder=“Search” />





    Location

    <input bentoReset class=“form-control” type=“text”

    (input)=“flex.collectionView.refresh()”

    [(ngModel)]=“ClientName” placeholder=“Search” />

              </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 [binding]=“‘TenantNumber’” [header]=“‘Client Number’”>

    <wj-flex-grid-column [binding]=“‘Name’” [header]=“‘Entity Name’”>

    <wj-flex-grid-column [binding]=“‘Number’” [header]=“‘Entity Number’”>





    Ok Cancel
  • Posted 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)}`;
    });
    

    }

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

  • Posted 28 June 2021, 11:11 pm EST - Updated 3 October 2022, 4:22 am EST

    when i type input field “It*” show all the related data in grid.

  • Posted 29 June 2021, 3:53 pm EST

    Hi,

    As per my understanding, you want to search the text with an asterisk(*). I have created a sample demonstrating the same:

    https://stackblitz.com/edit/angular-9-0-0-rc-1-r6jrv1

    In the above sample adding * in the prefix of the searched text shows items having searched text in the prefix(starts with), and adding * at the end of the searched text will make the grid show text ending with searched text. You can also search text without an asterisk.

    Let us know if you have any other requirements than this. Also if that’s the case please give more information about the requirement so that can help you more.

    ~regards

  • Posted 29 June 2021, 11:17 pm EST - Updated 3 October 2022, 4:22 am EST

    i have new query when i select in grid only cell is selectable, when i click any cell that respective row is selectable, i am expecting row will active color entire row is selectable(hover)

  • Posted 29 June 2021, 11:51 pm EST

    expecting:

  • Posted 29 June 2021, 11:51 pm EST - Updated 3 October 2022, 4:23 am EST

  • Posted 1 July 2021, 12:32 am EST

    Hi,

    As per my understanding, you want to maintain the selection of the rows after the search happens in the grid. If so you can store the selected rows and restore them on the searched grid and after the search ended. Please refer to the sample below:

    https://stackblitz.com/edit/angular-9-0-0-rc-1-ug3zsk

    Let us know if you need any further assistance.

    ~regards

  • Posted 6 July 2021, 3:24 am EST

    need to move cursor one place to other hover also background color appear

  • Posted 6 July 2021, 10:52 pm EST

    Hi,

    As per our understanding, your requirement is to change the background color of the row when hovered. You may refer to the sample link below for this:

    https://stackblitz.com/edit/angular-9-0-0-rc-1-dfoa4c

    Let me know if this was your requirement.

    ~regards

Need extra support?

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

Learn More

Forum Channels