Custom data validation in grid popup editor

2 posts, 1 answers
  1. Shane
    Shane avatar
    8 posts
    Member since:
    Nov 2015

    Posted 02 Feb Link to this post

    I'm trying to figure out how to have one of my fields data validated through my controller on a popup edit via the grid by GridEditMode.Popup.

    Here's how my grid is set up:

     

    @(Html.Kendo().Grid(Model)
    .Name("areasGrid")
    .Columns(c =>
    {
        c.Bound(p => p.Id).Title("ID").Visible(false);
        c.Bound(p => p.AreaName).Title("Area");
        c.Bound(p => p.SupervisorPic).Title("User").Visible(false);
        c.Bound(p => p.SupervisorName).Title("Supervisor");
        c.Command(command => { command.Edit(); command.Destroy(); }).Width(170);
    })
    .AllowCopy(true)
    .Selectable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.Id);
        })
        .PageSize(30)
        .Events(events => events.Error("error_handler"))
        .Create(update => update.Action("EditingPopup_Create", "ProgramAssignment"))
        .Read(read => read.Action("EditingPopup_Read", "ProgramAssignment"))
        .Update(update => update.Action("EditingPopup_Update", "ProgramAssignment"))
        .Destroy(update => update.Action("EditingPopup_Destroy", "ProgramAssignment"))
    )
    .Sortable()
    .Filterable()
    .ToolBar(toolbar =>
    {
        toolbar.Create();
    })
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Area").Window(w => w.Width(400)).CreateAt(GridInsertRowPosition.Bottom))
    .Pageable(p => p.PageSizes(new int[] { 10, 20, 30, 50 }))
    .Resizable(resize => resize.Columns(false))
    .ColumnMenu()
    )

    And here's my template where users can add/edit records that's used by the grid's editable template name:

    @model Voice.ViewModels.AreaViewModel
     
    <link href="~/Content/kendo/2015.3.1111/kendo.blueopal.min.css" rel="stylesheet" type="text/css" />
    @(Html.Kendo().TextBoxFor(model => model.Id)
        .Name("Id")
        .HtmlAttributes(
            new
            {
                @style = "display:none"
            }
        )
    )
    <table>
        <tr>
            <td>
                <label>Area</label>
            </td>
            <td>
                @(Html.Kendo().TextBoxFor(model => model.AreaName)
                    .Name("AreaName")
                    .HtmlAttributes(
                        new
                        {
                            @style = "width: 255px",
                            @placeholder = "Area Name",
                            @id = "AreaName",
                            @class = "k-textbox",
                            @required = "required",
                            @validationmessage = "Enter area name.",
                            @maxlength = "255"
                        }
                    )
                )
            </td>
        </tr>
        <tr>
            <td>
                <label>Supervisor</label>
            </td>
            <td>
                @(Html.Kendo().TextBoxFor(model => model.SupervisorPic)
                    .Name("SupervisorPic")
                    .HtmlAttributes(
                        new
                        {
                            @style = "width: 255px",
                            @placeholder = "Supervisor PIC",
                            @id = "SupervisorPic",
                            @class = "k-textbox",
                            @required = "required",
                            @validationmessage = "Enter the PIC code of the supervisor.",
                            @maxlength = "3"
                        }
                    )
                )
            </td>
        </tr>
    </table>

    Ideally, I'd like to be able to validate the SupervisorPic field (basically someone's user ID at my work) by calling a method in my controller to validate the entry against our security system.  Is this possible?

  2. Answer
    Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 04 Feb Link to this post

    Hi Shane,

    I would suggest you to look the flowing resources and discussions about the same topic:
    http://www.telerik.com/blogs/handling-server-side-validation-errors-in-your-kendo-ui-grid
    http://www.telerik.com/support/code-library/handling-server-side-validation-errors-during-pop-up-editing
    http://www.telerik.com/forums/validation-on-edit-popup-window-of-kendoui-grid-with-editor-templates

    Regards,
    Vasil
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top