some questions about data format in treegrid

Hi,
I have some questions about data format in treegrid.
1. I set data format for column to show 0 decimal place, but I want some rows in those column to show 1 decimal place. Please see my attached image. For example, I want the numbers in last row of my treegrid to show 1 decimal place(such as in JAN column, I want to it display -65.0), but other rows to show 0 decimal place.  I wonder if this can be accomplished.

2. How can we add some characters to the data in treegrid. For example, in my attached image, I want the data in the last row have '%' character, such as in column JAN, -65 should display as -65%. For the data in other rows, I'd like them to be displayed as $9,000.   Is this possible to accomplish?

3. I'd like to change the font color based on the data value. For example, in my attached image, I want those negative numbers to display in red color. How can we do that?

Thank you,

Harry

Attachment: HZ20151021_ebf14bfc.rar

4 Replies

HZ Harry Zheng October 21, 2015 08:55 PM UTC

I have one more question:
4. Can we hide the value 0 if the data value is 0? in other words, if the data value is 0, I want that cell be empty without displaying anything.

Harry


DK Dinesh Kumar Nagarathinam Syncfusion Team October 22, 2015 11:49 AM UTC

Hi Harry,

Query
Syncfusion Comment
1.      I set data format for column to show 0 decimal place, but I want some rows in those column to show 1 decimal place. Please see my attached image. For example, I want the numbers in last row of my treegrid to show 1 decimal place(such as in JAN column, I want to it display -65.0), but other rows to show 0 decimal place. 
We can achieve these queries Using “QueryCellInfo” client side event. Find the code snippet below,

@(Html.EJ().TreeGrid("Tree")

       .ChildMapping("Children")

       .TreeColumnIndex(1)

       .Columns(co =>

        {

               //...

        //Set the format to display value as currency format

          co.Field("Progress").HeaderText("Progress").Format("{0:c}").Add();

        }

      )


             //...

       .ClientSideEvents(eve =>

           {

                  

             eve.QueryCellInfo("query");


            })

)


<script type="text/javascript">

  function query(args) {

     var length = args.model.flatRecords.length;

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


      //To change the color of Particular cell value

       if (args.cellValue == 3)

        $(args.cellElement).css({ "color": "red" });


       //To Define the Decimal places of the cell

         if(args.data.index == length - 1)

            args.cellElement.innerHTML = args.data.Progress.toFixed(1);

            }

      if (args.column.field == "Progress" && args.data.index == length - 1)                      

           {              

           args.cellElement.innerHTML = args.data.Progress.toFixed(1) + "%";

           }

        //To hide the particular cell value

            if (args.cellValue == 0)

                args.cellElement.innerHTML = "";

       

              }

    </script>



2.     How can we add some characters to the data in treegrid. For example, in my attached image, I want the data in the last row have '%' character, such as in column JAN, -65 should display as -65%. For the data in other rows, I'd like them to be displayed as $9,000. 
3.      I'd like to change the font color based on the data value. For example, in my attached image, I want those negative numbers to display in red color. How can we do that?
4.     Can we hide the value 0 if the data value is 0? in other words, if the data value is 0, I want that cell be empty without displaying anything.


We have prepared a sample based on your requirement, find the sample from below location,

Sample: http://www.syncfusion.com/downloads/support/forum/120846/ze/TreeGridQueries-1184730346
 
Please let us know, if you need further assistance on this.
 
 
Regards,
Dinesh kumar.N


HZ Harry Zheng October 26, 2015 08:51 PM UTC

Hi Dinesh,

Thank you for the solutions. They works well. I have one more question.
Is there a way to loop through all the columns in the treegrid, and change data format in certain row for each column?
For example, I have 20 columns in my treegrid, one of the row data is numbers, I'd like to change the format of those numbers from 80 to 80.0%.
How can we do this in a easy way (such as loop)? in this way, I do not have to write code for all the 20 columns . I know we can do this using your previous solution, but that will have many lines of code.
Thanks,

Harry


DK Dinesh Kumar Nagarathinam Syncfusion Team October 27, 2015 01:19 PM UTC

Hi Harry,

We can achieve this by using “QueryCellInfo” client side event, in that we can check whether a cell value is number or not.

Code Snippet:


@(Html.EJ().TreeGrid("Tree")

       .ChildMapping("Children")

       .TreeColumnIndex(1)

       .ClientSideEvents(eve =>

           {

              eve.QueryCellInfo("query");

            })

)


<script type="text/javascript">

        function query(args) {           

            if (!isNaN(args.cellValue) && args.column.field != "TaskId")

                args.cellElement.innerHTML =parseInt(args.cellValue).toFixed(2) + "%";

        }



We have prepared a sample based on your requirement, find the sample from below location.

Sample: http://www.syncfusion.com/downloads/support/forum/120846/ze/TreeGrid_Num_Format_Query815773814
 
Regards,
Dinesh kumar.N

Loader.
Up arrow icon