 You'll see there's a Fiori theme that we built exclusively for anybody who's back into the SAP. They want to build a front end, connect with the SAP services, and then still give the SAP Fiori look. So our team has that look and feel. Anything else? I have Dojo, I have Fiori, I have JQBudget, YUI. Anybody else has played around with any other frameworks? Nobody's saying this. That's why. I'm trying to see if anybody has heard the name, because that's the whole talk about this. So I put up the slide over there. OK, Bootstrap, yeah. Yeah, to some extent. But still, I feel like Bootstrap is only the CSS. You've got to have your HTML, and then Bootstrap does the magic. But it doesn't give you anything else other than that. It's just the colored thing that I see Bootstrap as. I have not started the session, don't worry. I'm just interacting. It's already started now. We're still waiting for some more guys to come in. By the way, if I say next 45 minutes is death by PPD, will you still sit? That's a tough question, right? You cannot say yes, you cannot say no. No, I'm not going to do that. And we have an internet challenge, so we'll see. I did prepare something. Everything inside, I knew. I wouldn't get the connectivity in the start servers. How many of you know this? What will it do now? It's a static server. I've seen it somewhere. You've attended some other event, new maps. So basically, what I'm trying to do is my, I don't know, if you ever had this need that you're quickly building some HTML for completely static web pages. But you need a web server to make that feel. I come from .NET world. So for us, the day in and day out, it's all about Visual Studio and then you do file new ASP.NET application. But that's too heavy for me, like I have to wait for the ID to do everything. All I needed was, I'm creating an HTML file. I just need localhost colon 8080 slash index.html. I want to do that, right? So believe me or not, I figured out about this only like at three months back. I was wondering how the hell do you do this, right? And NPM, as you rightly said, is a cool thing. There's a bunch of things like this. So you install this NPM package called HTTP-server, right? I'm going to click on this now and it says, I'm now serving an HTTP server on so and so, so and so forth. Okay, so now if I had an index.html, all I need to do is localhost colon 8080 slash index.html. I'm like a web app now. You know, there are certain needs where you just need to create a static application. It's a static HTML, but I need that web serving capability kind of thing. So that's something that, you know, I figured out and it's cool to play around with that. And we are 2.30, so it's still four minutes, but let's start. So I hope everybody's okay for me to start. Okay. So we're going to talk today about Kendo UI. It's an open source, Kendo UI core in particular. It's an open source framework. Pretty much HTML file based, supports HTML file, supports a lot of, you know, browsers that are out there, i7 and above, Firefox, Firefox, ESR, Chrome, all those things. And it's an open source package from a company called Tellerik. And what is unique about this? It's fast, light and complete. That's how we like to, you know, call this. Fast because, you know, we did spend a lot of time understanding how jQuery works. And then here's, you know, kind of a, if anybody comes in and then talks about a new framework, it's like, oh, it's a completely new language or it's a completely new thing that I need to learn. So that's one thing that we addressed. We knew that jQuery was a super hit like three years ago, four years ago, everybody started jumping on the jQuery. And we did not want to reinvent anything new. We want to base it on jQuery. So what we have done is, on top of jQuery, we give you an enterprise class, you know, controls, like starting from auto complete to whatnot. But it's completely open source and it's built on jQuery. You know jQuery, you know Kendo UI. So that's what we're gonna see today. As you see there, JS framework, agnostic, no lock-in for your question, backbone, yes. So there are certain open source libraries that community has written wherein you can work with Kendo UI with backbone, Kendo UI with Angular, Kendo UI with, I think, VTR or something. So those kind of things. So there's no lock-in. What we provide you is a complete framework. That's why when I say complete, it's all about, it's a controls, it's a framework. And of course, all the underlying and the pinning things that you need. So it's about web controls, it's about mobile controls, it's about framework. So we give you all those three things out of this framework. And of course, there's a jQuery conference as you write this and then we're talking about Angular, but Angular is hip, cool. So we gotta talk about that. So we do integrate with Angular and we provide out-of-the-box directives, as they call it in Angular world, for all of our controls. So you don't have to do anything. Just if you want to, you've got an Angular heavy in your projects, but as I said, Angular does not give you any UI. Angular does not have a date picker. What do you do for date picker if you're an Angular project? You're gonna go search for, oh, is there any Angular directive that somebody has written? And that somebody, mind you, would have done it over a weekend as an hobby project. And you have a deadline next week. Would you go ping game? Hey, you know what? You're using in our project, your directive, it's not working, right? It's like, dude, it's open source, go figure out. Thousand lines of code. Deadline is tomorrow, right? Whereas here, the open source that I'm talking about is actually done or written by the engineers at our company, Delrick. And we accept the community contribution, but the core work is actually done by our engineer. So then we are open sources. So any bug that somebody figures out in our, by our customers, it goes right into the package and you get it. So it's not a weekend, somebody's weekend project. That's what I meant to say. Of course, mobile specific widgets are also available. You can create a complete hybrid mobile application using Kendo UI. Pretty similar to Ionic. Ionic bets on Angular. We are like, okay, we give you whatever you like. What is it? HTML5, plain HTML, JavaScript. You know jQuery, you know JavaScript, just use that. No extra things that you need to learn when it's like Angular or anything. Plus, of course, that support, adaptive rendering, everything is available as part of the framework. That's why we say modern comprehensive HTML5 JavaScript framework. So you would ask, like, why Kendo UI? As I said, everything you need in one package. Web control, mobile framework, mobile controls, web framework, everything is available there. So today's world, it's only two things. Either a mobile page or a mobile app or a web page. So you have everything. You don't need to go beyond different frameworks is what I'm trying to say. You want data binding? You will go with backbone, maybe. But what do you do for UI? You'll go with JQ widget or YUI or whatever it is. Here's the thing that I've been in the web world for 14 years. I won't talk about this if it did not fly by me. I've been in the web world for quite some time. And every time you bring in an additional framework, an additional API into your project, your headache just doubled. OK? So try to deal with the less headache in your project than with that many. Even today, not many people agree with this. But API framework one does not work very well with framework two. Framework two does not work very well with framework three. JQuery has gone to 21 or whatever it is. But whatever open source plugin you are using, he did it in a full enthusiasm on a weekend. That's it. He left it. You have to increase your JQuery version in your project. But the plugin won't go out. Why? Because it's not compatible. So you start spending a lot of night out or whatever it is to make it work. So that's what I say. Think about how can you cut down your headaches with whatever amount you can. And here, with this package, what happens is, you just have one headache. We give you the framework. We give you the MVBM. We give you the globalization. We give you the data source, whatever you need. Everything is here. Plus the mobile widgets or the controls, as we call. Plus the web widgets, whatever you need. So we're going to take a look at that. So what's in the box? Application framework. Yes, Kendo UI has its own core pillar, as we call it. It's an application framework. Plus web UI, the controls for the web, the web page. Mobile UI for generating or developing the hybrid UI. So when it comes to, I'm extremely sorry. I thought the green is going to look cool. It's looking cool on my, this one. But let me see if I can do a big jugato, as they call it. There you go. Some reason I did not remove the back whatever text was there. I'm not sure what happened to me, but I just kept it. So this is what we give you in terms of the UI. As simple as an autocomplete. I'll show you one demo where with one line of code, you can create a complete control like this. The autocompletes or button, calendar, color picker, Kumbh box, these, according to me, are like the bare bones of your web application, on a web page. You want, so this is typically what happens to me whenever I've gone to customer meetings or anything. They will never worry about whether you have done your functionality or not. There's one guy always in your client side or the customer side who always goes like, you see that blue color? Now, we've got to remove that blue color. The whole meeting is behind that blue color. The whole meeting is behind a small icon. The whole, whatever, the meeting is ruined. You spent whole week to implement a functionality. Nobody cares. So that's where we come in. We give you slick, neat-looking controls starting from a button to what not. And then, of course, from a mobile UI, we give you the bare bones that you require to actually create a hybrid mobile application. Action sheet, button group, dryer, forms, list view. Mind you, there is no AngularJS or anything. It's plain HTML. You know HTML5, data-roll. How many of you remember data-attributes? Only two in the room. If it is HTML5, the only good thing that has happened is data-attribute. You couldn't do something like anchor, low-heat is equal to GN. You couldn't do that. Browser would say, what the hell are you writing? But now I can say data-low-heat is equal to GN. It's a valid attribute. So what we have done is we are completely working based on that data-attribute. We go look at all the elements, and then wherever data- attributes is available. And if you have our keywords, we do the magic for you. So basically, you can say, if you needed a list view, you take a UL, data-roll is equal to list view. It's a mobile list view for you when it renders. That's how we do with the HTML5. So this is as simple as it can get. This is a component known as autocomplete. As you can see here, you type that. You get whatever the user has typed. Any data that matches that shows that. So as simple as this, to the mobile action sheet, the mobile application that you can do like this. So the Kendo UI mobile framework is adaptive in nature. What you're seeing actually is an iOS action sheet coming up. But it's our control. And it looks, feels, behaves like an iOS. Same code. When it runs on an Android, it's going to look like an Android action sheet. If you know Android action sheet comes in the middle as a dialogue, whereas iOS comes from the bottom. So we know that adaptive rendering that needs to happen on different platforms. And then we do it for you. Now, as I said, I've been in the web world for 14 years. And then I've been working for Telerik from the last three years. And then when it came out, I was skeptical, like, OK, there we go. We have another framework. We already had too much. So why are we coming up with another thing? When I saw something like this, that is, forget the controls. Forget button, forget calendar, forget what not, all the controls that you have. For me as a developer, as a JavaScript developer, what stuck was these things. These are what we call as an application framework elements that we have. The data source that you see, how many of you have done a data ping to your web service? You will always say dollar.ajax, a URL, a success, a failure. That's fine. But what happens inside the success? The data that came over the wire is a plain text. Can you use the plain text as is? What do you do? You do JSON.parch. How many times have you done that? Is it really necessary? Shouldn't it somebody, if you're saying like a framework, shouldn't it automatically do that for you? That's what our data source does for you. You just let me know the URL. He's going to get you the array for you, JavaScript array for you. Not only that, he allows you to actually do a lot of things like sorting, paging. We're going to see some of these things. Me, we am. Somebody was asking about backbone. So when you go with backbone, backbone is only for data binding. What do you do for the UI? You go figure out one more headache. Maybe JQ, UI, YUI, JQ, whatever. But you've got to figure out something to give you a cool-looking UI. Backbone will say, I'm going to do whatever I'm supposed to do. That's data binding. But we're going to do the UI. So that's where we come in. So our MEVM, what it does is it gives you that data binding on the JavaScript side and does a two-way binding with the control. And we give you simple syntax like data dash bind and then all those things. We're going to see that templating. We looked at jQuery templating. And most of you would know jQuery templating did not fly well. It came. It was cool. Everybody started looking at it. And then somehow, sometime, they said, oh, it's slow. And then you don't see jQuery templating now. We looked at what happened. And then we figured out there are some performance things that we can do under the hood. And then what we did was, it's an inspiration from the jQuery templating. And then we picked up. And then we have our own templating engine, which is fast. And then it is performance globalization. Just include one of our globalization JavaScript files. And if you have a calendar, you just need to show in Arabic. Just include the Arabic JavaScript file that we give you. Set a culture as AR, AR, whatever. And that's it. All of our controls automatically become globalized. You don't have to write anything. I'm not talking about the dynamic text. I'm talking about anything, the controls that we have that needs to globalize. Yes, you can do that. For example, numeric text boxes, the thousand separator, all those things. Use our globalization JavaScript file. Set the culture. Done. You're done. Single page application. It's popular. So we give you the same router views, components, and all those things. I'm not going to go deep into any of these things because we don't have time for 45 minutes. Of course, you can see all these things. Now let's code. So first, of course, we're going to go set the reference. As you can see here, we're going to get you a couple of stylesheet. The first one is required. It's common.win.css. If you're not able to see, just let me. So that's the common.win.css. And then kendo.default.win.css is actually the theme. I'm setting a default theme. Out of the box, we give you 11 themes to pick, starting from Office 365 to Fiori to Material Black, Material Light, Blue Opal. You name it. So there are 11 themes that you can use. All you need to do is kendo.tiname.win.css. Now the stylesheet is done. If you see here, from a JavaScript perspective, as I said, we have based it on jQuery. So include jQuery first, then include our kendo.ui.core.win.js. Done. You're done. So now what I've done is I've already gone ahead. I used Sublime. And how do you get it? Sorry, I didn't talk about that. So how do you get our particular things? So what you can do is, I've already installed, but just to let you know, so you can go to whatever folder wherever your project is. Mine is here. So all I need to do is, I just need to say Bower, and then kendo.ui.core, Bower install, kendo.ui.core. How many of you are familiar with Bower? So NPM is for the node side of the packaging manager, like on the server side. Bower is your client-side script manager. It's like a repository of all the open source packages that you can think of. All you need to do is go to command front, install. I think you need to install Bower through the NPM. I never understood that. But whatever. So you've got to install NPM first, then install Bower, come to the command front, and say, Bower, install kendo.ui.core. That's it. And it installs the kendo. So what I've done already is, if you see here, so I have the Bower components, then kendo.ui.core. Since we depend on jQuery, it goes and then puts jQuery. And of course, I've put up the bootstrap here. And we give you the complete source code if you need. If you don't need, fine. Just write a grunt or a grub task to take whatever you need, and then put it to the distributor or a lib folder or whatever you want to do. But the JavaScript files are here. The styles files are here, inside the JS and styles. And you need jQuery, and I've put up bootstrap. Now what I'm going to do is, I'm going to just create a new file, and I'm going to call this guy, let's say, demo1.html. I'm running an unregistered version, not a problem. And I have my own thing. So what I've done is, let me just do this, and then maybe control plus. I hope it's visible. So the same thing that I've done, bootstrap, kendo common, and I'm using a theme called blue opal. And then, of course, I have the jQuery, min.js, kendo ui code, min.js. Now, remember I told you know. So this is first setting the reference. Then how do I use kendo ui? Well, you know jQuery. Everybody knows jQuery. So you put an element, dyd calendar, and then all you need to do is, the way you select the calendar is, you say dollar hash calendar, the id. Now, just go on and say, dot kendo control name. So I want a calendar. So all I need to do is, dot kendo calendar. Let's do that. So now I'm going to go and then do div. And then I need the id, maybe kcal. And I'm going to come to the script, and then I will say dollar, one of our evangelists, what he did was, he created a snippet for this, and he said it as live. Nobody got that, so that's fine. Nobody get it? You got it? If you are a JavaScript developer, serious hard code. No, forget that. Every page, that's the first thing that you do with your JavaScript. That's life for you, isn't it? That's why he created, I mean, I was watching, we had a webinar, and then he was presenting, and then he said, live tab, and then boom. I picked him later, and then said, dude, what was that? He said, yeah, that's the code snippet. That's it. But you said, like, yeah, that's my life. So I've said a document.ready, so I'm going to now do, I mean, it's basically, this is nothing, but it's like an immediately invoked function, expression, so I'm just invoking that function as soon as the, yeah. So I mean, basically, when it reaches this, it's going to fire this function. You can do document.ready, and then a function, so that it's listening to the document.ready event, and then it fires the function, or I know that I've reached to the bottom, and then there's nothing else to take care of it, so I can do that. So, whichever way you want. So you know jQuery, so using jQuery, all you do is you say kcal, and then all I need to do is kendo calendar. That's it, right? This is as simple. And what is the output? Let me open up my, by the way, I'm IE guy, so you may be Chrome. Local post, and then I think I said demo1.html. I'm crossing my fingers, you can pick it up. Yeah, I think it's going to be because it's running at 8080. So just give me a second. It's hpp local post 8080 demo1.html, and I'm extremely sorry, I know you cannot see that. Let me see if I can change maybe a theme. Ah, I'm going to say moonlight. Let's try this guy. But I'm not making up, we do have a theme called moonlight. There you go. So just imagine, I don't know, I mean I don't have, I have nothing against YUI or whatever it is, but what I'm trying to say is this is looking professionally neat. If you go and then take any jQuery, calendar, or anything, you can immediately figure out it's not a professional level grade, the plug-in has been done. So not only that, you saw this, right? So I have moonlight, so let's make our SAP guys a little happy, maybe. So I'm going to say peory. You cannot see that, right? I'm sorry, the projector is very bad, but it's looking good on my screen. So that's as simple as what you can get. As I said, you know jQuery, you know Kendo UI. There's nothing new that you need to learn. All you need to know is what are the controls available? And if you see the controls available, I can do any of these things, any of these things. Button, calendar, color picker, let's do a date picker. You know, that's one of my kind of a nitty gritties that I keep on looking at any framework. How does the date picker come up, right? So I'm going to go br, and then I will say input. And I'm going to say id is equal to k date picker. And that's it, right? And then now I can come back here, and I can do this. And what is it? Dollar hash k date picker, and what do we need? We need a date picker, right? So all you need to do is dot kendo date picker, right? Now if I come back here, and we do have a date picker. I think I got to go back to moonlight. Otherwise you guys cannot see it. So let me go back to that. I'm sorry about the projector. Correct. So the way we work is, by the way, that's the date picker, right? Let's take a look at how cool it looks like. So his question is, he has gone into the source, and then he sees that the distributed files. And then he sees that I have used only one file, and that is kendo.ui.core.min.js, whereas there are separate files that we also ship, that is kendo.calendar.min.js, or kendo.button.min.js. So you may not want to include everything, the whole package, the kendo.ui.core.min.js. You don't want to include everything. So what we give you is, we give you AMD, the modularized thing. You want only calendar in a page? Just include only calendar.js, and then start working with that. So it's up to you. With this, what happens is it's probably like 100 kb. If you're OK, fine. Otherwise, people start using what you call, forgot the name. There's a JavaScript framework which gives you that loading, injection kind of thing. Require.js. So what you can do is you can do a require.js, and then say, in this page, I need that guy. You know, one specific guy. And then come back. So what require.js will do is, before you and you can call kendo.calendar, you will make sure that the calendar.js is already there. But you will have to figure out from our documentation what all other JavaScript files does the calendar need, and then load everything. I'm OK with the kendo.ui.core.min. So I'm doing that. So not only that, I can convert this into a date time picker. There you go. I have a time portion, and then I have a date portion. No, this is web. So it won't, because that's what we are doing. We are doing all the magic. Let's open it in Chrome. I know what you're asking for. But what I'm trying to tell you is, when you use ours, we will make sure it looks good on everywhere. So there you go. I'm on Chrome. Forget what Chrome supports internally or whatever or not. But your site runs the same on IE or Chrome or whatever it is. And it's an HTML5 app. If you need native, then you don't need any framework. Now, it's basically the way you would have to do that is, you see what I'm doing? I'm writing a single line of code. I'm converting this guy into a so-and-so guy. So what you will need to do in that case is come back here and then say type is equal to date and comment out this line. So you've got to figure out where you are running. Are you IE? Are you this one? And then do this. So now when I do this and then come back here and then load this guy, I don't know why he didn't come back. So yeah. Is this good? Do people like that? You like that? I have no comment. My mouse is back. So this is really interesting. I don't know how it is coming up. But let's take this calendar versus this calendar. Mobile is different. Mobile is different. We'll come back to that. I have a completely different theory for mobile pages. I do not buy the fact when your business comes and says, you know what, create one web page, use bootstrap, let it run on web browser, let it run on mobile browser. I'll fight with him and I'll make sure I'll have two different pages. You do not have to send 100 KB for a mobile phone. You send only one KB, which is required for that mobile phone, otherwise the bandwidth. I have a different theory. Let's come back to that. I'm now derailing my scripts. Let me come back. So we saw whatever. So basically anything is dot kendo, dot kendo, and then the control name. So let's quickly take a look at, oh, there was a question. Sorry. Good. Sure. So all the hooks are available, wherein you can come in and say, hey, when you're displaying that, the format I need is so-and-so. So by default, it takes US, I mean month, date, and then whatever it is. But yes, you can come in and say, hey, format is this. So whenever you're putting the date there, I want you to use this. Whenever you're reading it, it will be in this format. So you can pretty much do all those things. So where you provide all this? So if you see here, let's say when I load this page, it's empty, right? What happened? I commented out. Let me come back. So when I load this, notice that it is blank. Maybe I don't need that way. What I need is I want the current date to be populated by default. So all you need to do is just come back here. And we provide you option-setting mechanism. So that is, you just come in here. The kendo date picker control exposes a value property. You just come in and say, new date off. Now when I refresh, you will see the current date coming up. Like this, there are a lot of API methods, properties available, which you can make use of it. I'm not getting too deep inside here now. We saw this. So now we know how to do all these things. Now one more thing. Sometimes it's fine to do this. But if you are in HTML5, do it the HTML5 way, right? So what is HTML5 way? So let's take a look at it. So I know that I wanted this guy to be converted into, let me zoom up a little bit. Is it fine? You guys can see this? So wouldn't it be cool? I'd say this. So I just have to do this. And maybe I want to do this. Data dash roll is equal to date weaker. And I don't want to do this whole stuff. So whatever I till now have done is an explicit declaration or explicit creation of the controls. You can just come in and say, like, you know, kendo.init, document.body. So all you're doing is you're telling kendo engine to actually, hey, you know what, go through the body. Wherever you see data dash roll, convert it. If you understand that there is somebody needing my control, you convert that. So I'm going to just come back here and then refresh. You will still see the same. There's no change. Now, remember we had set the date, but there's no date now. So a couple of ways you can do it. You can either go back to this guy and whatever properties that I support or I expose, I can just do data dash property 1, property 2, property 3. That's what cool about HTML5 is all about. So I can come back here and then say, like, you know, 7, 15. No, today is 23rd. I don't know why I'm in 15. I come back here, and you will see the date coming up. Similarly, you have an event. You want to kind of grab onto that event. You can do that, data dash bind. And then we'll do a couple of, see how, I don't know, how I'm doing on the phone. I have only 15 minutes. Let me run fast. So that was the thing about the configuration. You can do, like, endow.init and then do this way. Here is an example where, you know, the color palette supports properties like columns, palette. I'm giving all the, I'm setting all the data that I need or the properties that I need at the instantiation time. Or you can do this. If you see there, it's the same. Data dash roll, color palette. Data dash columns, data dash palette. And then I'm providing everything implicitly, right? And let's talk framework. So MEVM, let's quickly do something. I'm not sure if I have time to code it. So what I'm going to do is, I'm going to cheat now. I've already created everything. I'm just going to walk through that. So fairly simple. What I've done is, there is a dropdown. So it's like expense calculator or expense form fill up. I have a select, and then what I've said is, I want this to be converted into a dropdown list. And where is the, so it's a select. It's a dropdown, and it needs a certain item. So where is it coming from? Notice what I've done. I've said data dash bind type. And then select always has a value, you know, selected value. So I've said value colon expense type, right? And then I've said, hey, in the source, that is, this is an array of data. I want you to use name properties. So take a look at how we have done. Data dash text dash fill. So that's the property of the dropdown list. I want you to use name property to show to the user. But the value property should be the value column that you need to use. Similarly, here is a text box where, I'll come back, I'll come back to that. So there is a view model or whatever, MEBM that we do. I'm just explaining the markup part of it. And then I've said, like, you know, this is a plain text box. I don't need anything, but the value should come from somebody. So I've said data dash bind value merchant. Now here's the interesting thing. I know this has to be an amount. So that means number. So we have numeric text box. Data dash roll, numeric text box. Where's the value? Okay, somebody's gonna hold the value. And then of course there's a button. And notice this. Gone are the days where you have to do like, you know, dollar has some button dot click and then you give a function. Rather do an HTML5 where that is data dash bind. And then I'm actually binding to a method called create. We'll see where that is. And of course there is a table where I will, as soon as somebody goes in and then, yeah. We'll see that. We'll see that. You'll see that. So then what I'm doing is, as soon as you come in and then enter a new expense, I'm gonna just show it out inside a table. Don't ask me why I have to take a table, you know, when you could have done, but let's go with the demo. So here it's interesting. What I've done is, I have a T body. And for the T body, I'm saying like, hey, you're gonna get a store, which is nothing but an array of expenses. And the template for each row that you need to show is like this. So this is where Kendo UI templating is coming into the picture now. That's all I've said. So where is the template? The template is fairly simple. I may have hundreds of rows, right? So all I'm saying is I'm blueprinting each item. What I say is, hey, the template is nothing but a TR and three TDs, short type merchant and amount. Now how do we bind this? So this fine. So we have done the markup everything. So here is where we give you out of the box in Kendo UI that, you know, MVVM concept or the model view binding. You know, basically don't go by MVVM as a acronym or anything. It's just data binding in JavaScript. I have a model. So I've created a model. So what we give you as part of MVVM framework or the particular terminology framework is an observable object. So all you're creating is a Kendo observable. Look at here. I've kept my expenses as an empty array to start with. And then here is the type. So the dropdown list needs to get a type. So I have all the types here. Name, foot, bills, merchant, all those things. By default, I've set the expense type to be, you know, set to foot. And then the merchant and amount are just to hold the current item that has been typed out by the user. And then here is the function. So this is how it is. Data dash bind, you asked about create, right? Can I do an HTML like on click? Yes, you can. But you don't have to because that's the magic of the binding. You don't have to explicitly call, create the model, have a function, go there, data bind, on click, create. It automatically calls that function. You don't have to explicitly do it. That's where the binding concept comes into picture. In create, all I'm doing is notice how I'm getting that expenses array that I've created, which is empty here to start with. And then I keep pushing, push a new object. And then I reset it, right? So now if I come back, that's it. And then only last thing, the missing piece or the joining link is this statement. In it, we'll go ahead and then create only the controls. It won't do a data binding. Whereas bind will actually go instantiate the control, bind any data that you have. So what I have done now is I've said data dash roll, drop down list, data dash bind, source is expenses or whatever it is. Let's see how this works. So this is MEVM.html, fairly simple. I'm extremely sorry. I don't know if I should change the background color now or you guys are not able to see that. But notice what happened. This is actually our, let me go back and change moonlight. Let me see, this solves it. At least now you can clearly see what happened. So this is the drop down list. Remember what we did? We said bind it to the types array. So we had put bills, merchant, all those things. So now I'm gonna select put. Maybe I ate at Megdi, 500 rupees. And I'm gonna say add. Notice what happened in the bottom. I got the row coming up. Maybe I went into, I mean I went through a taxi again. Maybe it's a 500. I say add. There you go. It keeps coming. This is all happening because, first of all, when we go ahead and do this, this dot get expenses, what is happening is, I could have directly said this dot expenses. I didn't do that. If I had done this dot expenses directly, the observable thing won't kick in. It won't notify whoever is listening to that particular property. So that's why I had to say, first get me that expenses array and then push it. So as soon as I say this dot get, and any changes happen on that, the framework will notify anybody who is bound to this property called expenses. Where is it bound? It's bound here. T body, data dash bind, source is equal to expenses. So that's why now you see like, oh, the array changed. I gotta go repaint my particular T body. So it goes and then puts up one more row. So this is out of the box. This is the MEVM backbone or knockout or whatever it is. So when you use only that, you don't get the UI. You gotta build your UI. So here what we do is we give you all these cool things like data dash bind, data dash template, and there's nothing, new language or new framework that we have done completely HTML5, completely plain JavaScript. And only thing that you need to know is, if you need MEVM, you need Kindle.Observable. That's it. Create any observable object, bind any property, you're done. When I was creating this, I went back to 10 years ago, if I had to do this, I had to have like five or six functions, right? On click of that, get that guy, do that, do this. And then of course, when I click on add, I have to go and then say, oh, document.getElementById that dropped on. GetElementById that merchant. GetElementById is the amount. Then take it and then go create, if you had an array, you will push it to the array. How will you come and then notify a new row into the table? Oh, you'll do dollar, whatever hash, get the table and then tbody and then you'll again push in, insert HTML, right? Gone other day, if you're still doing that, by the way, please change. Since you're, you know, kind of a tip, gone other days, make use of all these things, okay? So now, next one that I want to quickly talk about is the template we saw, data source. So let me quickly show you that also, because I'm running out of time. I have only 11 minutes. So here, what I've done is, I've kind of, same thing. If you see here, I have a table. I call it as ID movies and then there is a rank, rating, title and a year and then tbody, that's all I have, right? Notice what has happened, I just have a tbody and for each row of the table, I just have a template, rank, rating, title and a year. Now here is what I've done. We give you a function called as kendo.template and for that template, give us any HTML. If you see there, I've said hash template.html and then I'm creating a kendo.template object. So I've just created a template object cache there. I don't have to recreate again and again and again and then here are some static, you know, data for the movies, some top 10 movies, whatever, doesn't matter and here is the interesting thing. Now, all I want to do is let me run this before we see what the thing is. So how do you do this, right? So it's showing you like I was practicing before coming here, so it's still there. So you have to do this way. So you have a JavaScript array and I'm pretty sure the first instinct that you're gonna get is, okay, I'm gonna loop through the array and then I'm gonna get the table and tbody, insert HTML, insert HTML, I'm gonna keep doing that. That's typical of any JavaScript, you know, the first instinct is that, right? You know, you'll do a for it and then use jQuery and then insert the HTML into that. Well, you don't have to do that way. So what we give you is this cool feature. We have a data source component. It's a JavaScript data source component. All I'm doing is it has a property called data. So that's for holding static data. Now I'm giving it. So when I do that and then say movies, it fires me a change event. All I'm doing in the change event is I'm saying, hey, you know what? Go grab the movies tbody element, set its HTML to what? I already have created a Kendo template. Take that, take the data. This dot view is gonna give me all the items that are there in the array. So you're not looping or anything. The Kendo dot render is smart enough to understand that, hey, I have 10 items and then I have an item, a template. So he will automatically go merge everything, the 10 items and then push it into that tbody HTML. So that's why you are able to see this. Yeah, it will be. It's a synchronous, yeah, yeah, of course. Okay, so all you need to do is call the data source dot read and he does that. Now here's the thing, this is fine. You can challenge me or you can question me that, hey, this is simple jQuery stuff, I can do it. Now here's a curve ball. I want you to order by year your data. I want this HTML to be shown like 2008 or 2010 going on the top because the year descending. What you see here is ranking, it's doing a rank one to 10 but the year, if you see 1994, but I wanna see this table toppled up and down, like change it to year descending. Where will you do it? Forget Kendo UI. The data that came back is just this much. Assume you are pinging a particular service. That guy does not give you anything to sort it or do anything, right? But now suddenly your requirement is, no, we need to show year descending. Of course, first you gotta read this, then put your algorithms. Whatever, simple algorithm, whatever it is. You gotta come in, use underscore maybe. You know, I hope everybody knows that there is a fantastic JavaScript library called underscore. It's amazing what all things it will allow you to do. You can do lambda expression using that underscore. It is great, right? So you would have to come in, take that array, first again, go sort it and then bind it to the table or whatever you need to do. With ours, it's simple. We support everything out of the box here. All you need to do is just command. You command your data source to sort by so and so feed. So all I can do is, I'll come back here and then I will say, hey, you know what? I know you have a data called movies, the product array, whatever movies are a, but sort it by a field called year, direction descending, right? Now if I go in and then refresh, you will see 2010 going up, right? Not only that, what if you wanna apply a paging, right? So let's take a look at another example where I've already done it, where you will be amazed to see the paging. What do you guys do if you are using just jQuery or whatever, jQ with just that, this, whatever you have said, how do you achieve paging? Data, is that known as data table? Oh, okay, there's a plug-in or whatever which handles that. And how do you tell that particular plug-in or whatever component to page by let's say page, each page should have 10, but can you control? You can control it, okay? So we'll see how this can be done here. But can I get pages separate, tables separate? That I know, that's why I asked you. The way that data table works is, everything is one bundle, you have a table. What if I want you to create something like this? Okay, let's me first show it and then we'll ask you. Can you do this with, let's say data table? Yeah, I understand, but what I'm trying to say is, you know, your client wants you to show a catalog of your, or whatever, client is a product company. He wants to show the products like this and then he wants the pager at the bottom. Can you? Or whatever, I'm just throwing things at you. I'm trying to play the devil's advocate here, right? Yeah, yeah, right? So similarly, what we have done is, we have this concept called as data pager. So take a look at how the markup is done. I have a list view. I mean, I just said, div id is equal to list view and then I have div id is equal to pager, right? Now what I'm doing is, whatever you saw here, each item that is coming up there, it has an image and it has a text, right? So in the template, all I'm doing is, I've wrote some CSS magic and I said, place a image, place a h3, place a paragraph, that's it, right? And all the magic happens here. Now here is a powerful thing that we allow you to do. You can actually share the data source, right? The list view that was flowing the items and the pager. They both can work on the same data source. So how is it possible? I just created, I knew I won't get the internet. So what I have done is, I created poor man's web service or whatever it is. What is it? Just create a products.json, kept the json file there. That's why I went through the HTTP server so that I can say localhost colon 8080 slash data slash products.json. So what I'm trying to showcase here is, our data source just doesn't work with static data. It's pinging a web service, an endpoint. I don't care which endpoint. It may be .NET, it may be Java, it may be PHP. As long as you talk json back and forth with me, I'm gonna work out of the box. That's what I'm doing here. I said transport read, power slash data, power slash products.json. How do you want me to read? That's a json. Server paging, no. I don't want you to page. Get everything what you have. So there are 77 products. So I'm getting everything and I'll show you how the paging happens. So see here, page size is equal to 21. Let's keep it to maybe 10. And all I need to do is, hash pager, kendo pager, data source is equal to data source. Every data-related controls in kendo UI has this property called data source. And you can give an instance of kendo.data.datasource. That's what I have done. I created an instance of kendo.datasource. I've said pager, use this particular data source. Then I need to create the list view, right? Simple. Remember .kendo control name, kendo list view, data source is equal to data source. Template, use the same templating mechanism. kendo.template, here's the template HTML. That's all I have done. Now, if I come back and then repress, remember I had set it to 10. You see only 10 items and then see eight pages coming up automatically. I can go to the eighth page, boom. Yeah, so that's why I said server paging falls because I'm just reading just a json file. But let's assume that you had this particular guy, this word to be an actual REST API which understands terminologies like top, skip, page. As soon as I come in and then say data server paging is equal to true, it will start sending parameters to you. You will need to do it on the background. So the way we work is, as soon as you say server paging is equal to true, we just come in and then load the first one. Depending on the page size, you have to set page size equal to 10. I just load the first one. Yes, yes. Yeah, so you will need to do some algorithm on your server side where in like now let this guy send you 10, but you send 20. So that you keep getting pre-pilling. You know, it's not the pre-caching or pre-fetching or whatever they call it, but yeah. But out of the box, we do this way. You set page size equal to 10, server paging equal to true. We go and say, give me page one, page size is 10. Then we'll say, give me page two, page size is 10. So I left everything to server. What you're seeing now is my products.json has around 77 items, right? But just because I said page size is equal to 10, our data source is doing the paging on the client side. So it does everything on the client side. I can come in and then put a sort here. I can come in and then put a filter here. We support a bunch of things. I'm already ran out of time, but I just wanted to showcase this last piece and let's see what else I have. So yeah, data source. Yeah, I didn't get your question. Sorry, can you repeat? Which table? That you're talking about MEVM. I hear what I've done is I was saying, like, you know, go and then, so here's the thing. So for the T body, I'm using it as a, is that the one you're talking about? T body, I'm using data bind and then data template. Yeah, yeah, yeah. So you're talking about here, in this particular thing, in this place. Yeah, yeah, yeah. Basically, you can come in and do anything, but what this syntax is saying is, at run time, this particular row will have a data item. That data item has a property called type. Get that filter. And after that, if you want to do anything, you can come in and then put a JavaScript code, anything. So our JavaScript languages are like this. So we do an hash syntax. I can come in and then say, if let's say type is equal to food, whatever. So I can do an condition here inside the template itself. So I can do this and I can end the block here. Inside the block, I can put all any, you know, I don't know. Yeah, that's what I said. This is ours. So as I said, I never played much with the jQuery template because by the time I heard and then by the time I wanted to play around with it. So yeah, yeah, yeah. So that's basically our way of sending the header. So you just set the data type of JSON. So we'll say, hey, I accept only that. Send me that. And it's not just related to read. You can actually see here what we have done. The transport can actually do update, destroy, create. You let me know your endpoints, where I should ping when I have to update, when I have to destroy or create. Destroy is nothing but delete. All you need to do is data-source.add. Give me a JSON object. Data-source.update, give me a JSON object. Data-source.delete, give me a JSON object. It does automatically the, you know, call to the whatever respective endpoints you have set. And it will make sure the data is pushed as a write jQuery object in all those things. You know, that's typically what you will face if you're doing it for the first time. If you didn't convert your JavaScript array into JSON string and then pass it. On the other side, somebody cannot deserialize it. That's typical things that keep happening. But we take care of all those things. All you need to do is set up the crud URLs and call add or a delete or update or anything and then say sync. It will go and then sync to this server. And as I said, it is open-source. It's available on GitHub. Just go on and search for Kendo UI Core. You can use it. You can fork it if you want to do anything. As I said, these are all there. And of course, I don't want to talk about Angular because I'm not a big fan. Oh, it's going on in life. I'm a big fan of Angular, by the way. And we support Angular. So we do have Angular support out of the box. If somebody is using Angular, heavy Angular in your projects, but you just need good UI, right? What you can do is let all your business logic be as is in your Angular module, service, whatever it is. On the UI, you just have to do this. If you see here what we have done, let me keep this. So take a look at this. This is the Angular directive that we give you out of the box. You wanted to convert this input into an autocomplete. You cannot do it the way we do it. Because now Angular is taken over your complete body. If you see there, I have put ng-app. So the Angular has its own way of instantiating whatever objects that you have. So what we did was we went ahead and then wrote the directives like this. If you want to convert any element into a particular control, you just have to say kendo. And then again, whatever convention Angular follows, auto-complete. We've got to see how Angular 2 plays around. We are working on that. But that's it. And you can set the same things. ng-model and then k-data-source is equal to product names. And if you look at the module, the module has a scope. Scope has a product name. That's it. If you're an Angular guy, you can still work with Angular, but take a look at the controls that we have. And I didn't talk about the mobile, so let me quickly run through that. And I do have an application. I'll just show it to you. Using kendo-uy framework, it already contains mobile framework. Kendo-uy is a framework. It contains a mobile framework. And using kendo-uy mobile, you can create hybrid mobile apps, can run on Android, can run on iOS, can run on Windows Phone, can run on Blackberry, can run on whatnot. So available completely. Again, you just go power install. Let me quickly show you that. How many of you are Visual Studio guys here? I have some brothers here, so that's good. Visual Studio has been there from 2001. I've been inside this guy from 2001. That's the Visual Studio code. I couldn't show that because I wanted to create snippets. I couldn't create multi-line HTML snippets. I got to go figure out. Otherwise, I wanted to show that this is a cool new thing from Microsoft. By the way, this is kendo-uy mobile. It's next speaker here. Am I eating his time? I think I'm already six minutes sober. Yeah, bro. OK, cool. Five minutes, I'll just be done. So this is actually kendo-uy mobile application. If you see here, we give you the same data dash role concept. We give you a layout. We give you putter, tabs, strips, everything. Now, let me run this. This is using Visual Studio's cool new project template called cross-platform Apache Cordova templates. Visual Studio for individual is free. You can go and then download Visual Studio Community Edition. It's free, completely free. That has a specific project template called tools for Apache Cordova application. What I've done is I've included kendo-uy mobile into this one. So if you see my solution explorer, I've already included all the scripts that is necessary. Lib, kendo-uy, it's here. See that? It's a kendo-uy mobile.min.js, and then the styles you know for the kendo-uy. I've already done that. And then I've already created a couple of file screens. What you see here is this is our tab strip of control that we give you for the mobile. If you are creating any mobile application, if you're an Android or iOS, you'll see that tab strip is bottom on the iOS, tab strip is up on the Android. So here it is using a flat theme. And notice how slick all the animations are there. So I'm using a slide animation. We do overlay. We do slide lap in whatever you want. And this is actually a mobile list use. Let me quickly show you how it is done. Just one line of code. So I have a views folder. I have a contacts folder. And would you believe it? It is one line. UL, data.stool is going to list view. And then I've set the data bind property. So let me show you that. So kendo-uy mobile is MVVM out of the box. I have a JavaScript written for this particular page, wherein I have kept a particular property called DS. That's all I have to say. Data.stool shows DS, data.stool is list view. And I need to know how to show each template. I've written a template. The data model, the way it works is here. Each screen is nothing but a data dash role view. And then you set a model against that view. That's it. The binding is already done. You just keep using data dash find, a particular property. That's it. So how is the object done? Object is done in a very minimal JavaScript way, index.js. And here is my model. I just kept it at the window level. You see, window.app. And it's a plain JavaScript, contacts, title, DS. And notice the data source coming into picture again here. It's the same base framework that we use. You either use it in web or you either use it in the mobile. It's still the same thing. Notice the data that I have hard coded, but need not be. You can go to the server, get the data, bind it, and then it's going to do that. And I'm using alert. That's as simple as it can get. How do you kickstart the mobile application? This is required when the app ready, or the device ready fires. All you need to do is you just have to call kendo.mobile.application transition slide. We have released a new skin called NOAA. So that's what I'm using. It's a cool, flat theme. And initial screen. Which one, which screen should I show initially when the application loads? I don't have internet. Otherwise, I would have shown a full-fledged news reader that I have developed. I used Yahoo's RSS feeds. And I created something called in news, like India news. So I'm getting only the India-related news, like political crime, whatnot. And then I was able to build the same thing. I have a dryer coming up. So we give you a dryer. Let me see. I think I'm connected. So let me quickly show you that. If you go to demos.telerik.com slash kendo-ui, I think I'm still connected. By the way, talk to me. I'll be your tutor. Seriously. So this is kendo.mobile. It's running in the browser. That's because kendo-ui framework is completely HTML5. It doesn't care whether it's a web view or whether it's a browser. What you would need to do for making this as an application is just create a Cordova project and then take all the HTML, put it there, build it, package it, put it to the device. It's going to run as is. So some of the things that we have is this particular action sheet. Take a look at this. So this is based on the theme. You don't want this theme. You just have to remove one line of code. I cannot show you now, but yeah. So here, if you comment this out, what kendo-ui will do is if you package this code to run on Android, it will look black, Android black. If you package the same source code without any changes and run it on iOS, it's going to look blue because iOS is blue theme. If you package it same for Windows Phone, it's going to give you whatever Windows Phone look and feel is. So this is adaptive rendering in nature out of the box. I like this particular skin, so that's why we have this. And some of the other things that we have is like, this is the button group. Like, you have a segmented data coming up, so you can do this. Again, look at the quality of the controls what we have. And here's a cool menu. So this is a drawer. I'm sorry. I'm holding you from your T. So we have just three minutes. Let me close it. This is the last demo. So that's the cool drawer that we give you. You can pretty much play around with it. All you need to do is go to www.telleric.com, power slash kendo of an UI, power slash open source code. And you will be able to get everything that you need to know about this one. And let me quickly, so I want to know more. Just go to kendoui.com or follow Adler at Kendo UI. By the way, my name is Lohit. If you want to know more about me, just go to about.me slash Kashifa. I'm available at Twitter as Adler at Kashifa. Thank you. You've been a great audience. Any questions just come over here? Yeah, so what you need to do is we ship, since it's an open source, we give the source code to you. Let me show you that. So the source file is here. And you will see the calendar written here. You talk mobile. I'm going to talk your language. That is, don't use web widgets on the mobile. Yes, be with data dash type is equal to date so that the operating system will immediately see that, oh, it's a date, and he's going to bring up the native. So you need native things in the mobile, not on the web. So you can pretty much take the source code, you understand it, and then you want to add anything. It's completely jQuery plug-in bit, so you just do that. And then, of course, once you modify, you will need to make sure you build it the way you need to build. So there is a very specific set of grant tasks that you just had to run. Yes? Now, if you are going individual route, you've got to make sure that in the define, you say, hey, I need kendo core, and then I need this one. But if you do kendo.ui.core.min.js, everything is compressed, and then it's one package. Yeah, then you will need to, yeah, yeah, yeah. So this is basically, the define is kind of the common JS way of doing required JS, the dependency injection. So it's just doing that. If you see here, if you want calendar, calendar depends on core. So make sure core is already loaded, and then you have this one. But what we do is, we have build system, wherein you can come in and say, hey, I need only calendar. So it will give you a custom JavaScript file, which will automatically include core and then calendar, just only those two for you. If you want to use only calendar in a page, you don't need the full thing. So that's how the dependency works. You let us figure out who is dependent on what. Please come over. Please come over.