Unable to update not editable column when updating inline grid

[StuartLittle]

Hi,

I have 4 columns (Round1, Round2, Round3, Total) of which Total is a non editable int column.Whenever user updates Round1, 2 and 3 by clicking Update.. The total is saved in the database using Employee_Update action and my hope is that Total column will automatically refresh.  But thats not happening. Only Round1, 2 and 3 refresh.

 

Here is my grid

@(Html.Kendo().Grid<EmployeeManagement.Models.Employee>()
                    .Name("EmployeeGrid")
                    .Columns(columns =>
                    {

                        columns.Bound(p => p.EmployeeID);
                        columns.Bound(p => p.Round1);
                        columns.Bound(p => p.Round2);
                        columns.Bound(p => p.Round3);
                        columns.Bound(p => p.Total).Width(100);
                        columns.Command(command => { command.Edit(); }).Width(250);
                    })
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                    .Pageable(a => a.PageSizes(new int[] { 50, 100 }))
                    .Sortable()
                    .Scrollable()
                    .HtmlAttributes(new { style = "height:700px;" })
                    .Events(events => { events.Save("updateTotal"); }
                    )
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(100)
                .Model(model =>
                {
                    model.Id(p => p.EmployeeID);
                    model.Field(p => p.Total).Editable(false);
                })

                .Update(update => update.Action("Employee_Update", "Admin"))

        )
    )

 

<script>

function updateTotal(e) {

        var totalCount = 0;
        if (e.model.Round1 !== null)
            totalCount += 1;
        if (e.model.Round2 !== null)
            totalCount += 1;
        if (e.model.Round3 !== null)
            totalCount += 1;
        
        // totalCount has correct total

e.model.set('Total', totalCount); // Doesnt refresh

e.container.parents('tr').find('td:eq(4)').html(totalCount); // Doesnt refresh

        e.container[0].children[4].innerText = totalCount; // Doesnt refresh

    }

</script>

 

There are no developer tools console errors.

[Tsvetomir]

Hi,

Whenever the Editable option is set at a data source level, the respective fields would not be edited - even programmatically. If you would like to make the column non-editable but at the same time update it programmatically, I can recommend removing the .Editable(false) option and including the following at a column-level:

columns.Bound(p => p.ProductName).Editable("productNameEditable");

And the JavaScript handler:

    <script>
        function productNameEditable(dataItem) {
            return false;
        }
    </script>

Give this a try and let me know how it works out for you.

 

Regards,
Tsvetomir
Progress Telerik

[StuartLittle]

I am sorry but that did not work. The non-editable column is not refreshed. Page refresh shows the updated non-editable column updated.

Is there anything else I can provide you with that would resolve the issue?

[Tsvetomir]

Hi,

I have created a sample project based on the provided code snippets so far and here the behavior that I observe on my side:

https://screencast-o-matic.com/watch/cqlTlpvby6

Attached is the sample that I have used for testing purposes. Is it possible for you to elaborate further on what are the differences between the current behavior and the desired one? Perhaps, whenever the user changes the value of the first editor, the last column should be updated? Is that correct?

Looking forward to your reply.

 

Regards,
Tsvetomir
Progress Telerik

[StuartLittle]

Thank you very much. I couldn't find any difference between your code and mine but was able to update the non editable column using your code sample.