Value is not highlighting

Value is not highlighting

Posted by: nilesh_nichal on 18 April 2024, 4:43 am EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 18 April 2024, 4:43 am EST - Updated 18 April 2024, 4:48 am EST

  Hi Team,

  Value is not highlighting if we are providing ng-template inside wj-flex-grid-column
  
  Please find the sample code as below where we are using ng-template inside the wj-flex-grid-column and its not highlighting in yellow color. The same code will work if we are not using the ng-template.

  
   <wj-flex-grid-column 
  	 [binding]="'displayTheValue'">
            <ng-template wjFlexGridCellTemplate
                         [cellType]="'Cell'"
                         let-item="item"
                         let-cell="cell">      
              </div>
            </ng-template>
          </wj-flex-grid-column>
     </wj-flex-grid>

  Please find the below screenshot where highlighting in yellow color is working for one case and its not working for other when we are using ng-template.

  Let us know if anything required from our end.
  
  

  

  1791×189 7.94 KB

  

  1800×190 8.74 KB

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 23 April 2024, 1:05 pm EST

  Hi,
  
  The observed behavior is by design behavior as the FlexGridSearch does not modify the HTML for the column with the ng-template. So the search style is not applied to the column with the template.

  We are investigating on this issue and trying to find a solution for this. We would update you soon as we have an update on this.

  Regards,
  
  Manish Gupta

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 24 April 2024, 7:06 am EST

  Hello Nilesh,
  
  For this, we need to check if the search text matched with the template column and if yes, we would get the modified HTML from the ts file and view in HTML.
  
  Please refer to the following demo sample for reference:
  
  https://stackblitz.com/edit/angular-tcy1pm?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

  Regards,
  
  Manish Gupta

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 24 May 2024, 8:47 am EST - Updated 24 May 2024, 8:52 am EST

  Hi Manish,

  I have below two query for same grid.

  1. For the grouping header we want to highlight when user is searching an exact match will result in highlight as we have shown in above cases.
  2. We also want to have tooltip on the grouping header, I have attached the screenshot for your reference (marked in circle)

  Please find the below code for grouping header

      <wj-flex-grid #flexGrid
                      [itemsSource]="gridData"
                      (initialized)="initGrid(flexGrid)"
                      headersVisibility="Column"
                      [selectionMode]="'Row'"
                      [stickyHeaders]="true"
                      [groupHeaderFormat]="'<b>{value}</b>'">
  
    public gridData: CollectionView<any>;			
  					
    public set data(value: DsSourceEntry[]) {
      this.state.gridEntries = value;
      this.gridData = new CollectionView(value, {
        groupDescriptions: ['attribute']
      });
    }

  

  1546×273 20.2 KB

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 27 May 2024, 1:53 am EST

  Hello Nilesh,
  
  Please note that for this, we need to use the cell template for GroupHeader as well. By default, the search from FlexGridSearch does for group header row too. But it will search for partial items too.

  For showing Tooltip, we need to handle the mousemove event and detect for group header row. Please refer to the following demo sample for reference:

  https://stackblitz.com/edit/angular-dhate7?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fstyles.css

  Hope it helps!

  Regards,
  
  Manish Gupta

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 28 May 2024, 5:40 am EST

  Hi Manish,

  As per the solution provided for tooltip, it is not working properly.
  
  Please find the attached video of it. When we are hovering the curser it is showing it wrong data and also in full path it is showing the tooltip, we want it for only when hover to that particular value, for eg US (1 items)FlexGrid _ FlexGridSearch+ CellTemplate + Group Header Search_ Angular (forked) - StackBlitz - Google Chrome 2024-05-28 14-48-40.zip

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 28 May 2024, 6:31 am EST

  Hello Nilesh,
  
  In the previous sample, we use static text to test, and probably you used the getCellData() to get the value for the Tooltip. And this causes the incorrect value.

  For this, we need to get value from rows[index].dataItem.

  We have updated the sample, please refer to the sample that shows the correct value and also shows for the span not the complete row:

  https://stackblitz.com/edit/angular-dhate7?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.css

  Regards.
  
  Manish Gupta