Handling server side error in grid

[Etienne]

Hello,

 

In order to preserve editing mode in the grid after a server side error, I use the methode explain here : http://blog.codebeastie.com/kendo-grid-error-handling/

It seems to work, but after an error, if the user modify the data in the grid and save again, the same data (before modifications) are send again to the server.

I'm using inline editing and MVVM.

 

The data source :

var remoteDataSourceContrats = new kendo.data.DataSource({
    transport: {
        read: ...,
        update: ...,
        create: ...,
        destroy: ...
    },
    error: function(e) {

        console.log(e);

        $('#listeContrats').data('kendoGrid').one("dataBinding", function (x) {
            x.preventDefault();
        });
    },
    batch: false,
    pageSize: 20,
    schema: {
        data: "contrats",
        model: ...
            }
        }
    }
});

 

The error response :

{ "errors": ["Erreur de modification"] }

 

What am I doing wrong ?

 

Etienne

 

[Konstantin Dikov]

Hello Etienne,

I have tested the approach with "inline" edit mode and the edited item remains open for editing and the modified values are send to the service on the next "Update". Could you please share the entire configuration of the Grid, so we can inspect it and see if there is something that could be causing the problem on your side?

Looking forward to your reply.


Regards,
Konstantin Dikov
Progress Telerik

[Etienne]

Hello Konstantin,

 

Here is the grid definition :

<div id="listeContrats"
    data-role="grid"
    data-editable="{mode: 'inline', confirmation: 'Voulez-vous supprimer le contrat ?'}"
    data-selectable="row"
    data-sortable="true"
    data-height="230"
    data-toolbar="[{name: 'create', text: 'Ajouter un CDI', class: 'test'}]"
    data-columns=" [
        {field: 'typec',title: 'Type', editor: '<span>CDI</span>', width:'10%'},
            {field: 'debut',title: 'Debut', format: '{0: dd/MM/yyyy}', editor: debutContratEditor ,width:'15%'},
            {field: 'fin',title: 'Fin',format: '{0: dd/MM/yyyy}', editor: finEditor ,width:'15%'},
            {field: 'emploi', title: 'Emploi',editor: emploiValeursPossiblesEditor, width:'180px'},
            {field: 'typecdd', title: 'Type de CDD', width:'120px'},
            {field: 'spectacle',title: 'Spectacle', template: '# if(spectacle) { # #= spectacle.titre # # } #', width:'140px'},
            {command: [{name: 'edit', text:{edit: 'Editer', update: 'Enregistrer', cancel: 'Annuler'}}, {name: 'destroy', text: 'Supprimer'}], title: 'Actions', width: '260px' }
            ]"
    data-bind="source: contrats"
    data-auto-bind="false"
    data-height="200">
</div>

 

and the datasource definition (with twig code for the url definitions) : 

var remoteDataSourceContrats = new kendo.data.DataSource({
    transport: {
        read: {
            url: "{{ path('contraliste',{'salNumint': salarie.numint}) }}",
            type: "get",
            dataType: "json",
            },
        update: {
            url: "{{ path('contraupdate') }}",
            type: "post",
            dataType: "json"
            },
        create: {
            url: "{{ path('contracreate') }}",
            type: "post",
            dataType: "json"
            },
        destroy: {
            url: "{{ path('contradelete') }}",
            type: "post",
            dataType: "json"
            },
    },
    error:  function(e){
                if (e.errors) {
                    var grid = $('#listeContrats').data('kendoGrid');
                    $("<div></div>").kendoAlert({
                        title: "Error",
                        content: e.errors
                    }).data("kendoAlert").open();
                }
                grid.one("dataBinding", function (x) {
                    x.preventDefault();
                });
            },
    batch: false,
    schema: {
        data: "contrats",
        model: {
            id: "numint",
            fields: {
                numint: {
                    editable: false,
                    nullable: true
                },
                typec: {
                    type: "string",
                    editable: false
                },
                debut: {
                    type: "date",
                    editable: true,
                    defaultValue:function() { var d = new Date(); d.setHours(0,0,0,0); return d;},
                    validation: { required: {message: "La date debut est obligatoire"} }
                    },
                fin: {
                    type: "date",
                    editable: true,
                    defaultValue:null,
                    validation: {
                                finvalidation: function (input) {
                                    if (input.is("[name='fin']")) {
                                        input.attr("data-finvalidation-msg", "La date de fin doit être superieure à celle de debut");
                                        var debut = input.closest('tr').find('input[name="debut"]').data('kendoDatePicker').value();
                                        var fin = input.closest('tr').find('input[name="fin"]').data('kendoDatePicker').value();
                                        if(fin!=null && debut > fin){
                                            return false;
                                        }else{
                                            return true;
                                        }
                                    }
                            return true;
                        }
                    }
                },
                emploi:{
                    type: "string",
                    editable: true,
                    validation: { emploi: {message: "L'emploi est obligatoire"} }
                },
                typecdd:{
                    editable: false
                },
                spectacle: {
                    type : "object",
                    editable: false,
                    defaultValue: {titre:''}
                },
                salnumint: {
                    type: "integer",
                    defaultValue: {{ salarie.numint }}
                }
            }
        }
    }
});

 

The grid is initialized this way : 

kendo.bind($('.kendo-widget'));

var viewModelContrats = kendo.observable({
    isVisible: true,
    contrats: remoteDataSourceContrats
});

kendo.bind($("#listeContrats"), viewModelContrats);
$("#listeContrats").data("kendoGrid").dataSource.read();
$("#listeContrats").data("kendoGrid").refresh();

 

Thank you for your help,

Etienne

 

 

[Konstantin Dikov]

Hello Etienne,

I have performed further tests with our latest version and I am still not able to replicate the issue. Could you please elaborate which version of the suite you are using? 


Regards,
Konstantin Dikov
Progress Telerik

[Etienne]

Hello Konstantin,

 

We are using Kendo UI for Jquery version 2019.1.115.

 

I have made a small test case with the problème.

The gid is created in this page : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        
        <!-- Common Kendo UI CSS for web widgets and widgets for data visualization.--> 
        <link href="/kendouijq/styles/kendo.common.min.css" rel="stylesheet" />
        <!-- Theme -->
        <link href="/kendouijq/styles/kendo.default.min.css" rel="stylesheet" />

        <!-- jQuery JavaScript -->
        <script src="/kendouijq/js/jquery.min.js"></script>

        <!-- Kendo UI combined JavaScript -->
        <script src="/kendouijq/js/kendo.all.min.js"></script>
       
    </head>
    
    <body>
        <div id="gridContrat">
            <div id="listeContrats"
                data-editable="{mode: 'inline', confirmation: 'Voulez-vous supprimer le contrat ?'}"
                data-role="grid"
                data-toolbar="[{name: 'create', text: 'Ajouter un CDI'}]"
                data-columns=" [   
                {field: 'typec', title: 'Type'},
                    {field: 'debut',title: 'Debut'},
                    {field: 'fin',title: 'Fin'},
                    {command: [{name: 'edit', text:{edit: 'Editer', update: 'Enregistrer', cancel: 'Annuler'}}, {name: 'destroy', text: 'Supprimer'}], title: 'Actions' }
                    ]"
                data-bind="source: contrats"
                data-height="400">
            </div>
        </div>
        <script>
        
        $(document).ready(function(){
            
            // dataSource de la grid contrat
            var remoteDataSourceContrats = new kendo.data.DataSource({    
                transport: {
                    read: {
                        url: "/contrats/liste/14634",
                        type: "get",
                        dataType: "json",
                        },
                    create: {
                        url: "/contrats/create",
                        type: "post",
                        dataType: "json"
                        }
                }, 
                error:  function(e){  
                        if (e.errors) { 
                            var grid = $('#listeContrats').data('kendoGrid');
                            
                            alert(e.errors);

                            grid.one("dataBinding", function (x) {
                                x.preventDefault();
                            });
                        }    
                    },  
                batch: false,
                schema: {
                    data: "contrats",                                                
                    model: {
                        id: "numint",
                        fields: {
                            numint: {
                                editable: false,
                                nullable: true
                            },
                            typec: {
                                type: "string",
                                editable: false
                            },
                            debut: {
                                type: "date",
                                editable: true
                                },
                            fin: {
                                type: "date",
                                editable: true
                            }
                        }
                    }
                }
            });
                
            var viewModelContrats = kendo.observable({
                isVisible: true,
                contrats: remoteDataSourceContrats                  
            });


            kendo.bind($("#gridContrat"), viewModelContrats);
            $("#listeContrats").data("kendoGrid").dataSource.read();
            $("#listeContrats").data("kendoGrid").refresh();                
        
        });

        </script>
    </body>
</html>

 

 

The "read" service return this JSON data : 

{"contrats": [
    {"numint": 5998,
    "debut": "2019-12-08T00:00:00+00:00",
    "fin": "2019-12-08T00:00:00+00:00",
    "typec": "CDI"},
    {"numint": 6007,
    "debut": "2019-03-14T00:00:00+00:00",
    "fin": "2019-03-16T00:00:00+00:00",
    "typec": "CDI"}
    ]
}

 

In case of server side error, the "create" service return (with status code 200) :

{ "errors": ["Erreur a la creation"] }

 

Hope this help...

 

Thank you

Etienne

 

[Konstantin Dikov]

Hi Etienne,

Everything with the configuration and the status code of the response (and the response) seems correct and I am still not able to observe the issue with different approaches. I have tried to return the new record without an assigned ID from the create, to return it with an assigned ID, no values at all, etc., but each time a change was made in the UI, that change was passed correctly to the create.

We could schedule a complimentary remote session, so you can demonstrate the issue and allow us to debug it directly. If that is acceptable, please get back to us with a time frame within our available hours, when we can schedule the meeting: between 8 AM and 2 PM UTC, Mon - Fri.

Looking forward to your reply.


Regards,
Konstantin Dikov
Progress Telerik