Dynamic generation of widgets

[Javier]

Hello,

I would like to know what is the best strategy to dynamically generate (and delete) widgets in my app project. Notifications and different state changes are received via Ajax from a Python enabled server. 

In a little sample (I'm just evaluating as for know) I tried this and seemed to work:

    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
       //injecting a widget?
        tmp=' <a data-role="button" href="#drawer-starred" data-badge="12">Notifications</a>';
        $("#drawer-home").append(tmp);
        //kendo.init($("#drawer-home"));
    </script>

But I'm not very confident about it. I thought kendo.init would be required but apparently not so. 
Thanks very much for any help!

       Javier

[Alexander Valchev]

Hi Javier,

Generally speaking dynamically creating widgets in mobile applications is not recommended as it is error prone. Could you please explain your scenario with more details? Why you need to do that?

As a general information, Kendo UI widgets are initialized on demand at the init event of the corresponding View. This means that data-role attributes are evaluated when the View is initialized which may be the reason why your code works without kendo.init method.

Anyway, dynamic changes in the HTML are not recommended. Please provide more information regarding your case (and if possible a small jsBin sample that illustrates it) and I will try to suggest an alternative approach if such is possible of course.

Regards,
Alexander Valchev
Telerik

[Joao]

Hello,

I was about to ask a very similar question.   Much the same as a dynamic web site generates UI elements on the fly without reloading the whole page and based upon Ajax calls, my App has to refresh it's interface based upon remote state changes that are centralized in the App servers. 

As examples I can think of a mail app that shows incoming messages on the fly or a list of notifications that are shown as an excerpt  (Push notifications the App is aware of)  and not as a badge number. They would be mostly lists of things that have to be refreshed without affecting the rest of the elements in that view.

Thanks in advance,

                                                   Joao

[Alexander Valchev]

Hi Joao,

Usually the dynamic data is displayed in a ListView. An example for that is iOS mail client or Gmail native app. It is possible to refresh ListView's items via DataSource API (read, filter, group, sort, add, remove and etc.). This will force the ListView to refresh (automatically) and display the updated data.

Regards,
Alexander Valchev
Telerik

[Joseph]

I am also interested in the dynamic generation of widgets based on some user driven event.

My specific example is as follows:
A user is creating a procedure document. Initial page displays basic input plus an editor for STEP ONE.
The user can then add a second step to the document. At this point, i want to dynamically generate a second editor for STEP TWO when the user clicks Add Step button.

Is this at all possible? I have tried hiding the widget in the DOM and using that html to add dynamically as well as AJAX but neither seems to display the widget properly.

Note: I am using the Kendo ASP MVC 4

Joe

[Alexander Valchev]

Hello Joseph,

Kendo widgets should be created when their element is present in the DOM. After the widget initialization the element should not be removed from the DOM.
If I understood correctly, you are using Kendo UI Wrappers for ASP.NET MVC. The server-side wrapper outputs the Kendo UI widget initialization script right after the widget HTML markup in a document.ready event handler. This is not desired if you want to build the widgets on demand so you should consider using deferred initialization:

• http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/fundamentals#deferred-initialization
  
  

Since this thread is relatively old and located in Kendo UI Mobile section I would like to ask you, in case you need further assistance, to open a new topic under MVC Wrappers section. Thank you in advance for the understanding.

Regards,
Alexander Valchev
Telerik