some questions about data format in treegrid

[Harry Zheng]

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

[Harry Zheng]

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

[Dinesh Kumar Nagarathinam]

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

[Harry Zheng]

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

[Dinesh Kumar Nagarathinam]

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