Grid Cell Formatting

Question

Hi,I need to apply dynamically conditional formatting to a grid cell.  I following this example  click here .So my question is,  Is there a way to apply dynamically conditional formatting without refreshing a grid?as I can see in the example. I need to refresh the grid whenever I will apply formatting to a specific cell.Regards,Naresh Singh

Ajith Govarthan · Accepted Answer

Hi naresh, 
 
Thanks for the update. 
 
Query: on click event. we will open dialog box and then in this dialog box there will be some condition. user will select those condition and on the basis of those condition user can select formatting of cell and also can remove the formatting of cell. 
 
Based on your query you want apply and clear formatting for the cells without refreshing the Grid component. So, we have prepared sample in that we have applied the cell formatting without refreshing the Grid component using the recordClick event. For your convenience we have attached sample please refer them for your reference. 
 
Code Example: 




App.component.ts 
 
onClick(args) { 
    this.currentTagetCell = args.target; 
    this.dialog.show(); 
  } 
 
  applyFormate(args) { 
    switch (this.dropdown.value) { 
      case "Red": 
        this.currentTagetCell.classList.add("e-redcolor"); 
        break; 
      case "Green": 
        this.currentTagetCell.classList.add("e-greencolor"); 
        break; 
      case "clear": 
        this.currentTagetCell.classList.remove("e-redcolor"); 
        this.currentTagetCell.classList.remove("e-greencolor"); 
        break; 
    } 
    this.dialog.hide(); 
  } 
 
Sample Link: https://stackblitz.com/edit/angular-9utbhn-emgpmu?file=default.component.ts 
 
Please get back to us if you need further assistance. 
 
Regards, Ajith G.

Ajith Govarthan · Answer

Hi Naresh, 

Thanks for contacting Syncfusion support. 

Query: Is there a way to apply dynamically conditional formatting without refreshing a grid? as I can see in the example. I need to refresh the grid whenever I will apply formatting to a specific cell. 

Based your query we suspect that you want to apply the conditional formatting without refreshing the grid component. So, before we proceed to your query, please share the below details to validate further on your requirement. 


Please let us know that you want to change the existing conditional formatting without refreshing the grid component.
 

Please let us know that you want to change the conditional formatting with queryCellinfo event?
 

Please explain that when you want to change the conditional formatting in your grid application (eg. when performing some actions).
 
Regards, 
Ajith G.

Naresh Singh · Answer

Hi Naresh, 

Thanks for contacting Syncfusion support. 

Query: Is there a way to apply dynamically conditional formatting without refreshing a grid? as I can see in the example. I need to refresh the grid whenever I will apply formatting to a specific cell. 

Based your query we suspect that you want to apply the conditional formatting without refreshing the grid component. So, before we proceed to your query, please share the below details to validate further on your requirement. 


Please let us know that you want to change the existing conditional formatting without refreshing the grid component.
 

Please let us know that you want to change the conditional formatting with queryCellinfo event?
 

Please explain that when you want to change the conditional formatting in your grid application (eg. when performing some actions).
 
Regards, 
Ajith G. Hi Ajit, First of all,Thanks for you response.1. Please let us know that you want to change the existing conditional formatting without refreshing the grid component    yes, I don't want to refresh the whole grid.2. Please let us know that you want to change the conditional formatting with queryCellinfo event?     as far as I know, if I use queryCellinfo event then. I think I need to refresh whole grid. then in that case I can't use queryCellinfo event.3. Please explain that when you want to change the conditional formatting in your grid application (eg. when performing some actions).    yes, there will be some action. on which I will do the conditional formatting of a specific cell.      here an example:     step 1: I am going to open a dialog box.      step 2: In that dialog, there will be some conditions. let's suppose we have Percentage column and I want to set red background of cell. which has 90%                   value.     Step3. After that, I'm going to apply that condition.    Please provide me any feasible solution to achieve this.

Ajith Govarthan · Answer

Hi Naresh, Thanks for the update. Query: yes, there will be some action. on which I will do the conditional formatting of a specific cell. here an example: Based on your query we suspect that you want to apply conditional formatting when changing the data with dialog editing in your grid application. So, we have prepared sample and in that sample we have dynamically applied the conditional formatting for the specific cell in the Grid component, using the queryCellInfo event and customAttributes property. For your convenience we have attached the sample, please refer them for your reference. Code Example: App.component.html

App.component.ts customiseCell(args: QueryCellInfoEventArgs) { if (args.column.field === "Freight") { if (args.data["Freight"] > 80) { (args.cell as any).style.backgroundColor = "red"; } } } Sample Link: https://stackblitz.com/edit/angular-9utbhn-mhjuax?file=default.component.ts If we misunderstood your query, then please share the below details to provide you the prompt solution at the earliest. Please let us know how you are showing the dialog in the grid application and also mention the events used to show the dialog in your grid application. Do you need to update the changed value in the Grid’s dataSource or you will show the changes only in the UI? Share the complete Grid code example. Share the Syncfusion package version. Regards, Ajith G.

Naresh Singh · Answer

Hi Ajit,Sorry for the misunderstanding. but my requirement is differentlet me explain you in detail.. we are using Syncfusion 18 version.. there will be no change in datasource and only formatting of cell will be change.let suppose we have below mentioned table.. on click event. we will open dialog box and then in this dialog box there will be some condition. user will select those condition and on the basis of those condition user can select formatting of cell and also can remove the formatting of cell.  for example user can select cell color background red or anything else, bold, underline etc. if total columne value is max   and also user can change or remove the formatting of cell for this same  condition in future.   So What I want achieve that. if user is formatting any specific cell. then whole grid not refresh, only that specific cell is re-renderstatustotalpending12todo43finished98Regards,Naresh

status	total
pending	12
todo	43
finished	98