Submit Search
Upload
Netflix hybrid mobile app using kendo ui mobile
•
Download as PPTX, PDF
•
1 like
•
1,740 views
Dhananjay Kumar
Follow
Step by step illustration of codes
Read less
Read more
Education
Technology
Business
Report
Share
Report
Share
1 of 13
Download now
Recommended
Introduction to New Age Applications with Kendo UI
Introduction to New Age Applications with Kendo UI
Abhishek Kant
Telerik Kendo UI Overview
Telerik Kendo UI Overview
Ed Musters
Introducing Kendo UI
Introducing Kendo UI
John Bristowe
Kendo ui web
Kendo ui web
Lohith Goudagere Nagaraj
Kendo UI presentation at JsConf.eu
Kendo UI presentation at JsConf.eu
Alexander Gyoshev
Netflix hybrid mobile app using kendo ui mobile
Netflix hybrid mobile app using kendo ui mobile
Dhananjay Kumar
Asp.net mvc - Better User Experience with Kendo UI
Asp.net mvc - Better User Experience with Kendo UI
Lohith Goudagere Nagaraj
Building android and i os apps with visual studio
Building android and i os apps with visual studio
Lohith Goudagere Nagaraj
Recommended
Introduction to New Age Applications with Kendo UI
Introduction to New Age Applications with Kendo UI
Abhishek Kant
Telerik Kendo UI Overview
Telerik Kendo UI Overview
Ed Musters
Introducing Kendo UI
Introducing Kendo UI
John Bristowe
Kendo ui web
Kendo ui web
Lohith Goudagere Nagaraj
Kendo UI presentation at JsConf.eu
Kendo UI presentation at JsConf.eu
Alexander Gyoshev
Netflix hybrid mobile app using kendo ui mobile
Netflix hybrid mobile app using kendo ui mobile
Dhananjay Kumar
Asp.net mvc - Better User Experience with Kendo UI
Asp.net mvc - Better User Experience with Kendo UI
Lohith Goudagere Nagaraj
Building android and i os apps with visual studio
Building android and i os apps with visual studio
Lohith Goudagere Nagaraj
You Know Angular 2, You Know Native Mobile App Development
You Know Angular 2, You Know Native Mobile App Development
Lohith Goudagere Nagaraj
Hello Flutter
Hello Flutter
rihannakedy
WordPress Edmonton - Visual Composer
WordPress Edmonton - Visual Composer
Kihya McComb
Flutter beyond Hello world talk
Flutter beyond Hello world talk
Ahmed Abu Eldahab
開発を加速させるRetty式チーム開発術 Reloaded
開発を加速させるRetty式チーム開発術 Reloaded
Yoichiro Sakurai
Angular 2 - How we got here?
Angular 2 - How we got here?
Marios Fakiolas
KKBOX WWDC17 UIKit - QQ
KKBOX WWDC17 UIKit - QQ
Liyao Chen
Html5 game development
Html5 game development
chanakanakandala1993
レッツ!Google Apps ScriptでTDD(仮)
レッツ!Google Apps ScriptでTDD(仮)
Kei Sawada
Create twitter-ios-app
Create twitter-ios-app
Tsuneo Yoshioka
Flutter beyond hello world
Flutter beyond hello world
Ahmed Abu Eldahab
Ionic - Revolutionizing Hybrid Mobile Application Development
Ionic - Revolutionizing Hybrid Mobile Application Development
Justin James
Building native apps with web components
Building native apps with web components
Denis Radin
Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...
Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...
Codemotion
Angular JS - Develop Responsive Single Page Application
Angular JS - Develop Responsive Single Page Application
Edureka!
The Future of ASP.NET
The Future of ASP.NET
Microsoft Developer Network (MSDN) - Belgium and Luxembourg
Flutter beyond hello world GCDC Egypt Devfest 2019
Flutter beyond hello world GCDC Egypt Devfest 2019
Ahmed Abu Eldahab
" Angular 2.0", Андрей Альперт, DataArt
" Angular 2.0", Андрей Альперт, DataArt
DataArt
Live Demo : Trending Angular JS Featues
Live Demo : Trending Angular JS Featues
Edureka!
Base register login forgot password swift 3 template
Base register login forgot password swift 3 template
Harshal Lonare
Slides of webinar Kendo UI and Knockout.js
Slides of webinar Kendo UI and Knockout.js
Dhananjay Kumar
Nodejsvs
Nodejsvs
Dhananjay Kumar
More Related Content
What's hot
You Know Angular 2, You Know Native Mobile App Development
You Know Angular 2, You Know Native Mobile App Development
Lohith Goudagere Nagaraj
Hello Flutter
Hello Flutter
rihannakedy
WordPress Edmonton - Visual Composer
WordPress Edmonton - Visual Composer
Kihya McComb
Flutter beyond Hello world talk
Flutter beyond Hello world talk
Ahmed Abu Eldahab
開発を加速させるRetty式チーム開発術 Reloaded
開発を加速させるRetty式チーム開発術 Reloaded
Yoichiro Sakurai
Angular 2 - How we got here?
Angular 2 - How we got here?
Marios Fakiolas
KKBOX WWDC17 UIKit - QQ
KKBOX WWDC17 UIKit - QQ
Liyao Chen
Html5 game development
Html5 game development
chanakanakandala1993
レッツ!Google Apps ScriptでTDD(仮)
レッツ!Google Apps ScriptでTDD(仮)
Kei Sawada
Create twitter-ios-app
Create twitter-ios-app
Tsuneo Yoshioka
Flutter beyond hello world
Flutter beyond hello world
Ahmed Abu Eldahab
Ionic - Revolutionizing Hybrid Mobile Application Development
Ionic - Revolutionizing Hybrid Mobile Application Development
Justin James
Building native apps with web components
Building native apps with web components
Denis Radin
Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...
Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...
Codemotion
Angular JS - Develop Responsive Single Page Application
Angular JS - Develop Responsive Single Page Application
Edureka!
The Future of ASP.NET
The Future of ASP.NET
Microsoft Developer Network (MSDN) - Belgium and Luxembourg
Flutter beyond hello world GCDC Egypt Devfest 2019
Flutter beyond hello world GCDC Egypt Devfest 2019
Ahmed Abu Eldahab
" Angular 2.0", Андрей Альперт, DataArt
" Angular 2.0", Андрей Альперт, DataArt
DataArt
Live Demo : Trending Angular JS Featues
Live Demo : Trending Angular JS Featues
Edureka!
Base register login forgot password swift 3 template
Base register login forgot password swift 3 template
Harshal Lonare
What's hot
(20)
You Know Angular 2, You Know Native Mobile App Development
You Know Angular 2, You Know Native Mobile App Development
Hello Flutter
Hello Flutter
WordPress Edmonton - Visual Composer
WordPress Edmonton - Visual Composer
Flutter beyond Hello world talk
Flutter beyond Hello world talk
開発を加速させるRetty式チーム開発術 Reloaded
開発を加速させるRetty式チーム開発術 Reloaded
Angular 2 - How we got here?
Angular 2 - How we got here?
KKBOX WWDC17 UIKit - QQ
KKBOX WWDC17 UIKit - QQ
Html5 game development
Html5 game development
レッツ!Google Apps ScriptでTDD(仮)
レッツ!Google Apps ScriptでTDD(仮)
Create twitter-ios-app
Create twitter-ios-app
Flutter beyond hello world
Flutter beyond hello world
Ionic - Revolutionizing Hybrid Mobile Application Development
Ionic - Revolutionizing Hybrid Mobile Application Development
Building native apps with web components
Building native apps with web components
Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...
Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...
Angular JS - Develop Responsive Single Page Application
Angular JS - Develop Responsive Single Page Application
The Future of ASP.NET
The Future of ASP.NET
Flutter beyond hello world GCDC Egypt Devfest 2019
Flutter beyond hello world GCDC Egypt Devfest 2019
" Angular 2.0", Андрей Альперт, DataArt
" Angular 2.0", Андрей Альперт, DataArt
Live Demo : Trending Angular JS Featues
Live Demo : Trending Angular JS Featues
Base register login forgot password swift 3 template
Base register login forgot password swift 3 template
More from Dhananjay Kumar
Slides of webinar Kendo UI and Knockout.js
Slides of webinar Kendo UI and Knockout.js
Dhananjay Kumar
Nodejsvs
Nodejsvs
Dhananjay Kumar
Node.js
Node.js
Dhananjay Kumar
No SQL with Kendo UI
No SQL with Kendo UI
Dhananjay Kumar
Patterns in JavaScript
Patterns in JavaScript
Dhananjay Kumar
Presenter deck icenium hol
Presenter deck icenium hol
Dhananjay Kumar
Bringbestoinyou
Bringbestoinyou
Dhananjay Kumar
Java script
Java script
Dhananjay Kumar
Windows azure mobile service
Windows azure mobile service
Dhananjay Kumar
Test studiowebinaraugcodedstep
Test studiowebinaraugcodedstep
Dhananjay Kumar
Functions and Objects in JavaScript
Functions and Objects in JavaScript
Dhananjay Kumar
Create Hybrid Mobile Application with Icenium and Kendo UI Mobile
Create Hybrid Mobile Application with Icenium and Kendo UI Mobile
Dhananjay Kumar
Cloud Based Enterprise Apps using Everlive
Cloud Based Enterprise Apps using Everlive
Dhananjay Kumar
A Look into Automated Web UI Test
A Look into Automated Web UI Test
Dhananjay Kumar
Windows phone 8 app using Kendo UI
Windows phone 8 app using Kendo UI
Dhananjay Kumar
Cross platformmobileapp
Cross platformmobileapp
Dhananjay Kumar
Windows aazuremobileservices
Windows aazuremobileservices
Dhananjay Kumar
Rad controlforwindows25thapril
Rad controlforwindows25thapril
Dhananjay Kumar
Data asservice
Data asservice
Dhananjay Kumar
WCF for begineers
WCF for begineers
Dhananjay Kumar
More from Dhananjay Kumar
(20)
Slides of webinar Kendo UI and Knockout.js
Slides of webinar Kendo UI and Knockout.js
Nodejsvs
Nodejsvs
Node.js
Node.js
No SQL with Kendo UI
No SQL with Kendo UI
Patterns in JavaScript
Patterns in JavaScript
Presenter deck icenium hol
Presenter deck icenium hol
Bringbestoinyou
Bringbestoinyou
Java script
Java script
Windows azure mobile service
Windows azure mobile service
Test studiowebinaraugcodedstep
Test studiowebinaraugcodedstep
Functions and Objects in JavaScript
Functions and Objects in JavaScript
Create Hybrid Mobile Application with Icenium and Kendo UI Mobile
Create Hybrid Mobile Application with Icenium and Kendo UI Mobile
Cloud Based Enterprise Apps using Everlive
Cloud Based Enterprise Apps using Everlive
A Look into Automated Web UI Test
A Look into Automated Web UI Test
Windows phone 8 app using Kendo UI
Windows phone 8 app using Kendo UI
Cross platformmobileapp
Cross platformmobileapp
Windows aazuremobileservices
Windows aazuremobileservices
Rad controlforwindows25thapril
Rad controlforwindows25thapril
Data asservice
Data asservice
WCF for begineers
WCF for begineers
Recently uploaded
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17
Celine George
Biting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdf
adityarao40181
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
GeoBlogs
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media Component
InMediaRes1
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
SoniaTolstoy
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdf
Mahmoud M. Sallam
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Sapana Sha
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
Steve Thomason
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
9953056974 Low Rate Call Girls In Saket, Delhi NCR
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
JhengPantaleon
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
pboyjonauth
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
UnboundStockton
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
ssuser54595a
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
KarinaGenton
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Celine George
Class 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdf
akmcokerachita
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
pboyjonauth
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Krashi Coaching
Recently uploaded
(20)
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17
Biting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdf
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media Component
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdf
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Class 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdf
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Netflix hybrid mobile app using kendo ui mobile
1.
Netflix Hybrid Mobile app
using Kendo UI Mobile Dhananjay Kumar Customer Advocate Telerik India @debug_mode
2.
Step 1 :
Add Reference
3.
Step 2 :
Create layout
4.
Step 3 :
Initialize Kendo Mobile
5.
Step 4 :
Create Views
6.
Step 5 :
Create Data Source
7.
Step 6 :
Create Template to show Movies Title
8.
Step 7 :
Create List View to display Movie Title
9.
Step 8 :
Define CSS for Movie Title
10.
Step 9 :
Create Data Source for Movie detail view
11.
Step 10 :
Create Template for Movie detail view
12.
Step 11 :
Create View for Movie detail view
Editor's Notes
<meta charset="utf-8" /> <script src="kendo/js/jquery.min.js"></script> <script src="kendo/js/kendo.mobile.min.js"></script> <script src="scripts/hello-world.js"></script> <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <link href="styles/main.css" rel="stylesheet" />
<div data-role="layout" data-id="mobile-tabstrip"> <header data-role="header"> <div data-role="navbar"> <a data-role="backbutton" data-align="left">Back</a> <span data-role="view-title"></span> </div> </header> <div data-role="footer"> <div data-role="tabstrip"> <a href="#loginView" data-icon="action">Login</a> <a href="#movieTitleView" data-icon="more">Browse</a> <a href="#searchView" data-icon="search">Search</a> </div> </div> </div>
<script>var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip", initial: "loginView" }); </script>
<div data-role="view" id="movieDetailView" data-title="Details"> <h1>Movie Title View</h1> </div> <div data-role="view" id="loginView" data-title="Login" > <h1>Login View </h1> </div> <div data-role="view" id="searchView"> <h1>Search View</h1> </div>
varmovieTitleData;movieTitleData = new kendo.data.DataSource( { type: "odata",pageSize: 30,endlessScroll: true, batch: false, transport: { read: { url: "http://odata.netflix.com/Catalog/Titles",dataType: "jsonp", data: { Accept: "application/json" } } } }); function showMovieTitle(e) {movieTitleData.fetch(); }
<script id="movieTemplate" type="text/x-kendo-template"> <a href="\\#movieDetailView?Id=#:data.Id#" class="km-listview-link" data-role="listview-link"> <h4>#=data.Name.substring(0,15)#</h4> <imgsrc= #=data.BoxArt.MediumUrl# /> </a> </script>
<div data-role="view" id="movieDetailView" data-title="Details" data-show="showMovieTitle"> <ul id="Ul1" data-source="movieTitleData" data-endlessScroll="true" data-template="movieTemplate" data-role="listview" data-style="inset" > </ul> </div>
<div data-role="view" id="movieDetailView" data-title="Details" data-show="showMovieTitle"> <ul id="Ul1" data-source="movieTitleData" data-endlessScroll="true" data-template="movieTemplate" data-role="listview" data-style="inset" > </ul> </div>
function showMovieDetail(e) {var view = e.view;varmovieDetailTemplate = kendo.template($("#movieDetailTemplate").text());var query = view.params.Id.toString();varmovieDetails = new kendo.data.DataSource({ type: "odata",serverPaging: true,serverFiltering: true,pageSize: 50, transport: { read: { url: "http://odata.netflix.com/Catalog/Titles",dataType: "jsonp", data: { Accept: "application/json" } } }, filter: { filters: [{ field: "Id", operator: "eq", value: query}] }});movieDetails.fetch(function () {var item = movieDetails.at(0); console.log(item); view.scrollerContent.html(movieDetailTemplate(item));kendo.mobile.init(view.content); }); }
<script id="movieDetailTemplate" type="text/x-kendo-template"><h2>#=data.Name#</h2><imgsrc= #=data.BoxArt.LargeUrl# height=1 width=1/></br></br><h4> #=data.Synopsis# </h4> <a data-role="button" data-rel="actionsheet" href="\\#shareonSocialMediaActionSheet">Share Feedback</a> </script>
<style scoped> #movieTitleView h4 { display: inline-block; font-size: 1.1em; margin: 1em 0 .5em 1em; } #movieTitleViewimg { float: left; width: 4em; height: 4em; margin: 0; -webkit-box-shadow: 0 1px 3px #333; box-shadow: 0 1px 3px #333; -webkit-border-radius: 8px; border-radius: 8px; } #movieDetailViewimg { float: none; width: 15em; height: 12em; margin: 0; -webkit-box-shadow: 0 1px 3px #333; box-shadow: 0 1px 3px #333; -webkit-border-radius: 8px; border-radius: 8px; } </style>
<style scoped> #movieTitleView h4 { display: inline-block; font-size: 1.1em; margin: 1em 0 .5em 1em; } #movieTitleViewimg { float: left; width: 4em; height: 4em; margin: 0; -webkit-box-shadow: 0 1px 3px #333; box-shadow: 0 1px 3px #333; -webkit-border-radius: 8px; border-radius: 8px; } #movieDetailViewimg { float: none; width: 15em; height: 12em; margin: 0; -webkit-box-shadow: 0 1px 3px #333; box-shadow: 0 1px 3px #333; -webkit-border-radius: 8px; border-radius: 8px; } </style>
Download now