Dynamically fill column in kendo grid

4 posts, 0 answers
  1. Neha
    Neha avatar
    7 posts
    Member since:
    Jul 2020

    Posted 27 Aug 2020 Link to this post

    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  

  2. Patrick
    Admin
    Patrick avatar
    251 posts

    Posted 28 Aug 2020 Link to this post

    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

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

  3. Neha
    Neha avatar
    7 posts
    Member since:
    Jul 2020

    Posted 31 Aug 2020 in reply to Patrick Link to this post

    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.
  4. Patrick
    Admin
    Patrick avatar
    251 posts

    Posted 01 Sep 2020 Link to this post

    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

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top