How to disable a maskedtextbox

[Colin]

I am using a form in a .net Core project.  I want to disable/enable a maskedtextbox based on ViewBag properties.  It works for regular text boxes, but not a masked text box.  Here is a portion of my code:

i.Add()
    .Field(f => f.LastName)
    .Label(l => l.Text("Last Name:"))
    .Editor(e =>
    {
        e.TextBox().Enable(ViewBag.canEdit);
    });
i.Add()
    .Field(f => f.CellPhone)
    .Label(l => l.Text("Cell Phone:"))
    .Editor(e =>
    {
        e.MaskedTextBox().Mask("[phone]").Enable(ViewBag.canEdit);
    });

 

[Alexander]

Hi Colin,

Thank you for the provided information and screenshot.

After consulting with our developer's team I can confirm that the current behavior is intended. Currently, the MaskedTextBox editor does not expose a built-in option to enable or disable the widget, when configured through the Editor configuration method. I have therefore logged an item to enhance the MaskedTextBox editor and implement such configuration for it as well. You can monitor its status here:

https://github.com/telerik/kendo-ui-core/issues/6708

As a workaround, I would suggest configuring the MaskedTextBox editor upon the form's initialization. For example:

@{
    var canEdit=false;
}

@(Html.Kendo().Form<Kendo.Mvc.Examples.Models.Form.FormItemsViewModels>()
    .Name("exampleForm")
    ...
    .Items(items =>
    {
        items.AddGroup()
            .Label("Registration Form")
            .Items(i =>
            {
                i.Add()
                    ...
                    .Editor(e =>
                    {
                        e.MaskedTextBox().Mask("(000)-000");
                    });

            });
    })
   ...
)
<script>
    $(document).ready(function(){
        var maskedTextBox=$("#MaskedTextBox").data("kendoMaskedTextBox"); //get the reference of the MaskedTextBox
        maskedTextBox.enable(@canEdit.ToString().ToLower()); //enable or disable based on the onEdit variable
    })
</script>

For a visual illustration of the mentioned above, you can review the following Telerik REPL example.

Finally, for bringing this to our attention I have also updated your Telerik points as a token of gratitude.

Regards,
Alexander
Progress Telerik

[Colin]

Great information.  Thank you.  Presumably this would also apply to a DatePicker control?  Enable(false) doesn't work there either.

[Alexander]

Indeed, I am happy to let you know that I have logged another item to enhance the DatePicker Editor as well. Its status you can monitor here:

https://github.com/telerik/kendo-ui-core/issues/6715

As a workaround, you can disable the DatePicker via the .InputHtmlAttributes() configuration option. For example:

@{
    var canEdit = false;
}

    .Items(items =>
    {
        items.AddGroup()
            .Label("Registration Form")
            .Items(i =>
            {

                i.Add()
                    .Field(f => f.DatePicker)
                    .Label(l => l.Text("DatePicker:").Optional(true))
                    .InputHtmlAttributes(new {disabled="@canEdit"})
                    .Editor(e=>e.DatePicker());


            });
    })
   )

Here is a Telerik REPL that showcases the mentioned above.