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

some questions about data format in treegrid

Thread ID:

Created:

Updated:

Platform:

Replies:

120846 Oct 21,2015 04:44 PM Oct 27,2015 09:19 AM ASP.NET MVC 4
loading
Tags: TreeGrid
Harry Zheng
Asked On October 21, 2015 04:44 PM

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
Replied On October 21, 2015 04:55 PM

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 [Syncfusion]
Replied On October 22, 2015 07:49 AM

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
Replied On October 26, 2015 04:51 PM

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 [Syncfusion]
Replied On October 27, 2015 09:19 AM

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

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

;