Grid + Subgrid : How to create calculated columns ?

[François]

Hello

I implemented a kendo grid with subgrid on row expansion.

On the grid and subgrids with numeric values :

• some columns are editable (ex: columns A and B)
• some columns are readonly (ex: column C)
• some columns are readonly and calculated (ex: column D = A + B + C)

The purpose is to update the UI without calling a service.

To update values in calculated columns, I set dataItems. The problem is that it renders the main grid and then the subgrids and I lose modifications I made on the subgrids... I'm not sure if there's something I can do, so if someone has an idea...

Note: 

• I tried to use pushUpdate() on the dataSource instead of set() on dataItems, it does the same
• To be able to update calculated cells by modifying the dataSource, I put these columns as editable and I call this.closeCell() to prevent edition
•  Modifying the <td> content manually is not an option, because the numeric content format depends of the culture

See the illustration (fake data) :

• Blue = Yellow/Green (when blue and yellow are in the same line)
• Pink = Sum(Blue)

 

01.// custom editor on an editable cell.
02.column.editor = (container: JQuery, options: kendo.ui.GridColumnEditorOptions): void => {
03.  [...]
04.
05.let element = $('<input type="text" />')
06.  .appendTo(container)
07.  .kendoNumericTextBox({
08.    change: (e) => {
09.      [...]
10.
11.      // updates the dataItem of the edited row.
12.      let model = grid.dataItem(row);
13.      model.set(options.field, e.sender.value());
14.
15.      this.calculateFields([...]);
16.    },
17.    value: options.model.get(options.field),
18.    format: '{0:n2}',
19.    min: 0
20.  });
21.
22.  [...]
23.};
24.
25.
26.private calculateFields([...]) {
27.
28.  [...]
29.
30.  let mainDataItem = mainGrid.dataSource.getByUid(mainUid);
31.  let subDataItems = subGrid.dataSource.data();
32.
33.  // the main grid is refreshed and all edited values the subgrid are lost...
34.  mainDataItem.set('main-field1', 0);
35.  mainDataItem.set('main-field2', 0);
36.
37.  subDataItems
38.    .forEach(item => {
39.      let o = item as kendo.data.Model;
40.
41.      // edited values are already lost, so it's useless...
42.      o.set('sub-field11',
43.        100 * o.get('sub-field10') / mainDataItem.get('vot'));
44.      o.set('sub-field21',
45.        100 * o.get('sub-field20') / mainDataItem.get('div'));
46.
47.      // refreshes the main grid again !
48.      mainDataItem.set('main-field1',
49.        mainDataItem.get('main-field1') + o.get('sub-field11'));
50.      mainDataItem.set('main-field2',
51.        mainDataItem.get('main-field2') + o.get('sub-field21'));
52.    });
53.}

[Stefan]

Hello François,

I can suggest checking similar threads in our forum, which are showing how the template can be used for calculated fields in sub-grid. The equivalent of the suggested ClientTemplate is the columns.template property of the Grid:

http://www.telerik.com/forums/asp-net-kendo-ui-grid-calculated-column

http://www.telerik.com/forums/calculated-cells

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template

Another option will be to execute the custom logic on the dataBound event of the sub-grid, as this will ensure that the modifications will not be lost:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

If this does not help you to achieve the desired result, please send a fully runnable example so I can provide suggestions best suited for your implementation.

Regards,
Stefan
Telerik by Progress