Kendo UI MVC Grid, column-cell subtracted with the previous column-cell

2 posts, 1 answers
  1. Axel
    Axel avatar
    1 posts
    Member since:
    Jan 2014

    Posted 28 Feb 2018 Link to this post

    I have a child-grid where I want to to subtract the 'Value' column-cell with the previous 'Value' column-cell client-side, I tried using a ClientTemplate but I couldn't get it to work .

    Ex, Let's say I am looking at the 'Value' with the 'SensorId' 3, I want the 'Change' column to be: 'Value' where 'SensorId' == 3 - 'Value' where 'SensorId' == 4, and so forth.

    Thanks in advance.

        .DataSource(ds => ds.Ajax()
        .Model(m => m.Id(sv => sv.SensorId))
        .Read(read => read.Action("ReadValue", "Home", new { SensorId = "#=SensorId#" }))
        .Sort(sort => sort.Add(sv => sv.Timestamp).Descending()))
        .Columns(columns =>
            columns.Bound(sensorValue => sensorValue.ValueId).Visible(false);
            columns.Bound(sensorValue => sensorValue.SensorId).Visible(false);
            columns.Bound(sensorValue => sensorValue.Value).Title("Value")
                 .HtmlAttributes(new { @class = "valueColumn" }).Width(150)
                 .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))
                 .Cell(cell => cell.ShowOperators(false)));
            columns.Bound(sensorValue => sensorValue.Category.Unit)
            columns.Bound(sensorValue => sensorValue.Timestamp).Title("Timestamp")
                 .Format("{0:yyyy-MM-dd}").Filterable(ftb => ftb.Cell
                 (cell => cell.Operator("contains")).Cell(cell => cell.ShowOperators(false)));
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .HtmlAttributes(new { style = "height: 600px;", @class="valueTable"})

  2. Answer
    Viktor Tachev
    Viktor Tachev avatar
    2491 posts

    Posted 02 Mar 2018 Link to this post

    Hello Axel,

    In order to show a column that has a value calculated based on the values from other columns you can utilize the ClientTemplate option. The column definition would look similar to the following.


    Give the approach a try and let me know how it works for you.

    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top