TreeGrid Cell color

[RI]

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]

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: https://jsplayground.syncfusion.com/p2u54nvr
Please let us know if you require further assistance on this.
Regards,
John R

[RI]

John,

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

[Mahalakshmi Karthikeyan]

Hi Ruzic,

Thanks for the update.

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

Regards,

Mahalakshmi K.

[RI]

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]

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]

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]

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 : https://jsplayground.syncfusion.com/weo4xk03

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

Regards,

Dinesh kumar.N

[RI]

Hi Dinesh,

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

[Dinesh Kumar Nagarathinam]

Hi Ruzic,

Thanks for your update.

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

Regards,

Dinesh kumar.N