This is a migrated thread and some comments may be shown as answers.

Creating KendoUI Mobile views "on the fly"

7 Answers 103 Views
View
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 23 Jun 2014, 04:44 PM
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);

7 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 24 Jun 2014, 06:45 AM
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!
 
0
Christian
Top achievements
Rank 1
answered on 24 Jun 2014, 01:42 PM
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); 







0
Anthony
Top achievements
Rank 1
answered on 18 Jul 2014, 11:54 AM
> 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?

0
Kiril Nikolov
Telerik team
answered on 18 Jul 2014, 12:11 PM
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!
 
0
jin
Top achievements
Rank 1
answered on 11 Nov 2014, 07:12 AM
Hi Kiril, 

is it OK for you to share your example here?

rgds,
Jin 
0
jin
Top achievements
Rank 1
answered on 11 Nov 2014, 07:13 AM
withdraw my post. sorry
0
Kiril Nikolov
Telerik team
answered on 11 Nov 2014, 08:37 AM
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!
 
Tags
View
Asked by
Christian
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Christian
Top achievements
Rank 1
Anthony
Top achievements
Rank 1
jin
Top achievements
Rank 1
Share this question
or