Best practice Add/Remove Content & unload Widgets correctly

[Duke]

Hi all

I was looking for a best practice to handle Load/Unload Content and removing widgets.

For example.

1. User clicks a button, an existing tabStrip is Extended by a new tab
2. In the new tab Content gets loaded via an Ajax request
3. The new Content contains an html form with autocomplete, datepicker, Editor elements.
4. The user fills out the form, clicks a button to send serialized form to remote Server via Ajax
5. On success, remove the tab from tabstrip and all widgets that have been initialized on the fly bevor

So until Point 4 its clear to me how to make it. But what is the best way, to remove the new Content and all the widgets, so nothing is left in the Memory?

Thanks for advice.

Duke

[Daniel]

Hello Duke,

You should call the kendo.destroy method on the tab content. The method will find all widgets in the element and will call their destroy method.

Regards,
Daniel
Telerik

[Duke]

Hi Daniel

Thanks for you answer. I tried all the following allready:

var view_ticketCreate = kendo.observable({});
view_ticketCreate.destroy();
kendo.destroy(view_ticketCreate);
kendo.destroy($("#view_ticketCreate");

But non of them working. Do I have to destroy the elements other wise in MVVM?

Greetings

[Duke]

I don't get it, the destroy() method should remove the defined element and all its content safely to prevent memory leak.

But if I do:

kendo.destroy($("#view_ticketCreate"));

And gonna load the same content again with ajax into my DOM, all the fields got the values I was entering into them bevor removing with the destroy method.

So I guess their only removed from the DOM, but not as instances. Right?

[Daniel]

Hello Duke,

I am not sure if I understand correctly the scenario. From the code that you provided it seems that "view_ticketCreate" is an observable viewModel. Is there are an HTML element with ID "view_ticketCreate"? If yes, to which element is the viewModel bound?
The destroy element accepts an HTML element as parameter and calls the destroy for all widgets within the passed element. This should remove the widgets and the objects but not the HTML. Thus if the elements are not replaced, the values will be preserved. The values will also be preserved if you are binding again the same viewModel.

Regards,
Daniel
Telerik

[Duke]

hi Daniel

I got a viewModel called view_ticketCreate and also a DIV element with the ID view_ticketCreate. I bind them with:

kendo.bind($("#view_ticketCreate"), view_ticketCreate);

This is also working, the widgets within that HTML DIV element are inizialized an fully working. I got there an autocomplete which searches a database for customers. If I select one from the list, other form elements are filled out with the informations from the database.

Example: I select the customer "Contoso Ltd.", then in my form the field with E-mail gets the value "[e-mail]", the phonenumber and the contact person. Also working very well!

But then, after I click finish in the form, the form data gets transferd to the server, the widgets should be destroyed and the html content removed. This is also working!

But then, wen a click again on the button to ad the same tab from the server, my autocomplete field still has the customer "Contoso Ltd." as value. And I don't know from where he has this state.

Maybe I have to clear my view_ticketCreateModel? As you see here:

////////////////////////////////////////////////////////////////////////////////
/// Ticketing related widgets
////////////////////////////////////////////////////////////////////////////////
var view_ticketCreate = kendo.observable({
   customers: new kendo.data.DataSource({
       transport: {
           read: {
               url: "http://server/API/customers/search/",
               dataType: "jsonp",
               contentType: "application/json; charset=utf-8"
           },
           parameterMap: function(options) {
               return {
                   SearchTag: options.filter.filters[0].value
               }
           }
       },
       schema: {
           data: "data"
       },
       serverFiltering: true
   }),
   cID: null,
   cName: null,
   cContact: null,
   cPhone: null,
   cMail: null,
   select: function(e){
    var autocomplete = e.sender;
    var dataItem  = autocomplete.dataItem(e.item.index());
    this.set("cID",  dataItem.cID);
    this.set("cName",  dataItem.CName);
    this.set("cContact",  dataItem.Nachname + " " + dataItem.Vorname);
    this.set("cPhone",  dataItem.Telefon);
    this.set("cMail",  dataItem.Mail);
   },

   saveTicket: function() {
       var form = $("#jar_ticketing_create").serialize()
       var ticketing = new kendo.data.DataSource({
       transport: {
           read: {
               url: "http://server/API/ticketing/create/?" + form,
               dataType: "jsonp"
           }
       },
       requestEnd: function(e) {
            var jCode   = e.response.data.jCode;
            var jMsg    = e.response.data.jMsg;
            if(jCode == '200') {
               var tabStrip = $("#mainNavigation").data("kendoTabStrip");
               tabStrip.remove(tabStrip.select());
               tabStrip.select(0);
               kendo.destroy($("#view_ticketCreate"));
            }else{
                alert('Ticket failed')
            }
        }
       })
       ticketing.read();
   }
});

Do I have to clear the options.filter.filters[0].value ? And if, how can I do this?

Thanks so much for your help mate!

[Daniel]

Hi Duke,

The filter should not be causing the problem. Is there a field in the viewModel that is bound to the autocomplete? If yes, then you could set it to the default value after saving the data. If there isn't a field bound to the autocomplete, please check this jsBin example and let me know if I am missing something.

Regards,
Daniel
Telerik