Dynamic generation of widgets

6 posts, 0 answers
  1. Javier
    Javier avatar
    3 posts
    Member since:
    Jul 2013

    Posted 19 Aug 2013 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 21 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Joao
    Joao avatar
    1 posts
    Member since:
    Aug 2013

    Posted 28 Aug 2013 Link to this post

    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
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 30 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Joseph
    Joseph avatar
    1 posts
    Member since:
    May 2012

    Posted 03 Jan 2014 Link to this post

    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
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 06 Jan 2014 Link to this post

    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:
    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top