stuck in DataSource error handler

11 posts, 0 answers
  1. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 10 Oct 2013 Link to this post

    I'm sure this is pretty simple, but it seems I can't figure it out and I'm also not able to find any example on this.

    I'm using a HierarchicalDataSource together with a ListView. Inside the schemas error event, I'd like to navigate to an app-global login page in case the server returns an 401 error. Now it seems I'm stuck in this event, since no matter what I do in there, I can't get to another page. I tried e.preventDefault() (not sure if it makes much sense there) as well as dataSource.cancelChanges() (which will only stop the loading animation).

    categories: new kendo.data.HierarchicalDataSource({
                schema: {
                    errors: "error"
                },
                error: function(e) {
                    if (e.errorThrown == "Unauthorized") {
                        // ...navigate("#login");
                    }
                }
    })

    Thanks for any hints on this.
  2. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 11 Oct 2013 Link to this post

    I tried a bit more with his and have to say, that probably the DataSource documentation in either wrong or out of date (or I completely misunderstand something here).

    This is from http://docs.kendoui.com/api/framework/datasource#configuration-schema.errors :

    schema: {
         errors: "error" // twitter's response is { "error": "Invalid query" }
    },
    error: function(e) {
        console.log(e.errors); // displays "Invalid query"
    }

    I set my server to exactly respond that. There is no way to get the response inside the error callback. Neither trough any of the properties of e nor through "e.errors" (which is undefined). e.status and e.errorThrown both just say "custom error".
  3. Kendo UI is VS 2017 Ready
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 11 Oct 2013 Link to this post

    Hi Roman,

     You could use e.xhr.responseText to get the server response.

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 11 Oct 2013 Link to this post

    Thanks for the hint, but e.xhr is always null. DataSource looks like that:

    new kendo.data.DataSource({

                    transport: {
                        read: {
                             url: ffkonst.getServiceUrlJsonHttps() + "?p=login"
                            ,type: "POST"
                            ,dataType: "json"
                            ,data: function() {
                                /* build login credentials */
                            }
                        }
                    },

                    schema: {
                        model: {
                             resultText: "resultText"
                            ,loggedIn: "loggedIn"
                            ,lstring: "l"
                        },
                        errors: "fferror"
                    },

                    error: function(e) {
                        e.xhr   // --> is null
                    }
                })

    The server responds with JSON, e.g.:

    {"resultText":"invalid nickname","loggedIn":"false","l":false,"fferror":"invalid nickname"}

    The error-callback of the DataSource is called, but e.xhr is null.
  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 14 Oct 2013 Link to this post

    Hi Roman,

     What is the HTTP status code? The xhr field would be available only when the status code is different from 200. Since you have set the errors field of the schema you should be able to get those errors via the errors field of the event argument: e.errors.

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 14 Oct 2013 Link to this post

    Hi Atanas,
    thanks for your help. I figured it out now. We use Chrome to test the app with a WebKit browser, and it was behaving a bit special with cross-domain requests through CORS. The error event + parameters are working fine now.

    That leads me back to the actual question in my first post: How do I correctly leave the error callback? I can't app.navigate() from it, no matter if I do dataSource.cancelChanges() or e.preventDefault() before it. I also couldn't find an example for this in any of the demos/example apps, so I'm a bit helpless a this point.

    Thanks,
    Roman
  8. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 14 Oct 2013 Link to this post

    Hi Roman,

     We are not sure why this behavior could happen and cannot reproduce it at our side. You should be able to leave the error handler by using app.navigate. Is there a chance to send us a live demo which reproduces the exact behavior you are currently having?

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 30 Oct 2013 Link to this post

    Sorry for the late response, I was in holidays. ;)

    While preparing a demo for reproducing the error it suddenly started to work. No idea why it didn't before.

    But at least I understand now when to use e.xhr and when e.errors. Thanks! ;)
  10. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 14 Feb 2014 Link to this post

    Well, there it is again. I can't get out of the datasource error handler using application.navigate().

    This the relevant code part:


    ds = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "..."
                                ,type: "POST"
                                ,dataType: "json"
                                ,data: {
                                     ...
                                }
                                ,xhrFields: {
                                    withCredentials: true
                                }
                            }
                        },

                        schema: {
                            model: {},
                            errors: "fferror"
                        },

                        error: function(e) {

                            if (e.xhr && e.xhr.status == 401) {
                                e.preventDefault();
                                app.getInstance().navigate("#login");
                            }
                        }
                    });

    The application does run through navigate(), but nothing happens. As a side note: if I have an alert() directly before navigate(), which delays the processing a bit, navigate() works as expected.
  11. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 17 Feb 2014 Link to this post

    Hi Roman,

    I tried to reproduce this problem in this live jsbin: http://jsbin.com/tizonoqa/1/edit However I don't see any problem - the error handler doesn't get invoked more than once. Could you please modify that demo so it fails as in your real application?

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 19 Feb 2014 Link to this post

    Hi Atanas,

    thanks for your help. Since our app is rather complex and we're using require.js it's pretty hard to extract runnable code in a way that would be useful for reproducing the problem. Furthermore, the problem only seem to occur when running as an app on a real device. When testing in Chrome or Appbuilder Emulator, navigate() works fine. So jsbin would probably not very helpful anyway.

    If we manage to find the problems source, I'll update this thread. Thanks so far for trying to help.
Back to Top
Kendo UI is VS 2017 Ready