Grid + Subgrid : How to create calculated columns ?

2 posts, 0 answers
  1. François
    François avatar
    1 posts
    Member since:
    Mar 2016

    Posted 02 Sep Link to this post

    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.}

  2. Stefan
    Admin
    Stefan avatar
    270 posts

    Posted 05 Sep Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top