Data Tree Issue for few columsn I need total column and some extra column

Webix JS
1

Hi,

We are planning to buy few developer license and we are end up with some issues, can you please address the request for the requested concern so that we can see whether we can go ahead with webix or not.

I am building an application where I have to display the data in Data Tree, where it will be having values in in parent child format and it is displaying also very fine, but I have a requirement where I have to calculate the total, for some column.

Can you suggest a solution on this,so that we can provide a way to show the total values of few of the columns in the data tree itself.
Here is the below display I want in my application and also I want an inline edit and delete option as well:

                      val1          val2        val3
-MyProd1      1               2            3
       prod1      1               2             3
       prod2      1               2             3
                       3               6             9            <--------Here I want the total like this
-MyProd2      1               2             3
       prod1      1               2             3
       prod2      1               2             3
                        3               6             9               <--------Here I want the total like this
                                      
                                     SubTotal    27              <--------Here I want the sub total like this
                                     Average     <some value>         <--------Here I want the average total like this

Note : I have checked in the preview the above content is not showing properly,please consider its a tree.

Your help is really appreciated and need some input in urgent

Thanks.
Raj

2

You can

a) use group to create the necessary hierarchy and calculate sub-totals
b) use counters in footer to calculate average and total

http://webix.com/snippet/e2395b93

The same with group footers

http://webix.com/snippet/dbe55a9c

3

Hi Maksim,

Thanks for the updates and would be appreciated your efforts for providing the solution, I have seen the code snippet, but as I said the I need the total column value should update if I am doing inline edit in Val1/val2/val3 column as of now the total column is static and it is calculating the total from the incoming JSON data, but my requirement is User can do a inline edit as well then in this case the total value is not updating.
Below is the code.

//data
var data = [
  { name: "MyProd", group:"A", val1:1, val2:2, val3:3, 
   data:[
  { name: "MyProd1", group:"A", val1:2, val2:2, val3:3 },
  { name: "MyProd2", group:"A", val1:3, val2:2, val3:3 }
   ]
  },
  { name: "MyProd", group:"B", val1:1, val2:2, val3:3,
   data:[
    { name: "MyProd1", group:"B", val1:2, val2:2, val3:3 },
  { name: "MyProd2", group:"B", val1:3, val2:2, val3:3 }
   ]
  
  },
 
];
    
//counter
webix.ui.datafilter.summTreeColumn = webix.extend({
  refresh:function(master, node, value){ 
    var result = 0;
    master.data.each(function(obj){
      if (obj.$level == 2) result += obj[value.columnId];
    });
    
    node.firstChild.innerHTML = result;
  }
}, webix.ui.datafilter.summColumn);

webix.ui.datafilter.averageTreeColumn = webix.extend({
  refresh:function(master, node, value){ 
    var result = 0; var count = 0;
    master.data.each(function(obj){
      if (obj.$level == 2){
        result += obj[value.columnId]; count++;
      }
    });
    
    node.firstChild.innerHTML = result/count;
  }
}, webix.ui.datafilter.summColumn);

webix.ui({
  rows:[
    { view:"treetable",
     editor:"text",
	 editValue:"value",
     columns:[
       { id:"name", template:"{common.treetable()}#name#", fillspace:1, footer:["Total", "Average" ]},
       { id:"val1", fillspace:1, editor:"text",footer:[{ content:"summTreeColumn"}, { content:"averageTreeColumn" }] },
       { id:"val2", fillspace:1 },
       { id:"val3", fillspace:1 }
     ],editable:true,
     footer:true, autoheight:true,
     data:data, 
     scheme:{
       $group:{
         by:"group",
         map:{
           open:["1", "string" ],
           name:["group", "any"]
         },
         footer:{
           name:["Total", "string"],
           val1:["val1", "sum"],
           val2:["val2", "sum"],
           val3:["val3", "sum"]
         }
       }
     }
     
    }
  ]
});
4

Value in global footer recalculates self after each edit - so it can be used as you wish
The per-row footers are static for now. I will add a feature request ( as it seems a useful addition ), but I’m not sure when it will be available.

5

Thanks For the updates Maksim

Can please let us know when we can get the updates on this.

6

If I have a nested treetable:

Parent (level1)
     Child0 (level2)
           SubChild0 (level3)         2
     Child1 (level2)
           SubChild0 (level3)         1
           SubChild1 (level3)         1

How do I do a Sum at each top level? That is Child0 sum = 2, Child1 sum = 2, and Parent (sum of Child0 and Child1 = 4)

7

Do you need to sum it only once after data loading or each time when data changed in the treetable ?

In first case you can use grouping configuration that can auto-sum during grouping. In second case you will need to use a custom logic in combination with onAfterEditStop event to recalculate values after edit operations.

8

Ah gotcha! The second case is what I’m trying to accomplish

9

Hello Maksim,

I just wanted to check, is this feature is available in 2.4 or not

10

There is no support for group math recalculation yet