"Destroy"/Totally remove a 'View' if possible

11 posts, 0 answers
  1. Darren
    Darren avatar
    9 posts
    Member since:
    Feb 2013

    Posted 12 Feb 2013 Link to this post

    Hi,

    This is my first time using Kendo UI and am considering using for a new level project mid year :)
    I am wanting to see if there is a way to 'destroy' a view - 

    At the moment I have a view:

             <div data-role="view" data-stretch="true" id="map2" data-title="Map" data-show="startMap">
    MAP GOES HERE
    </div>

    The logic grabs data to a local array and alters the map, however the view is cached once it is loaded
    I have tried to use data-show but that crashes, I would like to know a way to totally delete a view if possible?
    Destroy() did not do much for me.


    If you have any other similar JSFiddle snippets I would be very greatful

    Thanks

    Daz.
  2. Darren
    Darren avatar
    9 posts
    Member since:
    Feb 2013

    Posted 12 Feb 2013 Link to this post

    Just need to be able to refresh or reinitialise the map
  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 14 Feb 2013 Link to this post

    Hi Darren,

    There is built-in functionality for remote view removal in this release. We are about to introduce such feature in our next official release (Q2), which will allow refresh of remote view data.

    Meanwhile, there are several community solutions in the forums, which use jQuery remove method in the hide event of the view. Perhaps such solution may help in your case. 

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. James
    James avatar
    16 posts
    Member since:
    Jan 2013

    Posted 15 Mar 2013 Link to this post

    Hi Petyo and Darren!

    I am running into the same issue as Darren.
    @Darren: Do you have a solution for this already?

    Can you give an example? 

    best regards.
  6. James
    James avatar
    16 posts
    Member since:
    Jan 2013

    Posted 15 Mar 2013 Link to this post

    Hi Darren!

    Were you able to solve your issue? Can you share your solution if possible?

    James
  7. James
    James avatar
    16 posts
    Member since:
    Jan 2013

    Posted 15 Mar 2013 Link to this post

    I used empty() and works fine but browsing back and fort will not show the second page view.
  8. James
    James avatar
    16 posts
    Member since:
    Jan 2013

    Posted 18 Mar 2013 Link to this post

    Fixed it via data-hide calling a hide function with the following codes. I am not sure if the destroy command makes sense. I am just hoping that it saves resources.

    arguments.view.destroy();
    $('#page').remove(); // removes the exact view.
  9. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 17 Jul 2013 Link to this post

    Hey guys, this solution no longer works with Q2.  If you destroy the view (view.destroy()) the tabstrip appears to be destroyed as well in the Q2 bits.  I'm guessing it is a timing issue?  The tabstrip from the old view is gone before the new view is rendered.  If kendo is doing a copy-forward type of thing, this makes sense.

    So our old way (like below) no longer works.  I'll post a solution once I find one.

    function onHide(e) {
        removeView($('#' + e.view.content.context.id), e.view);
    }
     
    function removeView($viewDiv, view) {
        if (typeof(view) != 'undefined') view.destroy();
        if ($viewDiv.length > 0) $viewDiv.remove();
    }
  10. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 17 Jul 2013 Link to this post

    Possible solution with the 2013 Q2 bits and view.destroy().  Before a new view is shown, destroy old view(s) and remove them from the DOM.  The new view appears to have the tabstrip at this point so the old view can be destroyed.

    function onBeforeShow(e) {
        var $view = $('#' + e.view.content.context.id);
         
        if ($view.length > 0) {
            removeCachedViews($view);
        }
    }
     
    function removeCachedViews($divCurrentView) {
        if ($divCurrentView.length > 0) {
            var id = $divCurrentView.attr('id');
             
            $("div[data-role='view']").each(function () {
                var $view = $(this);
                if ($view.attr('id') != id) {
                    var view = $view.data("kendoMobileView");
                    if (typeof(view) != 'undefined') view.destroy();
                    $view.remove();
                }
            });       
        }
    }
  11. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 18 Jul 2013 Link to this post

    Hi Bill,

    In general (if you are dealing with remote views), the reload configuration option should work as expected. We also had some reports about it not working as expected with layouts, which are addressed in our current release. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 18 Jul 2013 Link to this post

    The data-reload option appears to work better with the Q2 bits.  My only concern is that with leaving the views in the DOM, jQuery selectors may perform slower or the applications memory usage will increase significantly.  Some of my views are very large (ListViews with many records).  As a result, I thought I'd continue to destroy/remove them if they are no longer being used.  I'll test it both ways.  Thanks Petyo.
Back to Top
Kendo UI is VS 2017 Ready