We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147769 Sep 23,2019 03:16 PM UTC Oct 4,2019 09:56 AM UTC JavaScript - EJ 2 9
loading
Tags: Splitter
Sarathkumar, K (K.)
Asked On September 23, 2019 03:16 PM UTC

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 [Syncfusion]
Replied On September 24, 2019 03:52 PM UTC

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:- 

Refer to the API Link:- 

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

Regards, 
Farveen sulthana T 


Sarathkumar, K (K.)
Replied On September 30, 2019 04:38 PM UTC

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 [Syncfusion]
Replied On October 2, 2019 03:01 AM UTC

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. 
 
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. 
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.)
Replied On October 3, 2019 05:37 AM UTC

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 [Syncfusion]
Replied On October 3, 2019 07:35 AM UTC

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.)
Replied On October 3, 2019 08:45 AM UTC

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 [Syncfusion]
Replied On October 4, 2019 03:59 AM UTC

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; 
    }  

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.)
Replied On October 4, 2019 04:48 AM UTC

Hi Narayanasamy,

The solution is perfectly fitting to my requirements.

Thanks and regards
Sarathkumar. K

Narayanasamy Panneer Selvam [Syncfusion]
Replied On October 4, 2019 09:56 AM UTC

  
Hi Sarathkumar, 
 
Thanks for your update. 
 
We glad to hear that the last update resolved your problem. 
 
Regards,  
Narayanasamy P.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon