Getting client side errors from validator in templated pop up editor from Grid

[Guillaume]

Hello ! 

 

I have a kendo UI grid displaying data with a templated pop up for edition.:

@(Html.Kendo().Grid<Model>()
    .Name("Grid")
    .Events(events => {events.Edit(@<text>
    function(e) {
        e.sender.editable.validatable._errorTemplate = kendo.template($('#tooltip-template').html());
    }
    </text>);})
    .Columns(columns =>
    {
        columns.Bound(m => m.DateReceived);
        columns.Bound(m => m.SupplierName);
        columns.Bound(m => m.InvoiceNo);
        columns.Bound(m => m.RefFileNo);
        columns.Bound(m => m.InvoiceDate);
        columns.Bound(m => m.Amount);
        columns.Bound(m => m.DatePayment);
        columns.Command(command => { command.Edit().CancelText(" ").UpdateText(" ").Text(" "); }).Title(Litigation.Action);
    })
    .ToolBar(config =>
    {
        config.Create().Text(Litigation.AddInvoice);
    })
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("LitigationInvoiceEditPopUp").Window(w => { w.Width(711); w.Height(300); w.HtmlAttributes(new { @class = "invoice" }); })
        .DisplayDeleteConfirmation(Generic.Delete))
    .Sortable()

    .Resizable(resize => resize.Columns(true))
    .DataSource(datasource => datasource
        .Ajax()
        .Model(model =>
        {
            model.Id(m => m.Id);
            model.Field(m => m.LitigationFileId).DefaultValue(Model.LitigationFileId);
        })
            .Read(read => read.Action<Controller>(x => x.Read(null, Model.LitigationFileId)))
            .Create(create => create.Action<Controller>(x => x.Create(null, null)))
            .Update(update => update.Action<Controller>(x => x.Update(null, null)))
                .Events(events => events.Error(@<text> function(e) {
                                                            debugger;
                                                            error(e);}
                                                </text>))
        .PageSize(int.MaxValue)


    )
)

I have succeeded in setting the error Template for the validation errors and it works well. But when validation errors occurs on a combobox, the combobox border does not change to red. In my other pages I have done something like this :

 

var validator = $("form").kendoValidator({
                validate: function (e) {
                    return showErrors(this.errors(),this._errors)
                },
                errorTemplate: "<div class='validationMessage' style='color:red;font-size:10px;'>#=message#</div>"
            }).data("kendoValidator");

The function showErrors changes the colors of the combobox if they are in the parameters "this._errors"

 

I want to do the same thing with the validator of the popup but I have not find a way to do it yet. Here is what I already tried :

 In the definition of the DataSource in the grid :

 

Update(update => update.Action<Controller>(x => x.Update(null, null)))
                .Events(events => events.Error(@<text> function(e) {
                                                            debugger;
                                                            error(e);}
                                                </text>))

This is not even fired because I guess it is the server side event and the validation stops before going server side

and in the Edit Event of the grid :

 

.Events(events => {events.Edit(@<text>
    function(e) {
        e.sender.editable.validatable._errorTemplate = kendo.template($('#tooltip-template').html());
        e.sender.editable.validate =  = function(e) {debugger;error(e, this);}
    }

 e is always undefined et this does not contains any errors and the validation messages do not show up anymore.

 

I could really need a hand on this one !

 

Thanks,

 

Guillaume

 

[Guillaume]

Bump !! I could really need a hand on this one ! 

 

Thanks !

[Daniel]

Hello Guillaume,

The dataSource error event cannot be used because it is triggered only for server side errors. It should be possible to use the approach with the edit event. I am not sure if I understand the problem with the event argument and the context but I noticed that the code for binding to the validate event is not correct. The validator will already be initialized in the event so you should use the bind method in order to bind the handler e.g.

.Events(events =>
{
    events.Edit(@<text>
    function(e) {
        e.sender.editable.validatable._errorTemplate = kendo.template($('#tooltip-template').html());
        e.sender.editable.validatable.bind("validate", function(e) {showErrors(this.errors(),this._errors);});
    }
    </text>);
})

Regards,
Daniel
Telerik

[Guillaume]

That's exactly what I needed and it works properly. 

Thank you !