How to change background color of a cell of a column B depending on the change value of cell column A

[Sarathkumar, K (K.)]

Hi Experts,

How to change background color of a cell of a column B depending on the change in  value of cell column A.

Could you please share a sample code for the above case.

[Farveen Sulthana Thameeztheen Basha]

Hi Sarathkumar, 

Thanks for contacting Syncfusion Support. 

Query#:-How to change background color of a cell of a column B depending on the change in  value of cell column A. 

We have achieved your requirement using queryCellInfo event of the TreeGrid.  On changing the value the progress column value we have changed the background color of the Priority column. 

Refer to the code example:- 

let grid: TreeGrid = new TreeGrid( 

        { 

            dataSource: sampleData, 

            childMapping: 'subtasks', 

            treeColumnIndex: 1, 

            height: 400, 

            queryCellInfo: (args: any)=> { 

              if (+args.data.progress > 90  && args.column.field === 'priority') { 

                  args.cell.setAttribute('style', 'background-color:#336c12;color:white;'); 

             } else if (+args.data.progress < 90  && args.column.field === 'priority') { 

                args.cell.setAttribute('style', 'background-color:#7b2b1d;color:pink;'); 

           }  

            }, 

            toolbar: ['Add', 'Delete', 'Update', 'Cancel'], 

      }); 

 grid.appendTo('#Grid'); 

Refer to the sample Link:- 

https://stackblitz.com/edit/rn12wx-qnualb?file=index.ts 

Refer to the API Link:- 

https://ej2.syncfusion.com/documentation/api/treegrid/#querycellinfo 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Sarathkumar, K (K.)]

Hi Farveen,

The solution is working perfectly.

I have another query regarding splitter. How to apply visible condition on splitter. Could you please share some sample code on display "Right Pane" and the Splitter  on a button click.

[Narayanasamy Panneer Selvam]

Hi Sarathkumar, 

 

Good day to you. 

We have validated your requirement. From the shared information, we suspect that, you are expecting expand/collapse behavior through a button click. 

We would like to let you know that you can achieve the expected requirement through expand and collapse methods. 

For your convenience we have prepared a sample to meet your requirement. 

Demo sample: https://stackblitz.com/edit/azvp1s-3gzusf  

 

API references: 

1. https://ej2.syncfusion.com/documentation/api/splitter/#collapse
2. https://ej2.syncfusion.com/documentation/api/splitter/#expand

 

Or if you want to render required splitter pane in the collapsed (hidden) state. We have property called collapsed. You can achieve this requirement using the collapsed api. 

Demo sample: https://stackblitz.com/edit/azvp1s-muouv5

 

API references: 

1. https://ej2.syncfusion.com/documentation/api/splitter/#collapsed

Kindly let us know if you need further assistance on this. 

 

Regards, 

Narayanasamy P. 

[Sarathkumar, K (K.)]

Hi Narayanasamy,

My Requirement is visibility of both Splitter and the " Right Pane " should toggles on a button click.

1. Page should display "Left Pane" alone.

2. On the button click, display both splitter and " Right Pane "

Thanks and Regards,

Sarathkumar.K

[Narayanasamy Panneer Selvam]

Hi Sarathkumar,

Thanks for your update. 

We have modified the sample as per your requirement. You can render right pane in collapsed stated using collapsed api of paneSettings. As we stated earlier you can show/hide required pane by using expand and collapse method. 

Modified sample: https://stackblitz.com/edit/azvp1s-r7zbg9

Regards,
Narayanasamy P. 

[Sarathkumar, K (K.)]

Hi Narayanasamy,

Thanks for the quick update .

 

When I click on the toggle button in the modified link (https://stackblitz.com/edit/azvp1s-r7zbg9) the Right Pane are visible and the splitter is responsive . 

1 . Initial page loading the splitter ( which is not responsive ) is visible along with " left side " pane . 

2 . When I click on the button both splitter and " Right Pane " is visible and the splitter is responsive . 

I want the splitter also to be hidden during the initial page loading . be there any way ( API ) to hide the splitter also ?

Thanks and Regards

Sarathkumar.K

[Narayanasamy Panneer Selvam]

Hi Sarathkumar,

 

Good day to you. 

We have modified the sample as per your requirement. We have hidden separator when left pane alone is open, using display: none; css.

Code example:

    .splitter-expand .e-pane-horizontal.e-collapsed + .e-split-bar-horizontal { 

      display: none; 

    }  

Modified sample: https://stackblitz.com/edit/azvp1s-s9xadn  

Since we don't have any api to hide separator. So, In the above sample we have traversed to separator using e-collapsed class.

Regards,
Narayanasamy P. 

[Sarathkumar, K (K.)]

Hi Narayanasamy,

The solution is perfectly fitting to my requirements.

Thanks and regards

Sarathkumar. K

[Narayanasamy Panneer Selvam]

  

Hi Sarathkumar, 

 

Thanks for your update. 

 

We glad to hear that the last update resolved your problem. 

 

Regards,  

Narayanasamy P.