Grid Inline Edit - make fields editable based on the value in the model

[Veena]

I have inline grid, I want to edit one field if the model.ebs is true or edit another field if the model.ebs is false.

 

@(Html.Kendo().Grid<ViewModels.Payment.ProviderServiceRRViewModel>()
.Name("PRRServiceGrid")
.Columns(columns =>
{
    columns.Bound(p => p.Id).Hidden(true);
    columns.Bound(p => p.IsEbsOnly).Hidden(true);
    columns.Bound(p => p.ServiceName);
    columns.Bound(p => p.Units);
    columns.Bound(p => p.ReduceUnits);
    columns.Bound(p => p.ReimbursementAmount).Format("{0:c}");
    columns.Command(command =>
    {
        command.Edit().HtmlAttributes(new { @class = "btn-primary k-grid-edit" });
})
.Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
.Sortable()
.Selectable()
.Events(e => e.Edit("onPRRServiceGridEdit"))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(5).Read(read => read.Action("PrrServiceGridRead", "ReimbursementRequest", new { prrId = @Html.Raw(Json.Encode(Model.PrrId)), serviceType = @Html.Raw(Json.Encode(Model.ServiceType)) }))
.Model(model =>
{
    model.Id(p => p.Id); model.Field(p => p.Id).Editable(false);
    model.Field(p => p.ServiceName).Editable(false); //I did not make Units, reduce units column editable false
    model.Field(p => p.ReimbursementAmount).Editable(false);
})
.Update(update => update.Action("Update_PrrServiceGrid", "ReimbursementRequest"))
))


function onPRRServiceGridEdit(e) {

    var isEbsOnly = e.model.IsEbsOnly;

        if(isEbsOnly) //I made it disable but I want to close the cell. I dont want to make it editable if the value is true
            $(e.container).find('input[name="ReduceUnits"]').attr("disabled", true);

         else
            $(e.container).find('input[name="Units"]').attr("disabled", true);

}

[Rosen]

Hello Veena,

In order to do this you will need to use a custom EditorTemplate for the field in question. This EditorTemplate should use a visible MVVM binding to toggle the display of either the input field or the text element. For example:

columns.Bound(p => p.ReduceUnits).EditorTemplateName("ReduceUnitsEditor");

 

@model decimal

<div data-bind="visible: IsEbsOnly">
    @(Html.Kendo().NumericTextBoxFor(m => m)/*..*/)
</div>

<span data-bind="invisible: IsEbsOnly, text: ReduceUnits">
</span>

 

Regards,
Rosen
Telerik

[Veena]

 any help or any suggestions

[Rosen]

Hello Veena,

It seems that there has been a glitch in the system. We have answered your question at 18-Apr-2016 but it seems that it has not appeared in the forums. However, I'm pasting the reply once again:

In order to do this you will need to use a custom EditorTemplate for the field in question. This EditorTemplate should use a visible MVVM binding to toggle the display of either the input field or the text element. For example:

columns.Bound(p => p.ReduceUnits).EditorTemplateName("ReduceUnitsEditor");

 

@model decimal

<div data-bind="visible: IsEbsOnly">
    @(Html.Kendo().NumericTextBoxFor(m => m)/*..*/)
</div>

<span data-bind="invisible: IsEbsOnly, text: ReduceUnits">
</span>

 

 

Regards,
Rosen
Telerik