Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Best practice Add/Remove Content & unload Widgets correctly

6 Answers 485 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Duke
Top achievements
Rank 1
Duke asked on 05 Jun 2013, 07:45 AM
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

6 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 07 Jun 2013, 06:46 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Duke
Top achievements
Rank 1
answered on 07 Jun 2013, 07:19 AM
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
0
Duke
Top achievements
Rank 1
answered on 07 Jun 2013, 01:24 PM
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?
0
Daniel
Telerik team
answered on 11 Jun 2013, 08:36 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Duke
Top achievements
Rank 1
answered on 12 Jun 2013, 09:46 AM
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 "info@contoso.com", 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!
0
Daniel
Telerik team
answered on 13 Jun 2013, 04:19 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Duke
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Duke
Top achievements
Rank 1
Share this question
or