Dynamically fill column in kendo grid

[Neha]

Hi

I am using kendo grid inline editing . I want to dynamically fill the value of one column based on the values added from 2 other  columns.
example:

Col A+ Col B = Col C

Fill the value dynamically whiling editing or new insert within in cell kendo grid  

[Patrick | Technical Support Engineer, Senior]

Hi Neha,

By utilizing the Column.Template(), the fields from other columns can be mathematically displayed:  

Columns

    .Columns(columns => {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(140);
        columns.Bound(p => p.UnitsInStock).Width(140);
        columns.Template("#=calcColumns(data)#").Title("UnitPrice * UnitsInStock");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(300);
    })

JavaScript

    function calcColumns(e) {
        //Multipies UnitPrice to UnitsInStock
        return e.UnitPrice * e.UnitsInStock;
    }

Please take a look at the attached gif(Unzip ConditionalColumn.zip) which demonstrates the above.  Hope this information helps!  

Regards,
Patrick
Progress Telerik

[Neha]

It is working fine but not as expected. I want the col C to be filled at the time when user enter values in Col A or Col B or both.
Currently its working once I save the values but not at the time of entering the values. I want the col C to be updated at the time of entry only.

[Patrick | Technical Support Engineer, Senior]

Hello Neha,

The reason it is saving upon entering the values is because the template is using the dataItems values rather than the DOM elements.  One way to overcome this is to use AutoSync(true) in the Kendo UI Grid's datasource.  This will update the record upon blurring from the editor, and configure the template.  

    .DataSource(dataSource => dataSource
        .Ajax()
        .AutoSync(true)
        //....
    )

Regards,
Patrick
Progress Telerik