VueJs Tree Grid Format Problem

[Javier Alejandro]

Hi,

I have implemented a Tree data grid successfuly. The Data is loaded into an array (which comes from an Axios service). 

The data comes like this.

As you can see this fields are "Strings", so when i use the formatter provided by the grid like this 

it just doesnt work. What's more, it breaks the Data grid, so it displays "No Data to Display". I tried with a JSON with numbers instead of Strings and it works, but i cant change the datasource, i must use it as it is (all strings).

How can i format this values using for example "moment.js" library instead of using the format="C2" modifier?

Thanks

[Farveen Sulthana Thameeztheen Basha]

Hi Javier, 

Thanks for contacting Syncfusion Support. 

Query#:- What's more, it breaks the Data grid, so it displays "No Data to Display". How can i format this values using for example "moment.js" library instead of using the format="C2" modifier? 

 

We have prepared sample as like the dataSource as like your provided format (“-193233”) but we are unable to reproduce the problem at our end. From your query we suspect that you need to format the String values with Currency format by applying C2 instead of displaying it as string(“-193233”).  

 

To achieve this requirement, we suggest you to use type property of columns to display the string values in the form of number/date. If the format is defined for a column, the column uses type to select the appropriate format option (number or date). Refer to the code below:- 

<ejs-treegrid :dataSource="data" :treeColumnIndex="0" idMapping="TaskID parentIdMapping="parentID" ref="treegrid" > 

      <e-columns> 

                   .    .    . 

     <e-column field="Duration" headerText="Duration" type="number" format="C2" 

                       width="80"></e-column> 

               </e-columns> 

  </ejs-treegrid> 

 

Sample Link:- https://codesandbox.io/s/sf-vue-treegrid-example-forked-ybfwo 

 

Refer to the screenshot:- 

 

 

Refer to the documentation Link:- 

https://ej2.syncfusion.com/vue/documentation/treegrid/columns/#column-type 

 

If we misunderstood your query, please share us the details about how you want to display the String values into TreeGrid. Based on that we will guide you accordingly. 

 

Regards, 

Farveen sulthana T 

[Javier Alejandro]

Thanks for your answer.

I found the problem. It seems the grid expects the same type of number for each data row. For example, in the link you provide, change the "duration" of the first row from -19233 TO  1. It Breaks and it shows "No records to Display".

If i put a negative number, it shows the data again:

What am i doing wrong?

Thanks

Javier

[Farveen Sulthana Thameeztheen Basha]

Hi Javier, 

Query#:- It seems the grid expects the same type of number for each data row. For example, in the link you provide, change the "duration" of the first row from -19233 TO  1. It Breaks and it shows "No records to Display". 

From your details, We are able to replicate the problem at our end. To overcome this problem we suggest you to use ValueAccessor property of the column  which is used to access/manipulate the value of display data 

Refer to the code below:- 

App.js 

<ejs-treegrid :dataSource="data" :treeColumnIndex="0" idMapping="TaskID" 

              parentIdMapping="parentID" ref="treegrid" 

              :load="load" 

         > 

    <e-columns> 

         .   .   . 

        <e-column field="Duration" 

                  headerText="Duration" 

                  type="number" 

                  :valueAccessor="currencyFormatter" 

                  width="80"></e-column> 

    </e-columns> 

</ejs-treegrid> 

 

methods: { 

    currencyFormatter: function (field, data, column) { 

                                                  //you can display customized data here   

      if (data["Duration"].indexOf("-") > -1) { 

        let val = data["Duration"].replace("-", ""); 

          return  ("-" + "$" + val);  //display the negative value with Currency format 

      } else { 

        return "$" + data["Duration"]; //display the non-negative value with Currency format 

      } 

    }, 

  }, 

Screenshot:- 

 

Sample Link:- https://codesandbox.io/s/sf-vue-treegrid-example-forked-wp1vy?file=/src/App.vue 

 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T