Creating KendoUI Mobile views "on the fly"

8 posts, 0 answers
  1. Christian
    Christian avatar
    6 posts
    Member since:
    Dec 2013

    Posted 23 Jun 2014 Link to this post

    Hi,

    I have the following issue: We're creating a simple Employee Lookup app where you can drill down from the employee details to the manager details and direct reports details. Each of these pages essentially look the same so I would like to use the same view.

    Here my issue:
    - When I am on a view 'employee-detail-view' and then want to navigate to the same view again (for manager or direct reports), KendoUI doesn't do this because it keeps track of which view it is currently on.
    - I also tried inserting dynamic views into the DOM based on user navigation but it seems KendoUI can't find them. It appears it finds all the local views at beginning of app creation and then doesn't find the dynamically created ones. The code below shows a 'failed to locate resource' error since KendoUI is looking for an external html file.
     
    Can anyone point me to the right approach?

    Thanks!

    m.navigateEmployeeDetailView = function(empId) {
        // Forward Navigation
        m.navFlag = true;
        
        // Set Employee GUID
        m.selectedEmployeeId = empId;
        
        m.currentViewId = new Date().getTime();
        var viewId = "m-emp-detail-view-"+m.currentViewId;
        console.log('view id: '+viewId);
        var newViewDiv = '<div id="'+viewId+'" data-role="view" data-title="Details" data-before-show="m.showEmployeeDetailView" style="display:none;"></div>';
        
        // Add it to the container
        $('#m-emp-detail-views').append(newViewDiv);
        
        // Add Template
        var template = kendo.template($("#m-emp-detail-templ").html());
        var data = { empId: m.currentViewId }; 
        // Pass data to the template
        var result = template(data);
        $('#'+viewId).html(result);
        
        // Navigate to view
        m.kendoApp.navigate(viewId);
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 24 Jun 2014 Link to this post

    Hello Christian,

    I have already answered similar question to the support ticket that you created, but here is my input as well:

    1. Navigating to the same view is not possible. In general it does not seem correct to be able to navigate to the view that you are currently seeing. In order to have a view that is dynamically updated I would suggest you to use templates and/or MVVM bindings.

    2. I have sent you an example of creating a view on the fly and navigating to it, so please check it out and if you have any questions - let me know.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Christian
    Christian avatar
    6 posts
    Member since:
    Dec 2013

    Posted 24 Jun 2014 in reply to Kiril Nikolov Link to this post

    Kiril,

    thanks for your response. 

    I went the route of dynamically creating a new view with a dynamic html tag id.

    The trick was to append the view to the body tag, not to a div tag inside the body tag:
    $('body').append(newViewDiv); 







  5. Anthony
    Anthony avatar
    122 posts
    Member since:
    Jun 2013

    Posted 18 Jul 2014 in reply to Kiril Nikolov Link to this post

    > 2. I have sent you an example of creating a view on the fly and navigating to it, so please check it out

    Could I also have this sent to me, or possibly see it on a dojo page?

    I assume you can also destroy views using the destroy method?

  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 18 Jul 2014 Link to this post

    Hello Anthony,

    Here is the example that I am referring to in my previous response:

    http://jsbin.com/cutanaxe/1/edit

    As for the destroy method it is well documented here:

    http://docs.telerik.com/kendo-ui/api/mobile/view#methods-destroy

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. jin
    jin avatar
    3 posts
    Member since:
    Sep 2014

    Posted 11 Nov 2014 in reply to Kiril Nikolov Link to this post

    Hi Kiril, 

    is it OK for you to share your example here?

    rgds,
    Jin 
  8. jin
    jin avatar
    3 posts
    Member since:
    Sep 2014

    Posted 11 Nov 2014 in reply to jin Link to this post

    withdraw my post. sorry
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 11 Nov 2014 Link to this post

    Hi Jin,

    The example was shared in the jsBin link below. In case you have any further questions, please do not hesitate to contact us.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready