This is a migrated thread and some comments may be shown as answers.

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

3 Answers 225 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Guillaume
Top achievements
Rank 1
Guillaume asked on 21 Jul 2015, 07:10 PM

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

 

3 Answers, 1 is accepted

Sort by
0
Guillaume
Top achievements
Rank 1
answered on 23 Jul 2015, 01:35 PM

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

 

Thanks !

0
Daniel
Telerik team
answered on 23 Jul 2015, 02:17 PM
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
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
0
Guillaume
Top achievements
Rank 1
answered on 23 Jul 2015, 07:27 PM

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

Thank you !

Tags
Grid
Asked by
Guillaume
Top achievements
Rank 1
Answers by
Guillaume
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or