Kendo Grid with Popup Editor field validation - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Kendo Grid with Popup Editor field validation

  • Kendo Grid with Popup Editor field validation
  • I'm trying to get form validation to work in Hybrid mode using a Kendo Grid with a Popup Editor.  I have set up [Required] data annotations on my model.  I expected to get a client-side popup validation message when I leave one of the fields blank, but don't get anything.  Is there any fundamental reason why Kendo Grid validation would not work in Hybrid mode?  Has anyone successfully done this?  We've tried lots of variations over the past few months and have not gotten it to work.

    Version info:  Sitefinity v6.0 and v6.1,  Kendo 2013.1.319

    /****** View ******/
    @(Html.Kendo().Grid<ManageContactsModel>()
            .Name("managecontactsgrid")
            .Columns(columns =>
               
                    columns.Bound(p => p.Id);
                    columns.Bound(p => p.Title);
                    columns.Bound(p => p.ContactName);
                    columns.Command(command => command.Edit(); ).Width(80);
                )
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ContactEdit"))
            .Pageable()
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new style = "height:430px;")
            .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .PageSize(20)
                                        .Events(e => e.Error("error"))
                                        .Model(model => model.Id(p => p.Id))
                                        .Create(update => update.Action("EditingPopup_Create", "ManageContacts"))
                                        .Read(read => read.Action("EditingPopup_Read", "ManageContacts"))
                                        .Update(update => update.Action("EditingPopup_Update", "ManageContacts"))
            )
            .Events(e => e.Edit("OnGridEdit"))
        )

    /******* Editor Template *******/
    @using Kendo.Mvc.UI
    @using SitefinityWebApp.DAL
    @model SitefinityWebApp.Mvc.Models.ManageCasinosModel

        @Html.HiddenFor(model => model.Id)

        <div class="titleEditor">
            <div class="editor-label">
                @Html.LabelFor(model => model.Title)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Title, new @style = "width: 250px")
                @Html.ValidationMessageFor(m => m.Title)
            </div>
        </div>
        <div class="contactNameEditor">
            <div class="editor-label">
                @Html.LabelFor(model => model.ContactName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.ContactName, new @style = "width: 250px")
                @Html.ValidationMessageFor(m => m.ContactName)
            </div>
        </div>

    /***** Model *****/
    using System.ComponentModel;
    using System.ComponentModel.DataAnnotations;

    namespace SitefinityWebApp.Mvc.Models

        public class ManageContactsModel
       
            public string Id get; set;

            [DisplayName("Casino Name")]
            [Required]
            [StringLength(200, ErrorMessage = "Cannot exceed 2 characters.")]
            public string Title get; set;

            [DisplayName("Contact Name")]
            [Required]
            [StringLength(200, ErrorMessage = "Cannot exceed 2 characters.")]
            public string ContactName get; set;
           

  • Hi,

    Sitefinity form submission logic currently intercepts the validation and thus no validation is fired. This is a problem with sitefinity MVC that will be fixed in the next release sitefinity 6.2.

    Regards,
    Stanislav Velikov
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • It this still an issue I have Sitefinity 6.3 and the validation is still not firing? How do I get the required field validation to fired for the kendo grid popup editor?
  • I am not gating validations in Popup Grid. Pls help me

    @(Html.Kendo().Grid<Jewllery.ServiceReference1.CompanyInfo>()
        .Name("grid")
        .Columns(columns =>
       
            columns.Bound(p => p.BranchCode).Width(150);
            columns.Bound(p => p.Name).Width(100);
            columns.Bound(p => p.CustomerNo).Width(120);
            columns.Bound(p => p.Gsttax);
            columns.Bound(p => p.GstInc);
            columns.Bound(p => p.ItemOrderNo).Width(150);
            columns.Bound(p => p.OldGoldTradeIn).Width(150);
            columns.Bound(p => p.OrderNo);
            columns.Bound(p => p.TransactionNo);
            columns.Command(command => command.Edit(); command.Destroy(); ).Width(180);
        )
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .Pageable()
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new style = "height:680px;" )
            .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(15)           
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(p => p.BranchAutoId)) 
            .Model(model =>model.Field(p => p.BranchAutoId).Editable(false))       
            .Create(update => update.Action("EditingPopup_Create", "CompanyInfo"))
            .Read(read => read.Action("EditingPopup_Read", "CompanyInfo"))
            .Update(update => update.Action("EditingPopup_Update", "CompanyInfo"))
            .Destroy(update => update.Action("EditingPopup_Destroy", "CompanyInfo"))
        )
    )
    <script type="text/javascript">
        function error_handler(e)
            if (e.errors)
                var message = "Errors:\n";
                $.each(e.errors, function (key, value)
                    if ('errors' in value)
                        $.each(value.errors, function ()
                            message += this + "\n";
                        );
                   
                );
                alert(message);
           
       
    </script>