Disable fields in Popup edit conditionally based on Model field

[Luke]

Hi,

We have many models that we have set up Grids for and are using custom templates for the Popup editor. We wish to disable all of the fields in the Popup editor based on a boolean Model property, but were quick to find that the Razor Model object is not available in the custom template. We need to check this boolean property on a record by record basis (some records will be allowed for editing and some will not). I have taken a look at some of the solutions here and it seems that one approach is to create an on edit handler that manually disables all of the fields on the editor on an edit action. However this creates a serious overhead because it would mean we have to create this function for every grid. We have many different grids and they all have varying fields.

I was wondering if it is somehow possible to get access to this Model boolean property in the custom template and disable the fields as appropriate. Please note that we need to still be able to see the fields and their respective values and not hide/show the fields.

[Luke]

Here's an example of the property we're adding to our Model and the Custom Popup Template we are using:

In Model:

public bool HasEditPermission { get; set; }

Custom EditorTemplate:

@using Kendo.Mvc.UI

<input type="hidden" asp-for="Id" />

<div class="editor-label">
    <label asp-for="Name">Name</label>
</div>
<div class="editor-field">
    <input type="text" asp-for="Name" />
    <span asp-validation-for="Name"></span>
</div>

<div class="editor-label">
    <label asp-for="Description">Description</label>
</div>
<div class="editor-field">
    <input type="text" asp-for="Description" />
    <span asp-validation-for="Description"></span>
</div>

<div class="editor-label">
    <label asp-for="Product">Product</label>
</div>
<div class="editor-field">
    @(Html.Kendo().DropDownListFor(m => m.Product)
 .DataTextField("Name")
 .DataValueField("Id")
 .BindTo((System.Collections.IEnumerable)ViewData["products"]))
</div>

[Georgi]

Hi Luke,

Generally speaking, all the configuration done with the server wrappers serializes to some html and an initialization script. The main point of the wrappers is to provide an API for developers which prefer the strongly typed syntax of the html helpers. However, at the end it is the same JS component. Furthermore, the data is requested from the client after the widget is initialized which means that when the editor view is compiled the actual data item is not available - we simply serialize the content of the editor to a html which we then use in the initialization script.

With that said, I am afraid that disabling the fields in the popup would be possible only on the client. Nevertheless, I can suggest you a more `declarative approach` which will allow you to use the very same Edit event handler for all grids.

Use the Kendo MVVM Visible binding to show/display the content and within the Edit event handler bind the editor container to the corresponding dataItem.

e.g.
 

// element displayed conditionally

<div data-bind="visible: HasEditPermission" class="editor-field">
    <input type="text" asp-for="Name" />
    <span asp-validation-for="Name"></span>
</div>

//Edit event handler

    function onEdit(e) {
        kendo.bind(e.container, e.model)
    }

Regards,
Georgi
Progress Telerik

[Luke]

Hi Georgi,

Thanks for the reply. Your solution worked like a charm! Slight tweek to enable/disable the input instead of completely hiding it.

<div class="editor-field">
    <input type="text" asp-for="Name" data-bind="enabled: HasEditPermission"/>
    <span asp-validation-for="Name"></span>
</div>

 

[Georgi]

Hello Luke,

Thanks for sharing your solution with the community. Indeed when the requirement is to enable/disable the elements conditionally and not hide them the Enabled Binding is the correct choice. 


Regards,
Georgi
Progress Telerik