Update cell value in a grid - ASP.NET Core

[Timothy Wine]

I want to update a cell value (column Score) when the user selects another column value from the dropdownlist (column RatingLevel) in a grid.   Column Score is not editable

 

    @(Html.Kendo().Grid<NERDS.ViewModels.SPEEOYRatingEntryViewModel>()
                                .Name("grdRatingElementsList")
                                .Selectable(s => s.Mode(GridSelectionMode.Single))
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.RatingElementName).Title("Element")
                                                                           .HtmlAttributes(new { @Style = "font-weight: bold" });
                                    columns.Bound(c => c.CriticalOrNonCritical).Title("Critical / Non-Critical").Width(90);
                                    columns.Bound(c => c.Weightage).Title("Weightage (%)").Width(90);
                        //columns.Bound(c => c.R).Title("FY");
                        //columns.Bound(c => c.RatingLevelId).Title("Rating Level").ClientTemplate("#=RatingLevelId# #=RatingLevelName#");
                        columns.Bound(c => c.RatingLevel.RatingLevelName).EditorTemplateName("RatingLevelEditor").Title("Rating Level")
                                                                         .HtmlAttributes(new { @Style = "color: indigo" })
                                                                         .ClientTemplate("#=templateCell(data)#").Width(175);
                        //columns.Bound(c => c.RatingLevelId).Title("Rating Level").ClientTemplate("#=RatingLevelName#");
                        columns.Bound(c => c.Score).Title("Element Score").Width(90)
                                                   .HtmlAttributes(new { @Style = "font-weight: bold" });
                                })
                                //.AutoBind(true)
                                //.Resizable(resize => resize.Columns(true))
                                .Editable(editable => editable.Mode(GridEditMode.InCell))
                                .DataSource(dataSource => dataSource
                                .Ajax()                                
                                .Events(e => e.Change("onLevelChange"))
                                .Model(model =>
                                {
                                    model.Id(f => f.RatingElementName);
                                    model.Field(f => f.RatingElementName).Editable(false);
                                    model.Field(f => f.CriticalOrNonCritical).Editable(false);
                                    model.Field(f => f.Weightage).Editable(false);
                        //model.Field(f => f.RatingLevelId).DefaultValue();
                        model.Field(f => f.Score).Editable(false);

                                })
                                .Read(read => read.Action("GetRatingElements", "SPEEOYRatingEntry"))

                                )
    )

Here is the function where I am trying to set...

    function onLevelChange(e) {
        gridObject = $("#grdRatingElementsList").data("kendoGrid");
        var selectedItems = $.map(gridObject.select(), function (item) {
            return $(item);
        });

        var dataItems = gridObject.dataItems();

        selectedItems.forEach(function (selectedItem) {
            dataItems[selectedItem.index()].Score = 50;  This works if I make the column Score editable but that's not an option!
        });

    }

 

Please need help!

 

[Tsvetomir]

Hi Timothy,

When the columns is set to .Editable(false) at the data source-level, there are no ways of updating the values. The data source will always ignore them. 

As an alternative, you could make the respective column non-editable at the grid level. This way, the user will not be able to edit the column but you would be able to update it from JavaScript. 

 columns.Bound(c => c.Score).Title("Element Score").Width(90)
                                                   .HtmlAttributes(new { @Style = "font-weight: bold" }).Editable("returnFalse");

function returnFalse(){
     return false;
}

Make sure to remove the Editable(false) option from the data source.

 

Regards,
Tsvetomir
Progress Telerik