Highlight searched text in grid

[Rohit Swarup]

Is there a way to highlight searched text in grid??

Snapshot attached.

Attachment: highlighttext_2a987e14.zip

[Joseph Christ Nithin Issack]

Hi Rohit, 

  

Greetings from Syncfusion support. 

  

Based on the requirement you want to highlight the text searched on the grid. This can be achieved by the following sample level customization.  

  

To achieve your requirement we have used the `actionBegin`, `actionComplete`, `queryCellInfo` event of the EJ2 Grid. The `actionBegin` and the `actionComplete` event triggers at the start and end of every grid operations, the `queryCellInfo` event triggers every time a request is made to access cell information, element, or data and before the cell element is appended.  

 

In the `actionBegin` event we enable the flag and get the text entered into the search box and in the `queryCellInfo` event we add the background color using the custom CSS class and append it into the cell.   Finally, the flag is disabled in the `actionComplete` event of the EJ2 Grid. 

  

Please refer the below code example. 

  

app.component.ts: 

  

export class AppComponent { 

  @ViewChild("grid") gridObj: GridComponent; 

  public data: Object[]; 

  public pageSettings: Object; 

  public toolbar: string[]; 

  public flag = false; 

  public word = ''; 

  

  public ngOnInit(): void { 

    this.data = orderDataSource; 

    this.pageSettings = { pageSize: 8 }; 

    this.toolbar = ["Search"]; 

  } 

  

  public onActionBegin(args) {  

        if (args.requestType === "searching") {              

            if (args.searchString === "") {  

                this.flag = false;                    

            } else {  

                this.flag = true;  

                this.word = args.searchString.toLowerCase();              

            }   

        }  

    }  

    public onActionComplete(args) {  

        if (args.requestType === "searching") {                

            this.flag = false;  

        }   

    }   

    public onQueryCellInfo(args) {  

        if (this.flag === true) {   

            var cellContent = args.data[args.column.field];  

            var parsedContent = cellContent.toString().toLowerCase();  

            if (parsedContent.indexOf(this.word.toLowerCase()) >= 0) {   

              var i = 0; 

              var searchStr = ''; 

              while(i < this.word.length) { 

                var index = parsedContent.indexOf(this.word[i]); 

                searchStr = searchStr + cellContent[index]; 

                i++; 

              } 

              args.cell.innerHTML= args.cell.innerText.replaceAll(searchStr, "<span class='customcss'>" + searchStr + "</span>") 

            }  

        }  

    }  

} 

  

  

  

  

app.component.css 

  

  

  

.e-grid .customcss { 

    background: yellow; 

} 

  

  

  

Sample: https://stackblitz.com/edit/angular-5mzfra-p1rftg?file=app.component.ts 

  

Please refer the attached sample and revert for more queries regarding this.  

  

Regards,  

Joseph I 

[Rohit Swarup]

Hi  Joseph ,

Thanks for your quick response.

However, I am facing one more challenge with search. We have used pipes for currency and date.

Now when I search say 12(assume there's a row with 12 as currency, image attached), the resulted grid removes the currency symbol and shows just 12 instead of CNY12.

Same issue occurs with date(image attached).

I want to apply search such that my view does not gets hampered. 

Search field should contain CNY12 and date should be 2021-07-22.

Before adding the highlight fix given by you, it was working fine. Can you let us know the possible solution.

Attachment: Search_c75a372.zip

[Joseph Christ Nithin Issack]

Hi Rohit 

 

Sorry for the late reply. 

 

Based on your update you have mentioned that you are facing some issue with the provided solution.  

 

In your update we suspect that you have applied format for the number and date column and in this you also mentioned that the currency symbol is removed after performing the search operation. 

 

When we try to open the attached zip folder we faced the below issue so we will not able to view the attached screenshot. 

 

 

 

Please share the below details to find out the root cause of an issue, 

 

1. Please reattach the screenshots of an issue. 

 

2. Share the format that you have applied to the date and number column. 

 

3. If possible, replicate the issue in the attached sample.   

 

Regards, 

Joseph I 

[Rohit Swarup]

Hi Joseph,

Attaching the zip again.

For number we are using {{number | currency: 'USD'}}

For date , formats vary as per user's choice.

Attachment: Search_e44f16ad.zip

[Joseph Christ Nithin Issack]

Hi Rohit, 

  

Thanks for the update. 

  

Based on attached screenshots we prepared a sample with date and currency column in EJ2 grid.  In our sample we applied the format for date and number column using format property in columns API. 

 

In our sample when we perform search operation on date and number column the mentioned issue is not reproduced at our end. For your convenience we have attached the sample for your convenience. 

  

Sample: https://stackblitz.com/edit/angular-xztu2u?file=app.component.ts 

  

We would like you to provide the following details so that we can provide a better solution. 

  

1. Replicate the mentioned issue in the attached sample. 

 

2. Complete grid rendering code. 

 

3. Share the details that how you define the date format and the currency format for the respective columns. 

  

Regards, 

Joseph I 

[Rohit Swarup]

Hi Joseph,

The solution given by you doesn't seems to work for our requirement.

We have replicated the same in the stackblitz link which you provided:

https://stackblitz.com/edit/angular-xztu2u-ef7yfz?file=app.component.html

Can you please check this once.

[Joseph Christ Nithin Issack]

Hi Rohit, 

  

  Thanks for the update. 

  

 Query 1: when I search say 12(assume there's a row with 12 as currency, image attached), the resulted grid removes the currency symbol and shows just 12 instead of CNY12. 

  

   Based on your query when you search a numeric value the currency symbol gets removed. To resolve the issue, we have used the `queryCellInfo` event of the EJ2 Grid.  

  

   Please refer the below code example. 

  

    

  

public onQueryCellInfo(args) { 

    debugger; 

    if (this.flag === true) { 

        var cellContent = args.data[args.column.field].toString(); 

        if (args.column.field == 'Freight') { 

            cellContent = 'INR' + args.data[args.column.field].toString(); 

        } 

        if (cellContent) { 

            var parsedContent = cellContent.toString().toLowerCase(); 

            if (parsedContent.indexOf(this.word.toLowerCase()) >= 0) { 

                var i = 0; 

                var searchStr = ''; 

                while (i < this.word.length) { 

                    var index = parsedContent.indexOf(this.word[i]); 

                    searchStr = searchStr + cellContent[index]; 

                    i++; 

                } 

                args.cell['innerText'] = cellContent; 

                let regSearch = new RegExp(searchStr, 'ig'); // ignores case 

                args.cell.innerHTML = args.cell['innerText'].replaceAll( 

                    regSearch, 

                    "<span style='background:yellow;'>" + searchStr + '</span>' 

                ); 

            } 

        } 

    } 

} 

  

  

Sample: https://stackblitz.com/edit/angular-xztu2u-twvuos?file=app.component.ts 

  

Query 2: Same issue occurs with date. 

  

  Based on the requirement when you search the date values the date values in the grid gets converted to the date object. 

  

  We are checking the reported problem from our end. We will update the details on 16^th July. We appreciate your patience until then. 

  

Regards, 

Joseph I. 

[Joseph Christ Nithin Issack]

Hi Rohit, 

  

Sorry for the inconvenience. 

  

Based on your requirement you have mentioned that when you search the date values the date values gets converted to the date object. By default, in EJ2 Grid we do not have search support for the date column. In previous update we provided the solution just for highlighting the value in the Grid. 

 

In EJ2 Grid we have support only for sorting and filtering operation for the date column. The sorting and filtering operation is performed when the value in date object. 

 

In your sample we found that you have used the columnTemplate to apply the format for the date column. So, when you perform in any operation it will convert to the date Object. 

 

It is not feasible to achieve your requirement as we do not have search support for the date column. 

  

Let us know if you have any concerns. 

  

Regards, 

Joseph I.