[Solved] Calculated Cell not rendering new value

[Floyd]

I have a calculated non editable cell bound to a datasource model.  While editing the cell value is calculated, the new value is reflected in the model but does not render to the screen.


Any ideas?

export function init(columns: any) {

        var ds = new nkfDataSources.FilterByJobQuickEntryDistribution();

        ds.group = { field: "PropertyName" };

        grid = $("#jobQuickEntryDistributionGrid").kendoGrid({

            columns: columns,

            groupable: false,

            pageable: true,

            sortable: true,

            filterable: true,

            toolbar: kendo.template($("#grid_jobQuickEntryDistribution_toolbar").html()),

            dataSource: ds.get(onGridparameterMap),

            editable: true,

            edit: function (e) {

                e.model.unbind("change", model_change).bind("change", model_change);

            }

        }).data("kendoGrid");

    }

    function model_change(e) {

        var model = this;

       

        model.NetFee = nkfCommon.Calculate.netFee(

            model.GrossFee,

            nkfCommon.Calculate.departmentOffset(model.GrossFee, model.DepartmentOffset),

            nkfCommon.Calculate.expenses(model.ClientReimbursedExpenses, model.NonClientReimbursedExpenses, model.DirectBilledExpenses));

}

    var columns = [

        { field: "AppraiserName", title: "@Resources.NGage.JobQuickEntryResource.AppraiserNameField", width: "18%" },

        { field: "RoleTypeDescription", title: "@Resources.NGage.JobQuickEntryResource.RoleTypeDescriptionField", width: "17%" },       

        { field: "GrossFee", title: "@Resources.NGage.JobQuickEntryResource.GrossFeeField", format: "{0:c}", width: "10%", attributes: { style: "text-align:right" } },

        { field: "DepartmentOffset", title: "@Resources.NGage.JobQuickEntryResource.DepartmentOffsetField", format: "{0:p5}", width: "10%", attributes: { style: "text-align:right" } },

        { field: "ClientReimbursedExpenses", title: "@Resources.NGage.JobQuickEntryResource.ClientReimbursedExpensesField", format: "{0:c}", width: "10%", attributes: { style: "text-align:right" } },

        { field: "NonClientReimbursedExpenses", title: "@Resources.NGage.JobQuickEntryResource.NonClientReimbursedExpensesField", format: "{0:c}", width: "10%", attributes: { style: "text-align:right" } },

        { field: "DirectBilledExpenses", title: "@Resources.NGage.JobQuickEntryResource.DepartmentOffsetField", format: "{0:c}", width: "10%", attributes: { style: "text-align:right" } },

        {

            field: "NetFee",

            title: "@Resources.NGage.JobQuickEntryResource.NetFeeField",

            format: "{0:c}",

            width: "10%",

            attributes: { style: "text-align:right" },

            footerTemplate: "<span style='float:right'>#= kendo.toString(@ViewBag.JobTeamDistributionAmount, 'c2')# </span>"

        },

        { field: "", title: " ", width: '6%', template: "<a href='/JobQuickEntry/Edit/#: Id #' class='row-link-padding' style='padding-right:0; padding-left:0' >@Resources.MessageResources.EditField</a> ", editable: false },

    ];

Regards

Floyd

[Viktor Tachev]

Hello Floyd,

Please try to set the value for the changed field using the set method. This way the value will be reflected in the Grid as well. 

In case the behavior persists please send us a dojo sample where the behavior is replicated so we can examine it locally. 


Regards,
Viktor Tachev
Progress Telerik

[Floyd]

Viktor, the calculated column is set for readonly.  Setting the value using set has the same behavior, new calculated value is not rendered.   When you remove the readonly attribute from the column then the new value is rendered.

How do get around that.

 

Regards

Floyd

 

 

[Viktor Tachev]

Hi Floyd,

By default a calculated column will use the values returned from the server to perform the calculation. Thus, any changes made by the users will be reflected after they are saved. Changing that behavior requires custom code for updating the value on the client.

Another approach I can suggest is to calculate the new value and then replace the html for the relevant calculated cell manually. The dojo example below outlines the approach:

• https://dojo.telerik.com/ILuKuQiD

You can use it as a starting point and customize it in order to match the required scenario.

Regards,
Viktor Tachev
Progress Telerik

[Floyd]

Thx Viktor,

Created my case under https://dojo.telerik.com/@fhamandi/ihIFoSIT/2, class library 2018 R1 SP1

Which works similar to yours, but does not behave the same in typescript.  The calculated value is never displayed.

 

 

 

 

 

[Viktor Tachev]

Hello ,

I ran the example and it seems to work as expected on my end. I also made a short video showing the behavior I am observing. 

• https://www.screencast.com/t/ByZeiAn9hEA

Please take a look and let me know if I am missing something.

Regards,
Viktor Tachev
Progress Telerik