Updating "Uneditable" Fields with a Drop Down

[Patrick]

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.  

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.

 

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);

}

[Patrick]

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.

[Viktor Tachev]

Hi Patrick,

The approach you went for can be used in that scenario. Nevertheless, I would suggest an alternative approach that can also be applied. 

In order for a field to be modified it needs to be defined as editable in the DataSource Model configuration. However, you can make the column non-editable via the Editable setting. Check out the article below that describes how to make columns conditionally editable. 

• https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/conditionally-editable-columns

In your scenario the JavaScript editable function would always return false to ensure that the column will not enter edit mode. 

Regards,
Viktor Tachev
Progress Telerik

[Patrick]

Yes... I can set the editable to false w/o even needing a JavaScript function.... there is no need to add JavaScript when I can just do: .editable(false)

But in that scenario the fields cannot be set via JavaScript....

The whole point of my post is that they HAVE to be editable to be modified by JavaScript, but I don't want the user  to manually change those fields.

The alternative approach you suggest doesn't allow for that.

[Patrick]

Honestly... If I could pass the model into the editor, and instead of using a text box all together I could just format using kendo.tostring as a currency and display in a span... that would be ideal...

But with the way the editor passes in the model,  I'm unable to get that to work.

[Viktor Tachev]

Hello Patrick,

When the column is defined as non-endiable and the underlying value in the model can be edited at the same time it is possible to change the value programmatically. However, the change will not be reflected in the Grid immediately. However, the change will be passed to the server. If you would like to update the value in the non-editable Grid cell also you would need to manually modify it. 

The video below shows the behavior. 

• https://www.screencast.com/t/1TIJTK64Xog

Give the approach a try and let me know how it works on your end.


Regards,
Viktor Tachev
Progress Telerik

[Patrick]

OK.  I get it now.  The video did the trick.

Let me re-hash.

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.

 

 

 

 

[Viktor Tachev]

Hi Patrick,

This is exactly the setup I had in mind. I am glad to hear that you have the functionality up and running.

In case you have additional queries do not hesitate to contact us again.


Regards,
Viktor Tachev
Progress Telerik