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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

TreeGrid Cell color

Thread ID:

Created:

Updated:

Platform:

Replies:

121322 Dec 1,2015 03:45 PM UTC Dec 16,2015 12:30 PM UTC JavaScript 9
loading
Tags: ejTreeGrid
RI
Asked On December 1, 2015 03:45 PM UTC

Hello, 

i have a small problem, i would like to set in each Cell of my treegrid a backgroundcolor if value > value2.

I´m using the TreeGrid with angular support.

Here is a little snippet of my Code:

 $scope.treeColumns = [

                        { field: "name", headerText: "Name", width: 150 },
                        { field: "sollausla", headerText: "sollAusl", width: 150, textAlign: ej.TextAlign.Right },
                        { field: "istausla", headerText: "istAusl", width: 150, textAlign: ej.TextAlign.Right, format: "{0:N}" },
                        { field: "soll_leist", headerText: "Leistung Soll", width: 150, textAlign: ej.TextAlign.Right, format: "{0:N}" }]

<div id="angulartreegrid" ej-treegrid="" e-datasource="GridData" e-selectedrowindex="selectedRow" e-locale="de-DE" e-allowsorting="true"
                                     e-columns="treeColumns" e-childmapping="children" e-enablevirtualization="true" e-enableresize="true" e-enablecollapseall="true"
                                     e-rowselected="rowSelected" e-isresponsive="true">
</div>

how can i change the Backgroundcolor of an cell when  value1 > value2 out of my JSON "GridData"??

thank you guys in advance!!

John Rajaram [Syncfusion]
Replied On December 7, 2015 11:49 AM UTC

Hi Ruzic,
Thanks for using Syncfusion products.
We would like to let you know that, we can set background color for each cell of the TreeGrid with the help of “queryCellInfo” client side event. Here we have enabled background color for some cells by comparing the cell values of “Progress1” and “Progress2” columns. Please refer the below code snippets for more details.


//...

<div ej-treegrid e-datasource="data" e-selectedrowindex="selectedRow"

     e-treecolumnindex="1" e-columns="columns" e-childmapping="subtasks"

     e-querycellinfo="querycellinfo"

     e-enablevirtualization="true" id="treegrid">
</div>

//...

<script type="text/javascript">

//...
 

  function querycellinfo(args) {

            if (args.column.field == "progress1") {

                if (args.data.progress1 > args.data.progress2) {

                    args.cellElement.bgColor = "#F8071F";

                }

            }
        }

</script>


We have also prepared the sample based on this. Please find the sample in the below location.
Sample: http://jsplayground.syncfusion.com/p2u54nvr
Please let us know if you require further assistance on this.
Regards,
John R

RI
Replied On December 7, 2015 01:33 PM UTC

John,

thank you soooooo much, it works flawlessly!!!!



Mahalakshmi Karthikeyan [Syncfusion]
Replied On December 8, 2015 06:05 AM UTC

Hi Ruzic,

Thanks for the update.

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

Regards,

Mahalakshmi K.


RI
Replied On December 8, 2015 03:23 PM UTC

Hello John, Hello Mahalakshmi,
i have another question, is it posible to fix an column (the first one)?

So if i scroll to the right, the first column should be always visible.

Thank you in advance!!

R.I



Mahalakshmi Karthikeyan [Syncfusion]
Replied On December 9, 2015 12:03 PM UTC

Hi Ruzic,

At present there is no support for fix on column in TreeGrid. Hence we have logged and implemented the feature regarding this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Please let us know if you require further assistance on this.      

Regards,

Mahalakshmi K.


RI
Replied On December 14, 2015 03:29 PM UTC

Hey Guys,

is there a way how to limit the width of columns??

i tried :
   
{ field: "november", headerText: "November", width: 9, textAlign: ej.TextAlign.Center, format: "{0:C}" }


Also the textAlign doesn´t work in treeGrid. 

Thanks for your help!!!

Dinesh Kumar Nagarathinam [Syncfusion]
Replied On December 15, 2015 06:58 AM UTC

Hi Ruzic,

Query 1 : is there a way how to limit the width of columns??

Solution : We can set width for every individual column using “width” property. We request you to check the width of tree grid container, if we set width property for all columns then the container width should be lesser or equal to the sum of the all columns width, if it is greater than that, then the container width equally distributed to the all columns in the tree grid.

Query 2 : Also the textAlign doesn´t work in treeGrid.

Solution : In ejTreeGrid we can set text alignment for all the columns except for treecolumn using textAlign column property, text alignment of tree column always be in left side, but we can change the header text alignment of treecolumn using “headerTextAlignment” property.

We have prepared a sample based on above queries, find the sample link from below,

Sample Link : http://jsplayground.syncfusion.com/weo4xk03

Please let us know, if you need further assistance on this.

Regards,

Dinesh kumar.N


RI
Replied On December 15, 2015 09:29 AM UTC

Hi Dinesh,

got it, thank you very much for your help!!

Dinesh Kumar Nagarathinam [Syncfusion]
Replied On December 16, 2015 12:30 PM UTC

Hi Ruzic,

Thanks for your update.

Please let us know, if you need further assistance on this.

Regards,

Dinesh kumar.N


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.

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

;