Browser crash !! (stack overflow)

3 posts, 1 answers
  1. Insad
    Insad avatar
    41 posts
    Member since:
    Jan 2010

    Posted 17 Jan 2017 Link to this post



    When I run the sample in the DoJo ( ) on the Opera browser you will see that an infinite loop starts, crashing with a stack overflow.

    On other browser you might see the issue as well if the appropriate devtools are used :)


    Can someone please explain what is wrong in this straight forward sample?

    I can't figure out why this happens.

    It is stopping large parts of our development at the moment so please can someone help me with this..


    Best regards,



  2. Answer
    Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 19 Jan 2017 Link to this post

    Hello Insad,

    Thank you very much for the provided runnable example. It was very helpful in determining the cause of the described behaviour immediately.

    I have already responded to you in the other thread but I will also post the explanation here in case anyone else has stumbled upon this scenario.

    It looks like the idea of the provided code is to bind the view model to a template. In this template, there is another one which initializes a kendo UI Grid bound to a remote data source.

    The trouble comes from the source binding. Below are the events which lead to the browser crash:

    1) The view model is bound first and its template is rendered
    2) The Kendo UI Grid is initialized and a call to the remote service is made.
    3) Once the data source of the Kendo UI Grid is received, the change event of the view model is raised.
    2) And as a view model should do when it detects a change, it goes to step 1)

    This is how we end up with an infinite loop and a stack overflow exception. In your case, I recommend moving the Kendo UI Grid a level up, i.e. eliminating the template of the view model and the binding to the this. I have reworked the example here:   

    If you wish to keep the template, you may return the data source for the grid as a result of a function(as opposed to an array of observable objects which trigger change). Wrapping the data source in that way restricts its change event, the change event does not bubble up. As a result, the stack overflow exception is prevented. 
    Note that if the data source is used for another widget on the same page, there will be two separate instances instead of a shared one.

    Kind Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Insad
    Insad avatar
    41 posts
    Member since:
    Jan 2010

    Posted 24 Jan 2017 Link to this post

    Hello Alex,


    Thanks for the response. We have chosen the second option and so far everything works as we need it.


    Kind regards,



Back to Top