kendo-uigridkendo-gridmvc-editor-templatesmaskedtextbox

MaskedTextBox inside KendoGrid


Is it possible to use the Kendo MaskedTextBox inside a Kendo Grid? If so, how?

I am using an Editor template for the MaskedTextBox.

@model object

@Html.Kendo().MaskedTextBoxFor(m => m).Mask("(000) 000-0000")

The Kendo Grid has a telephone field that uses the MaskedTextBox, but it doesn't grab the mask.

    @(Html.Kendo().Grid(new ContactViewModel[] { })
        .Name("ServiceLocationContactsGrid")
        .Columns(column =>
        {
            column.ForeignKey(c => c.ContactTypeId, (System.Collections.IEnumerable)ViewData["contactTypes"], "ContactTypeId", "Description").EditorTemplateName("GridForeignKey");
            column.Bound(c => c.LastName).Width(700);
            column.Bound(c => c.FirstName);
            column.Bound(c => c.Title);
            column.Bound(c => c.EmailAddress);
            column.Bound(c => c.TelephoneNumber).EditorTemplateName("Telephone");
            column.Bound(c => c.TelephoneExtension);
            column.Bound(c => c.FaxNumber).EditorTemplateName("String");
            column.Command(command => { command.Edit().Text(" ").UpdateText(" ").CancelText(" "); command.Destroy().Text(" "); }).Width(180).Visible(!ViewBag.ReadOnlyView);
        })
            .ToolBar(toolBar =>
            {
                if(!ViewBag.ReadOnlyView) toolBar.Create().Text("Add New Contact");
            })
        .Sortable()
        .Filterable()
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .DataSource(dataSource =>
            dataSource
            .Ajax()
            .ServerOperation(false)
            .Model(model =>
            {
                model.Id(c => c.ContactId);
                model.Field(c => c.ContactId).Editable(false);
            })
            .Create(create => create.Action("CreateContact", "Contact"))
            .Update(update => update.Action("UpdateContact", "Contact"))
            .Read(read => read.Action("ListContacts", "Contact"))
            .Destroy(destroy => destroy.Action("DestroyContact", "Contact"))
        )
    )

Solution

  • after making editor template, you should put it on the cell you want. Editor Template

    @(Html.kendo().MaskedTextBoxFor(m=>m).Name("test").mask("00/00/000"))

    then you should put your editor template in grid:

    columns.Bound(x=>x.test).EditorTemplateName("Test");
    

    this code worked for me