Telerik MVC Grid - Updating "Uneditable" Fields with a Drop Down

Question

I have a grid set when I'm pulling one of the fields in using an inline drop down list.

I can retrieve the values I need from the dropdown list data item, and i can set the values in the grid's edit row using the dropdown list.

The following code works fine as long as A, B, C, and D are editable... BUT... these values should not be editable. The values in these cells should be driven strictly by the values of the drop down list.

function ddl_OnSelect(e)
{
    var DDLdataItem = this.dataItem(e.item);

    var A = DDLdataItem.A;
    var B = DDLdataItem.B;
    var C = DDLdataItem.C;
    var D = DDLdataItem.D;

    var grid = $('#grd').data('kendoGrid');

    var editRow = grid.dataItem("tr.k-grid-edit-row");


    editRow.set("A", DDLdataItem.A);
    editRow.set("B", DDLdataItem.B);
    editRow.set("C", DDLdataItem.C);
    editRow.set("D", DDLdataItem.D);

}

I feel like I should be able to display the values in a template column, but I'm not finding any good documentation on column.template, and when I do something like this it just gives me an empty column.

        columns.Template(
            @<text>
                <input type="text" name="A" value="@item.A" readonly />
            </text>
                 ).Title("A");

UPDATE

Ok.... so what I did to "fix" the issue was...

First I created a new editortemplate called ReadOnlyCurrency and placed it in the shared EditorTemplates.

Then for each of the 3 currency columns that this applies to I added the editor template name property.

.EditorTemplateName("ReadOnlyCurrency")

I then copied the contents of the currency editor template and pasted it into the readonlycurrency template

I turned off the spinners, made it readonly, and made it enabled false.

@model decimal?
@(Html.Kendo().CurrencyTextBoxFor(m => m)
      .HtmlAttributes(new { style = "width:100%;", @readonly = "readonly" })
      .Enable(false)
      .Min(0)
      .Spinners(false)
)

This is sufficient for what I'm trying to do, but I'm not going to mark this as the answer.

I would much rather have a label that is formatted to currency... but I'm having problems with the way the editortemplate passes in the model.

Patrick Patrick · Accepted Answer · 2018-05-04T15:25:53

With the help of the telerik community I found a better solution.

First, we leave the fields in the model as editable:

model.Field(p => p.A);
model.Field(p => p.B);
model.Field(p => p.C);

Then in the column binding we set the editable to a function that always returns false:

columns.Bound(p => p.A).Title("A").Editable("editable").ClientTemplate("<span class='A'>#: kendo.toString(A, 'C') #</span>").ClientFooterTemplate("#= kendo.toString(sum, 'C') #");
columns.Bound(p => p.B).Title("B").Editable("editable").ClientTemplate("<span class='B'>#: kendo.toString(B, 'C') #</span>").ClientFooterTemplate("#= kendo.toString(sum, 'C') #");
columns.Bound(p => p.C).Title("Total").Editable("editable").ClientTemplate("<span class='C'>#: kendo.toString(C, 'C') #</span>").ClientFooterTemplate("#= kendo.toString(sum, 'C') #");

Then in the change function we set the value in the dataItem AND we set the client side value in the clientRow.

var editRow = $("tr.k-grid-edit-row").closest("[data-role=grid]").data("kendoGrid").dataItem("tr.k-grid-edit-row");
var clientRow = $("tr.k-grid-edit-row");
editRow.set("A", this.dataItem(e.item).A);
editRow.set("B", this.dataItem(e.item).B);
editRow.set("C", this.dataItem(e.item).C);
clientRow.find(".A").text(kendo.toString(this.dataItem(e.item).A, 'C'));
clientRow.find(".B").text(kendo.toString(this.dataItem(e.item).B, 'C'));
clientRow.find(".C").text(kendo.toString(this.dataItem(e.item).C, 'C'));

So far, this gives me the functionality that I was looking for.

Telerik MVC Grid - Updating "Uneditable" Fields with a Drop Down

1 Answers