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

[Darren]

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.

[Darren]

Just need to be able to refresh or reinitialise the map

[Petyo]

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

[James]

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.

[James]

Hi Darren!

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

James

[James]

I used empty() and works fine but browsing back and fort will not show the second page view.

[James]

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.

[Bill]

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();
}

[Bill]

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();
            }
        });
    }
}

[Petyo]

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

[Bill]

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.