Partner Details Screen

Mobilizing your SAP Data with Kendo UI Mobile – Implementing Partner Details Screen – Part 3

This blog post is a 3rd one in the series of “Mobilizing your SAP Data with Telerik Platform”. If you have not read my first 2 parts I suggest you take a look at those first. Here is the link to first 2 parts of this series:

Mobilizing your SAP Data with Kendo UI Mobile – Get the Environment Ready – Part 1

Mobilizing your SAP Data with Kendo UI Mobile – Building the Mobile App – Part 2

In Part 1 I wrote about how to get started with SAP. In Part 2 I talked about building a mobile app using Kendo UI Mobile. We connected with the SAP data through the OData service that SAP Netweaver Gateway system provides. We were also able to build the first screen of the app namely the Partners listing screen. In this blog post we will look at how to build a screen that shows the details of the selected Partner. Let’s get started

Recap – Partner Item Template:

In the part 1 when we built the Partners listing screen, we used Kendo UI Mobile ListView to list the partners from the system. Each item in the ListView will be rendered by making use of an item template we provided. Just to recap that code, here is the code snippet of the item template:

Notice the usage of data-role=touch on the div and the data bind syntax where we trap the tap event and provide an event handler named “partnerSelected”. Here is the code snippet of the partnersViewModel where we have defined the partnerSelected event handler:

Handling Navigation to Partner View:

We saw that we have an event handler which handles the tap event of the partners listing listview. The code just navigates to a new view called partnerView. But the view name is not hard coded. It is coming from appsettings object which contains viewsettings and the value for partnerView. Also notice that we are passing the currently selected partner UID in the querystring. UID is the unique identifier that the Kendo UI Data Source maintains for each item in its data collection. We will use this information to get a single partner object from the collection using datasource method getbyid().

First let’s update the appsettings.js with viewsettings data. Here is the code snippet:

Notice that we have the URI of the new view set to “views/partnerView.html”. Let’s create a new folder under the root of the project by name “views” and create a new html file called “partnerView.html”.

PartnerView Screen

Partner View Screen

When you add a new HTML file, the file content will have bare bone HTML code. Remove that basic HTML code as we don’t need that. Next we will create the partnerView UI.

Partner View UI:

As part of the partner view screen, we will just list out all the details of a partner like name, email, phone, address, etc. Here is the code snippet of the partner view:

Let’s go over the code once. It’s a simple div with its data role set to view. This is how Kendo UI knows that this is a page or screen in the app. We are trapping the show method of the view through data-show attribute and is bound to Partner object’s show() method. We will see the partner object in next section. Then we have spans to output different property of the partner and we have data bound different properties to the text property of the span. Next let’s take a look at the Partner JavaScript file.

Partner JavaScript Object:

In previous section we saw that the partner view screen is data bound to partner JavaScript object. Create a new JavaScript file named “partner.js” in scripts folder. And paste the following code in the script file:

Pay close attention to show() method. Remember that when we navigate from the partners listing screen, we had passed a querystring value which was the UID of the partner object. Here in partner view show method, we retrieve the UID and piggyback on app.Partners.partners data source and use the data source method getByUid() to retrieve the partner object. Once we get the object we use kendo.bind() method to data bind it to the view. With this the view at runtime get data bound with the partner object and the spans will show the appropriate data as they have the data-bind syntax.

Running the App:

One last thing to do is adding a reference to partner.js. Add a script reference to partner.js in the script block of index.html. After adding the reference, select Run > In Simulator from the toolbar. Here is the screen shot of the partner view:

Partner Details Screen

Partner Details Screen

Don’t question me on the UI – I am a design handicap when it comes to UX. But we now have 2 screens as part of the application itself. We now have the Partners Listing screen and Partner Details screen. And we are making progress.

Summary:

In this blog post we looked at how to create Partner details screen. We created a HTML page and a corresponding JavaScript file. With the concept of DataBinding we were able to bind different properties of a Partner object to different span on the view. In the next part of this blog series, we will take a look at how to create a new partner right from the mobile app itself. So stay tuned.

Advertisements
Business Partners Listing Screen

Mobilizing your SAP Data with Kendo UI Mobile – Building the Mobile App – Part 2

This is the second post in the series of “Mobilizing Your SAP Data with Kendo UI Mobile”. If you haven’t read my first post, it’s a good idea to read it now and can be found here. In the first post I talked about getting the environment ready. In this second post I will be writing about how to create a mobile application with Kendo UI Mobile for the SAP data. So if that’s sounds interesting to you, stay along with me for the rest of the blog post.

Get the tools of the trade:

As part of Telerik Platform, we offer a service called AppBuilder. AppBuilder is a complete IDE for building a Hybrid Mobile Application using Kendo UI Mobile. Using AppBuilder you can build iOS, Android and Windows Phone 8 hybrid mobile apps using a single pure HTML5, CSS & JavaScript codebase. Kendo UI Mobile is an adaptive rendering Mobile control set that will be used for the UI elements of the mobile app. You can know more about Kendo UI Mobile here. Visit the AppBuilder product overview page and sign up for a trial. You will have 30 days to try out AppBuilder and post that we will downgrade you to a starter tier. In starter tier you are allowed to build only 2 Mobile apps.

Telerik AppBuilder

Telerik AppBuilder

 

IDE Choices:

AppBuilder provide 5 IDE choices and you can choose the one that suits you best. Here are the choices:

  1. In-Browser Client – develop hybrid mobile apps on the go with a web client that runs on all browsers
  2. Windows Client – Native windows application
  3. Visual Studio Extension – Extension for Visual Studio which provides all AppBuilder capabilities within VS
  4. Sublime Text Package – Package for Sublime Text Editor
  5. Command-Line Interface – access AppBuilder capabilities from command line on Windows or OS X

For the sake of this blog post I will be using the Windows Client of AppBuilder.  I already have signed up for Telerik Platform and I have created a workspace in the Platform and will create a new hybrid mobile app in that workspace. To know more about the Telerik platform, check our documentation here.

Create a Mobile App:

Now that we have the required tool for creating an app, lets get going. I am assuming at this point of time you have the AppBuilder Windows Client installer. Launch the AppBuilder windows client application. Since this is the first time, it will ask you for your Telerik Platform credentials.

Telerik Platform Credentials

Telerik Platform Credentials

Once you log in with your credentials, you will be presented with a “New” project creation dialog. From here you can select “Hybrid” > “Kendo UI Mobile App”. Provide a name for your mobile app and click create.

AppBuilder New Project Dialog

AppBuilder New Project Dialog

Here is the project structure that the IDE creates. Notice that Kendo UI Mobile control is added by default as we had selected Kendo UI Mobile App.

AppBuilder Project Structure

AppBuilder Project Structure

When you create a new project, IDE adds a dummy application out of the box. The app contains Home, Login, Location and Weather screen. In the scripts folder, you will find four scripts namely app.js, location.js, login.js and weather.js. The app.js contains the Kendo Mobile app creation code and other script files for the respective screens. At this moment if you just run the app by selecting Run > In Simulator or by pressing F5 in the IDE, you will see the following output:

Kendo UI Default Mobile App

Kendo UI Default Mobile App

We will clean up whatever default code has been created and start building our UI for Sales Order application.

Creating Mobile Application Layout:

Open the index.html and clear off everything that was added by default. Keep the reference to Kendo UI stylesheet, Cordova JavaScript file, jquery and app.js and remove rest of the things. The index.html, after the changes should look like below:

Cleaned Up Index Page

Cleaned Up Index Page

Now that we have a clean slate, let’s get started with our UI building process. First we will create a mobile layout that is required for our app.

Let’s go over the code. We have a div whose data role is set to layout and we have given it an identifier. Then we create a header div and place a navbar inside it. Navbar will contain a place holder for the title that will be shown for the current active screen. The keywords “layout”,”navbar” and “view-title” are Kendo UI specific and the Kendo UI Mobile app engine understand what needs to be done. Now that we are done with the markup for layout, we need to let Kendo UI mobile app engine know that it has to use this layout as a default layout for the app. Open app.js and replace the following code:

app.application = new kendo.mobile.Application(document.body, { layout: “tabstrip-layout” });

with

app.application = new kendo.mobile.Application(document.body, { layout: “applayout” });

Next  we will create our first screen in the app which will list all the partners in the Sales Order system

Create Partners Listing Screen:

The Sales Order System that we are using for this demo app has a Business Partners endpoint and lists all the partners in the system. So our first screen would be to list all partners alphabetically as a mobile list view. So let’s start coding. First let’s create a view and within the view we will keep mobile list view. I will used MVVM pattern and create a view model for this screen. The Kendo UI Mobile Views provides a way to bind the view model to the view itself. Here is the markup for the view:

It’s a simple div with a data role set to “View” and data model set to “app.Partners”. We will create the Partners view model next. Then I have a header where I have the navbar with a title. Then I create a mobile list view with an unordered list. By setting the data role of <ul> as listview, Kendo UI engine will work its magic at runtime and convert the <ul> to a mobile list view. The mobile list view requires item template which we will have to create next. The data source to listview is set to “partners” property on the view model.

Partner Item Template:

For the list view to display each item, it needs a template to be provided. Here is a simple template I have created:

You will notice the usage of ${} syntax. It is Kendo UI template syntax where you are telling the rendering engine that at run time it has to get the value of the property of the currently bound data object and emit that into the template.

Partners View Model JavaScript File:

We will create a view model which exposes the business partner’s related functionality like listing and details of a business partner. Add a new JS file in the Scripts folder and name it Partners.js. Here is the code snippet for the  view model:

As of now it’s a place holder and we will build the functionality as we proceed further.

Partner Data Model Object:

I will model the Business Partner entity that is exposed by the SalesOrder system as a JavaScript object in the partners.js file. Here is how my JavaScript object looks like:

Next we need to create a data source to connect to the OData service exposed by the Sales Order system. I am using Kendo UI Data source as my data source in the application. In order to read data from a service end point we need just set the URI on transport > read property of the data source. I will add this to partner data model itself. Here is the code snippet with the data source added:

Believe it or not, that data source is all you need to connect to any service which returns data in JSON format. Notice that for reading a service I am making use of a appSettings object. That is nothing but a simple JavaScript file with a bunch of settings. We will shortly take a look at that.

Partners View Model Object:

Now that we have the Partner Data Model and Data Source ready, we now create the partners view model which will expose a property called partners and partners is nothing but the instance of the kendo UI data source in the partner data model object. Here is the code snippet:

Here is the complete code listing of Partners.js we have implemented so far:

App Settings:

In the code snippet for data source, the URL to read data was got from data settings of appsettings object. I have created a new JavaScript file “settings.js” in the scripts folder. Here is the code snippet for the same:

Running the app:

Now that we have finished creating the pieces of the application there is one last thing to do. We need to add reference to partner.js & settings.js in index.html. Once we add that, just press F5 on the IDE and the simulator will simulate the app we just built. Here is the screen shot of the app being simulated in iOS platform:

Business Partners Listing Screen

Business Partners Listing Screen

 Wrap Up:

We have successfully created a mobile app which connects to a SAP backend and in particular a Sales Order system using Netweaver Gateway OData service and built a listing screen in the app. The listing screen is listing the business partners that are available in the system. One thing to note is how easy it was to create the app. The main point of this whole exercise is that of the Kendo UI Data Source which makes it super easy to connect to a service end point, invoke, retrieve data and bind it to the control. I didn’t sweat a lot to achieve this. So this is a good starting point. Next up we will create the Business Partner Details page. Stay tuned till my next blog post.

NetweaverGateway

Mobilizing your SAP Data with Kendo UI Mobile – Get the Environment Ready – Part 1

Over the last couple of years that I have been evangelizing for Telerik, I have met a lot of customers and in particular enterprise customers. Most of the big enterprises have SAP deployed in their organization. This gives them the flexibility of having point to point information with respect to their projects or revenue or even an employee. In short SAP is one of the widely used system in enterprises. But it comes with its own environment and applications. The number one question from enterprise customers for us has always been “how does your offering work with SAP?” A fair question especially when it comes to engaging with a third party vendor. This question was more of a high priority question when it came to Mobile teams in the enterprises. How soon can you go to market with an application and expose the SAP data.

The questions from the enterprises led me to write this 2 part series on how to mobilize your SAP data. This blog post is the first in this series and below is how I have planned out the 3 part series blog post:

  • Mobilizing Your SAP Data with Kendo UI Mobile – Get the Environment Ready – Part 1
  • Mobilizing Your SAP Data – Mobile App Development – Part 2

If you are as excited as I am, then be with me in this journey of 2 blog posts. So let’s get started.

What is SAP ERP?

According to the dictionary of the web i.e. Wikipedia, SAP ERP is defined as follows:

SAP ERP is an Enterprise Resource Planning software which provides an integrated solution that incorporates key business functions of an organization.

I will not be delving too much in to SAP as a software as that is not the intention of the blog post. Now that we know what is SAP let’s see how to expose data from SAP so that applications outside of SAP can consume them.

SAP Netweaver Gateway:

In order for the SAP data to be exposed to outside world you use a technology called SAP Netweaver Gateway to develop REST based ODATA services. According to SAP, Netweaver Gateway is defined as:

Technology that provides a simple way to connect devices, environments and platforms to SAP software based on market standards.

SAP Netweaver Gateway offers connectivity to SAP applications using any programming language and you do not need to have SAP knowledge. SAP Netweaver Gateway leverages the REST Services and OData/ATOM protocols for data exchange.

NetweaverGateway

SAP Netweaver Gateway System

Again I won’t be getting into too much details as to how you do this. SAP Community Network (SCN) has tutorials on how to do this.

SAP Netweaver Gateway Demo System:

If you are eager to try a SAP Netweaver Gateway Service, well we are in luck. SAP had released a set of Demo System for public usage. You can read more about the demo services here: http://scn.sap.com/docs/DOC-31221?rid=/webcontent/uuid/1051f6d9-e87a-2e10-d188-e2786c7878b1#section6. Following are the demo systems available for consumption:

  • Flight Example
  • Bank Example
  • Sales Order Example
  • GWDEMO/EPM Example
  • New EPM Sample

To get access to the demo system, you will need to follow the instructions provided here: http://scn.sap.com/docs/DOC-40986

Sales Order Example:

For the sake of this exercise, I will be using the Sales Order Example service. This service is based on the common scenario of Sales Order. This service exposes Sales Orders which contain header and line item data from the SAP backend ERP system. The service document can be found at the following URL: https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV. The Metadata of the service can be found at: https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/$metadata. The Sales Order service exposes four collections mainly. They are:

  1. SalesOrders
    All the Sales Orders can be read using this collection
  2. SalesOrderItems
    Items of a Sales Order can be read from this collection
  3. Products
    Collection of products which can be purchased
  4. BusinessPartners
    Collection of Partners with whom the company does transaction

Setting Up Reverse Proxy:

Services exposed by SAP Netweaver Gateway Demo system are all protected and need credentials to access them. In the previous section we talked about getting access to the demo system. During that process you would have used a username and password. You need the same credentials to authenticate against the demo system when querying for data.

In order for us to perform full CRUD on the demo system we will need to setup a reverse proxy in order to overcome the Same Origin policy restriction. A reverse proxy should be used for sending client HTTP requests designated to its domain to the correct server. Reverse proxy can be achieved in 2 ways. They are:

  1. We can use IIS URL rewrite to create the reverse proxy. Here is an article on IIS rewrite: http://www.iis.net/learn/extensions/url-rewrite-module/reverse-proxy-with-url-rewrite-v2-and-application-request-routing.
  2. We can also create a simple reverse proxy using ASP.NET Web API.

Reverse Proxy using ASP.NET Web API:

A simple reverse proxy can be easily created using ASP.NET Web API. Idea is to create a Web API and pass the SAP URI we need query data as a query string parameter. The Web API will read the query string value and use that as a URI to connect to the SAP Service. Response from SAP Service will be relayed back to the client as JSON. Following code snippet shows the Web API Controller and in particular the Get action method:

public class ProxyController : ApiController
{
        string username = "<username>";
        string password = "<password>";
        // GET: api/Proxy
        public async Task<JsonResult<string>> Get(string url)
        {
            var sapUri = new Uri(url);
            using (var client = new HttpClient())
            {
                var base64String = GetBase64String(username, password);
                client.DefaultRequestHeaders.Add("Accept", "application/json");
                client.DefaultRequestHeaders.Add("Authorization", "Basic " + base64String);
                var response = await client.GetAsync(sapUri);
                HttpContext.Current.Response.StatusCode = (int)response.StatusCode;
                return Json(await response.Content.ReadAsStringAsync());
            }
        }
}

Instead of querying the SAP service directly from the mobile application, we will querying the proxy we just created above and pass the SAP service URL as a query string. Here is the usage:

http://<proxy server>:<port>/api/proxy?url=https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/BusinessPartners

Notice that we pass an Authorization header when making a request. SAP Services expect an authorization header and we pass the username:password string converted to base 64 and pass it as a request header. I have showed the example of a Read or Get. But on the similar grounds you can create the Create/Update/Delete actions also.

Summary:

With this blog post we start a journey to read data from SAP and use that data in a mobile application. As a first step we learnt that SAP data can be exposed to outside world using the SAP Netweaver Gateway system. We looked at various the demo services and picked the Sales Order system as a candidate to build the mobile app. In next post we will create a mobile application using Kendo UI Mobile framework and Telerik App Builder.

How to create Custom Theme for Kendo UI DataViz

Kendo UI DataViz is our Data Visualization package as part of the Kendo UI Framework. Kendo UI DataViz is HTML5 compliant and generates SVG (Scalable Vector Graphics) on HTMl5 supported browsers and falls back to VML (Vector Markup Language) on browsers that don’t support HTML5. VML is supported by pretty much all browser versions. If you are keen to know more about Kendo UI DataViz, head over to our DataViz demos online: http://demos.telerik.com/kendo-ui/area-charts/index

This blog post will walk you through how to create a custom theme for DataViz charts. Out of the box we ship the following 11 themes:

Default
image

Blue Opal
image

Bootstrap
image

Silver
image

Uniform
image

Metro
image

Black
image

Metro Black
image

High Contrast
image

Moonlight
image

Flat
image

I don’t know about you guys but I say those are pretty good themes for me. But we do understand that not all the times you will go with the default themes we ship. You may want to customize it to your organizational or even project color combination. So we will see how we can do the customization in the coming section.

Kendo UI Themebuilder:

The tool which will help you to customize Kendo UI themes is known as “Kendo UI ThemeBuilder”. It lets you modify themes so that they match the look and feel of our DataViz widgets to that of your site or app. It is an online tool and no we don’t charge you to use it. You can look at the ThemeBuilder tool here: http://demos.telerik.com/kendo-ui/themebuilder/

Steps to Customize DataViz Widgets:

  1. Navigate to ThemeBuilder tool online.
  2. To start customization, you are required to first select one of the default themes. This is like a foundation to start the customization. So select any default theme first.
    image 
  3. Next start the ThemeBuilder tool by clicking on the button named “Kendo UI ThemeBuilder”. This will launch the ThemeBuilder GUI tool and will appear on the right hand side of the page. Give it a couple seconds to load the GUI.
    image
  4. Since we want to customize the DataViz widgets, select the button labeled “DataViz” in the ThemeBuilder GUI tool. This will provide us with a UI which will help us to customize different aspects of the DataViz widgets.
    image 
  5. Things that can be customized on the DataViz Widgets are: Title, Legend, Charting Area, Axes, Tooltip, Series Colors and Gauge
  6. Scroll Down the page to see the DataViz widgets. Then change the appropriate widget property to your custom value. For e.g. I have changed the chart area color to a custom value and as soon as I do it – I get a instant update of how the widget will look like. Here is a snapshot of my changes:
    image
    Like this you can set your custom colors for all the customization points available for the widget.
  7. Once you are done with your changes, click on the “Get JSON” button available on top of the GUI tool. This will spit out a JSON structure of the changes you just did.
    image 
  8. The JSON code will look like below:
    image
    Notice that by default the custom code is named as “newTheme”. You can change that and provide your own custom name. Remember the name as this is the name you will use to set a theme on a DataViz widget. All we are doing is – we register this new theme with the DataViz ui and later when we set theme property of DataViz widgets to this custom theme name, Kendo UI will be able to apply your color schemes to the widgets.
  9. Copy the JSON code and add that into a new JavaScript file. Give JS file a meaningful name and include it in any page where you need the custom theme.

Using Custom Theme:

In the previous section, we saw how to create a custom theme. In order to use the custom theme, all you need to do is to set the “theme” property on DataViz widgets to the new custom theme name you have provided during registration. Here is a code snippet of setting the theme on a DataViz widget:

$("#area-chart").kendoChart({

        theme:"LohithTheme",

            transitions: false,

            title: {

                text: "Internet Users"

            },

            legend: {

                position: "bottom"

            },

            seriesDefaults: {

                type: "area"

            },

            series: [

                {

                    name: "United States",

                    data: [67.96, 68.93, 75, 74, 78]

                }, {

                    name: "World",

                    data: [15.7, 16.7, 20, 23.5, 26.6]

                }

            ],

            valueAxis: {

                labels: {

                    format: "{0}%"

                }

            },

            categoryAxis: {

                categories: [2005, 2006, 2007, 2008, 2009]

            },

            tooltip: {

                visible: true,

                format: "{0}%"

            }

        });

I have named my theme as “LohithTheme” and use that name while creating a chart.

I have put up a full fledged demo with a custom theme here: http://trykendoui.telerik.com/@kashyapa/icAJ. This is our new shiny playground for Keno UI called “Kenod UI Dojo”. In the code section you can review the JS code and when you click on Run button output will be shown on the right hand side. Here is snapshot of my custom theme in action:

image

And that’s as easy as it can get to customize a DataViz theme.

Hope this blog post helps you if you have a similar scenario of customizing our DataViz widgets. Do let us know your feedback on this blog post through the comments.

Till next time – Happy Coding.

Drill Down Chart

Drill Down Charts using Kendo UI DataViz

One of the fascinating things about being an evangelist is that, everyday I get to hear a new problem that people are trying to solve. It always keeps me on my toes as it gives me an opportunity to dig into our documentation once again and unearth the code necessary to solve the problem. In this blog post I will talk about one such problem a customer sent us. They wanted to know if Kendo UI DataViz charts support drill down or not. Out of the box Kendo UI DataViz does not have the capability in built but we provide events on the chart which will help you to achieve this functionality easily. So this blog post is all about achieving drill down functionality using Kendo UI DataViz chart. So if you have such a situation in your project, you may want to sit back and follow rest of the post.

Step 1 – Define the markup:

As you know in order to work with Kendo UI DataViz you will need to first add reference to Kendo UI DataViz CSS and then add reference to Kendo UI DataViz Theme CSS. Theme can be anything for e.g. black, metro, blue opal etc. Then add a reference to Jquery and Kendo UI DataViz JavaScript. Next define a div and give it a id of “chart”.

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.black.min.css">
<body>
<div id="chart" ></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<script>
<!-- chart draw logic here -->
</script>
</body>

Step 2 – Prepare Data:

For the sake of this blog post i am going to fake some data about browsers market share. So initially i will show column chart for major browsers. Then on clicking each column i should be able to drill down into its specific data. I will create my data as a JavaScript array and use them for binding to chart. Here are my data array which i will use while binding to chart:

<script>
var chartInitialData=[
 {category:"MSIE",value:55.11},
 {category:"Firefox",value:21.63},
 {category:"Chrome",value:11.94},
 {category:"Safari",value:7.15},
 {category:"Opera",value:2.14},
 ];
 var msieData = [
 {category:"MSIE 6.0",value:10.85},
 {category:"MSIE 7.0",value:7.35},
 {category:"MSIE 8.0",value:33.06},
 {category:"MSIE 9.0",value:2.81},
 ];
</script>

As you can see, I have an initial data to bind to the chart. And also the drill down data. For the sake of simplicity i have only shown drill down data for one of the columns. At the end of this post i will give link to the code which will have drill down data for all the columns of the chart.

Step 3 – Initialize the Chart:

Now we are ready to initialize the chart and bind the initial data to it. Here is the code snippet for initializing the chart:

$(document).ready(function(){

 $("#chart").kendoChart({
 theme:"Black",
 title: { text: "Browser market share, March, 2014"},
 dataSource:{ data:chartInitialData },
 series: [{
 type:"column",
 field:"value",
 categoryField:"category",
 labels:{
 visible:true,
 template:"${value}%"
 }
 }],
 tooltip:{
 visible:true,
 template:"<center>${category}: <b>${value}% market share</b><br/>Click to see ${category} versions</center>"
 },
 });
 })

Let me go over the code once. I access an element with id “chart” and then initialize Kendo Chart on that element. I set the theme to Black. Then i provide a title to the chart. Next comes the data source and i create a Kendo.data.DataSource object and provide the value of chartInitialData to data property. Then I set the series as a column chart type. Next I set the value field and category field of the chart to corresponding column name from the data source. I also set the labels to be visible on top of each column. Lastly I set the tooltip to a custom template. Now if we run the code this is what we see:

Drill Down Chart

Drill Down Chart Initial Look


Step 4 – Handle Series Click:

Now that we have our chart initialized and see that the data is getting bound correctly, next step is to handle the series click. Series Click is an event fired when the user clicks on any columns in the chart. Chart API exposes a method called setDataSource(). So in order to achieve a drill down, handle the series click event and set a new data source to the chart. What this does is, it will repaint the chart area and provides the drill down effect. So here is the code snippet for the seriesClick event:

seriesClick: function(e)
 {
 var categorySelected = e.category;
 var chart = $("#chart").data("kendoChart");
 if(categorySelected === "MSIE")
 {
 chart.setDataSource(new kendo.data.DataSource({data:msieData}));
 }
 else if(categorySelected === "Firefox")
 {
 chart.setDataSource(new kendo.data.DataSource({data:ffData}));
 }
 else if(categorySelected === "Chrome")
 {
 chart.setDataSource(new kendo.data.DataSource({data:chromeData}));
 }
 else if(categorySelected === "Safari")
 {
 chart.setDataSource(new kendo.data.DataSource({data:safariData}));
 }
 else if(categorySelected === "Opera")
 {
 chart.setDataSource(new kendo.data.DataSource({data:operaData}));
 }
 else
 {
 //not handling the child level drill down - setting the chart back to original data source
 chart.setDataSource(new kendo.data.DataSource({data:chartInitialData}));
 }
 }

And thats all it is there to create a drill down with Kendo UI DataViz.

Here is a link to the source code of this demo: http://trykendoui.telerik.com/@kashyapa/eCEP/3.

The demo code is done using our Kendo UI Dojo. When you navigate to the demo page, left hand side will have the source code and right hand side will show the output. You will need to click on the Run button on the page to see the output.

Hope this demo helps somebody who want to achieve the same scenario.

Till next time – Happy Coding.

How to apply badge in Kendo UI Mobile Button

Learn more about Kendo UI Mobile here

Yes now you can have a default badge on Kendo UI Mobile Button. This was in demand feature and we brought this feature in Q1 2013 SP release.

You can put a badge by setting data-badge attribute of button. After setting badge button will look like below in various platforms.

image

Okay , so we can set badge property as follows. You need to set data-badge attribute.


<a data-role="button" data-badge = "10" data-click="AddFunction">Add</a>

You can access badge value with badge method. So if you need to read current badge value and print it in AddFunction JavaScript function then it can be done as follows.


function AddFunction()
{
 var badgeValue = parseInt(this.badge());

 alert(badgeValue);
}

We are reading badge value with badge() method. That returns a string value and before alerting that we are converting that to integer.

To write value of badge you need to pass a parameter in badge() method. So badge value can be written as below,


function AddFunction()
{
 var badgeValue = parseInt(this.badge());
 badgeValue++;
 this.badge(badgeValue);
 alert(badge);
}

You can remove badge from button by passing false to badge method. So you can remove badge as follows


function AddFunction()
{
 this.badge(false);
}

In this way you can work with badge in Kendo UI Mobile button. I hope you find this post useful. Thanks for reading.

Learn more about Kendo UI Mobile here

Resources for webinar “Achieve Responsive Web Applications with Ease using Kendo UI”

On Jan 16 2014 we conducted the very first webinar of 2014 titled “Achieve Responsive Web Application with Ease using Kendo UI”. This blog post will provide you some of the resources from the webinar like Slide Deck, Video recording of the webinar and lastly the Q&A section.

Responsive Web Design:

Responsive Web Design or RWD as it is known as, is an interesting topic in the landscape of modern day web application development. With the proliferation of mobile phones and tablets, your web page is seen not just in one screen i.e. Desktop Browser but also in Mobile Browsers and Tablet Browsers. Because of the screen size or form factor differences, it is important for your as a app developer to provide the right experience across the form factors. So in this webinar we looked at how Kendo UI is responsive and how you can build responsive screens using Kendo UI.

image

Slide Deck:

Here is the slide deck from the webinar:

Video:

As with every webinar, we have recorded this one too. Here is the video recording of the webinar for your leisure viewing:

Questions & Answers:

There was a lot of questions asked during this webinar. we were able to answer some of them during the live webinar. Here is the complete list of questions and answers to those questions:

Q: can we mix azure mobile services Apis with kendo?
A: Absolutely. Kendo UI is a client side framework. You can use it with any backend.

Q: can we integrate with Silverlight?
A: Sorry, Silverlight is a very different framework. Kendo UI is a HTML 5 framework.

Q: We have existing clients having content added in tables , can we make existing content responsive using CSS?
A: Yes. Kendo Grid provides adaptive layouts as well.

Q: Is Kendo UI necessary to develop responsive web design?
A: No not necessary. It is a framework that enables writing web applications to deliver responsive design much easier.

Q: What is the difference between Kendo UI and other similar services like Sencha?
A: Kendo UI is an HTML 5 framework for the web, mobile and data visualizations. I am not as knowledgeable about Sencha but it could be just a mobile development framework.

Q: Is it necessary to use visual studio or we can use other IDE also?
A: Any IDE can be used – Eclipse, Sublime or simply notepad 🙂

Q: Required to import Kendo UI framework/library in projects?
A: yes. that’s what gives the functionality of being responsive.

Q: Does Kendo do any polyfill ?
A: Yes. We do polyfilling under the hood. We sniff the browser and see if it supports HTML5. If not we polyfill. This is pertaining only Kendo UI controls and behaviors only.

Q: When we design a responsive web design application, is it like we wont see horizontal scroll bar?
A: Horizontal scroll bars are not considered good usability. So, responsive design avoid having them.

Q: For Kendo UI .net framework required?
A: No. Kendo UI doesn’t require .NET framework.

Q: Can Kendo UI be used with android as well?
A: Kendo UI Mobile controls can be used to create cross platform hybrid mobile applications.

Q: How does the old browsers behave with Media queries?
A: While some polyfill is available, Kendo does require modern browsers with HTML5 support to function correctly. We support IE7+, FF, Chrome and other major browsers.

Q: Does all the controls in Kendo are responsive in nature, or not?
A: Yes, they are. And then there are adaptive layouts for Grid etc.

Q: Can Kendo UI be used with android as well?
A: Yes. We have a specific module for mobile applications – Kendo UI mobile. http://www.kendoui.com/mobile.aspx

Q: How will be the performance of Kendo UI control?
A: We have optimized Kendo UI for extremely fast performance. In our studies it may be perform a lot better than some other frameworks.

Q: Is Kendo UI based on twitter bootstrap?
A: No. We have out of the box 11 themes that we ship. We have also released a Kendo UI Twitter Bootstrap theme and with this theme all our widgets will look and feel like a bootstrap scheme.

Q: Is it light weight?
A: yes, this framework is very light weight with option to assemble only the functionality that you require (reducing the size even further)

Q: Is it mandatory to know HTML5 in order to use Kendo UI?
A: yes, Kendo UI is based on HTML 5 capabilities.

Q: Is it compatible with Windows phone too?
A: Kendo UI Web controls are supported on latest and greatest browsers which support HTML5. We also have Kendo UI Mobile controls which can be used to develop cross platform hybrid mobile apps. Kendo UI Mobile are supported on all major Mobile OS.

Q: Is there any difference between ASP.NET MVC Kedo UI controls and simple Kendo UI controls?
A: The functionality is the same in both. The programming model is different. Kendo UI needs JS programming while MVC controls are programmed with Razor syntax.

Q: Can we use Kendo UI with Asp.Net MVC 4?
A: Yes. We support MVC 3+.

Q: Kendo UI is browser specific?
A: Nope. Just requires a HTML 5 enabled browser.

Q: I’m using fusionchart component for data visualization.. i want to make it responsive as my app works on iPad and desktop.. is it possible with Kendo?
A: Yes. You can use Kendo DataViz for the same. http://www.kendoui.com/dataviz.aspx

Q: can we integrate with PHP site?
A: Absolutely. There is specific wrapper for PHP as well that will allow you to continue to write PHP code. http://www.kendoui.com/server-wrappers/php.aspx

Q: Can we use Kendo UI in xcode?
A: Kendo UI is a web framework. You would be building native app with XCOde. In that case, you can use Kendo in a WebView only.

Q: How can we customize Kendo Ui to adapt style sheet css from our web application, Requirement is Kendo ui controls use the web site theme ?
A: You can use our themebuilder to customize the stylesheet instead of using the theme we ship. Take a look at our theme builder here: http://demos.kendoui.com/themebuilder/web.html

Q: can we create custom controls using Keno UI?
A: Yes. We support plugin architecture. So you can create a custom plugin and use it as a Kendo UI Widget.

Q: Is all Kendo UI controls are responsive?
A: Yes.

Q: Can Kendo UI be used with PhoneGap?
A: Yes. The specific control set for mobiles is Kendo UI mobile: http://www.kendoui.com/mobile.aspx

Q: What is right database connectivity for developing browser application using Kendo UI
A: You will need to develop a server side application that spits out REST based JSON data. In .NET, you can use WebAPI or WCF Data Services.

Q: Can we use Kendo UI in java?
A: YEs you can. We also support JSP based coding via Kendo UI wrapper for JSP. http://www.kendoui.com/server-wrappers/jsp.aspx

Q: is there any drag and drop control in Kendo UI?
A: You can check out our Drag & Drop demos here http://demos.kendoui.com/web/dragdrop/index.html

T-Shirt Give Away:

Every webinar we give away two .NET Ninja T-Shirts which have become quite popular among developers. In this webinar we have selected the following 2 persons to receive our t-shirt.

  • Dhiraj Gautame
  • Tejendra Chaturvedi

Congratulations to the winners. We will contact you on the email address you have provided to us. We will ship the t-shirt to your address. Others don’t feel bad. There are plenty of webinars to come. So keep participating and try your luck next time

Happy Coding!

How to work with Kendo UI Mobile Buttons

Learn more about Kendo UI here

In this post we will take a look on working with Kendo UI Mobile buttons and how can we change their icons and styles.

You can create Kendo UI mobile buttons as below,


<a href="#add" data-role="button">Add</a>
 <a href="#home" data-role="button">Home</a>

To create Kendo UI Mobile Button you need to follow following steps,

  • Create anchor tag
  • Set data-role as button
  • Set href as id of the view you want to navigate on click of the button

If you want to call a JavaScript function and execute some code on click of button then you need to set data-click as name of the JavaScript function.


<a data-role="button" data-click="AddFunction">Add</a>
<a href="#home" data-role="button">Home</a>

As you see in above example on click of button Add , JavaScript function AddFunction will be called. Whereas on click of Home button user will be navigated to mobile View with id home.

By default you get buttons rendered as below,

image

You can put style of buttons as well. For example you can set background colour as below,


<a data-role="button" data-click="AddFunction" style="background-color: green">Add</a>
 <a href="#home" data-role="button" style="background-color: red">Home</a>

You will get buttons rendered on mobile view as below,

image

There could be scenario in which you need to render different colours of buttons for android and iOS. Let us say you want blue colour for Android and red for iOS. You can do that by setting button styles in CSS as below,


.km-ios .buttonscolor { background-color: green; }
 .km-android .buttonscolor { background-color: red; }

Above we are overriding default style of Kendo UI Mobile Buttons. And set CSS class of buttons as below,


<a data-role="button" data-click="AddFunction" class="buttonscolor">Add</a>
 <a href="#home" data-role="button" class="buttonscolor">Home</a>

You will get buttons rendered on mobile view as below,

image

You can set icons of buttons as well. Icons can be set by setting data-icon property.


<a data-role="button" data-click="AddFunction" data-icon="add" class="buttonscolor">Add</a>
 <a href="#home" data-role="button" data-icon="home" class="buttonscolor">Home</a>

As you see we set data-icon attribute to add and home respectively. You will get buttons rendered on mobile view as below,

image

You see there are icons rendered on button now. Kendo UI provides you set of icons out of box to use.

image

You can use any of above shown icon by setting data-icon attribute. If you want you can create custom icons and set as button icon as well.

Apart from above icons Kendo UI provides you other set of icons as well. You can use them with their Unicode.

Learn more about Fonts here

So let us say you want to use telephone icon as icon of button then you can use that using the Unicode.


.km-upload:after,
 .km-upload:before
 {
 content: "\e009";
 }

And then you can use upload as value of data-icon attribute of button as given below,


<a data-role="button" data-click="AddFunction" data-icon="upload" >Add</a>
 <a href="#home" data-role="button" data-icon="upload">Home</a>

You will get buttons rendered on mobile view as below,

image

In this way you can take use of Kendo UI Mobile Buttons in your application. I hope you find this poste useful. Thanks for reading.

Learn more about Kendo UI here

Kendo UI Grid Wrapper for ASP.NET MVC – Getting Started

Overview:

In this blog post I will be exploring how to get started with our Kendo UI Grid Wrapper for ASP.NET MVC. We will take a basic usage of displaying data in a grid format in an ASP.NET MVC view. To know more about Kendo UI Web controls head over to www.kendoui.com. If you want to follow along with this blog post, you can do so by downloading a 30 day free trial of Kendo UI Complete for ASP.NET MVC.

Getting Started:

First lets create a ASP.NET MVC project. I am using Visual Studio 2012. When you install Kendo UI, we also install certain project templates which make it easy to create kendo UI based ASP.NET MVC project. I assuming you have installed Kendo UI Web for the rest of the post. In Visual Studio, select File > New Project > Web > Kendo UI for ASP.NET MVC. Give it a name and wait for Visual Studio to spin up the new project.

Datasource:

For the sake of this blog post, I will be using Northwind database. I will also be using ADO.NET Entity Model to Northwind database and use Customers table data. So go ahead and add a ADO.NET Entity Model to your project. We will use the entity data model to fetch data and bind it to the grid. I have also created a CustomerViewModel so that I can use this as the Model to the view. Here is the code for the CustomerViewModel:


public class CustomerViewModel
{
public string CustomerID { get; set; }
public string CompanyName { get; set; }
public string ContactName { get; set; }
public string ContactTitle { get; set; }
public string Country { get; set; }
}

Home Controller & Index Action method changes:

We will read the customers data, build CustomerViewModel list and add this to view as a Model. Here is the Index Action method code snippet:


public ActionResult Index()
{
var customerViewModelList = GetCustomers();
return View(customerViewModelList);
}

GetCustomers is a helper method which converts Customers entity to CustomerViewModel entity and return a list. Here is the code snippet of GetCustomers method:


private IEnumerable<CustomerViewModel> GetCustomers()
{
var context = new NORTHWINDEntities();
var customers = context.Customers.Select(customer => new CustomerViewModel
{
CustomerID = customer.CustomerID,
CompanyName = customer.CompanyName,
ContactName = customer.ContactName,
ContactTitle = customer.ContactTitle,
Country = customer.Country,
});
return customers;
}

Adding Grid to View:

In order to use a grid on a view, you will use the GridBuilder. GridBuilder supports the following overloaded methods for creating the grid:


public virtual GridBuilder<T> Grid<T>() where T : class;

public virtual GridBuilder<DataRowView> Grid(DataTable dataSource);

public virtual GridBuilder<DataRowView> Grid(DataView dataSource);

public virtual GridBuilder<T> Grid<T>(IEnumerable<T> dataSource) where T : class;

public virtual GridBuilder<T> Grid<T>(string dataSourceViewDataKey) where T : class;

in this blog post we will be using the method where it allows us to pass a IEnumerable as the data source. First lets take a look at the code snippet. Following the snippet I will explain the code in detail:


@using GridGettingStarted.Models
@model IEnumerable<CustomerViewModel>
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.ContactName).Width(140);
columns.Bound(c => c.ContactTitle).Width(190);
columns.Bound(c => c.CompanyName);
columns.Bound(c => c.Country).Width(110);
})
.Pageable()
.Sortable()
.Groupable()
.Filterable()
)

Well that’s all it takes to create a grid in MVC. Now lets go over the code in detail.

  • We pass the Model which is IEnumerable<CustomerViewModel> in this case to the GridBuilder
  • All widgets in Kendo UI needs to be named, so we provide a name using the Name() method
  • We define columns of the grid using the Columns() method. We can provide lambda expression to indicate which columns should be bound
  • In order to allow paging on the grid, we just add the Pageable() method
  • Sorting on the grid is enabled by adding the Sorting() method
  • Grouping is enabled by adding the Groupable() method
  • Similarly, filtering is provided by adding the Filterable() method

Now build the project and run the application. Following is the output of the code we just wrote:

image

Server Operation False:

At this moment if you click on a pager link or try to sort or try to group, Kendo UI Grid will be default send a request back to Server. That’s the default behavior that the grid works with. It assumes that Server would like to perform operation before getting the data. In this scenario that is not intended for me. I have got all the data that I need and I have given it to the grid. So it should do all the operation at client side rather than sending a request to server. For this to happen we just need to let the Grid DataSource not to perform server operation. This can be done by setting the Grid DataSource setting as  below:


@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.ContactName).Width(140);
columns.Bound(c => c.ContactTitle).Width(190);
columns.Bound(c => c.CompanyName);
columns.Bound(c => c.Country).Width(110);
})
.Pageable()
.Sortable()
.Groupable()
.Filterable()
.DataSource(source => source
.Ajax()
.ServerOperation(false)
)
)

now when you run the project and perform any operations, grid will not send a request to the server but do it client side.

Conclusion:

This blog post was like a primer to anybody who would like to get started with Kendo UI Grid Wrapper for ASP.NET MVC. With just 15 lines of settings you will have a full fledged grid in your app within no time. If you are interested in Kendo UI Grid, do download a 30 day free trial at www.kendoui.com.

Kendo UI Button Wrapper for ASP.NET MVC

Overview:

In this blog post we will take a look at one of the new widgets we have released as part of Kendo UI Web controls suite. For long people have been asking about why we didn’t have a Kendo UI Button in the arsenal. Well we already have a <button> element in HTML specs so we didn’t want to reinvent things. But when it comes to using Kendo UI for your app you may want to keep things in your app consistent with respect to styling. So instead of you using regular button and styling it to have a look and feel of Kendo UI style sheet, we have gone ahead and released a Button widget for you. You just instantiate the button as any other widget you have been using. The button automatically takes the style of the current Kendo UI theme you are using. So this blog post will be your primer for using the Button Widget in your ASP.NET MVC apps.

About Button Wrapper:

Kendo UI Button Wrapper for ASP.NET MVC provides a styled clickable UI widget with any arbitrary content. With Kendo UI Button Wrapper you get a consistent Kendo UI styling.

image

Basic Button Usage:

In order to create a Button, you will use the Button() builder. You will need to provide a name to the widget and the content which needs to be shown on the button. Here is the code:


@(Html.Kendo().Button()
.Name("textButton")
.Content("Submit")
)

 

Buttons with Icons:

Kendo UI Button wrapper allows you to also specify a icon as part of the button content. The icons can be provided to the button in three ways. They are:

  • SpriteCssClass Method
  • Icon Method
  • ImageUrl Method

SpriteCssClass Method Usage:

You can use the SpriteCssClass() method to provide a icon to the content. In this method the icon is provided by using a background image (usually a sprite). From web standards point of view, using a background image is better. In the below example I am using a sprite which contains flags of different country. I will create a class to point to a specific country lets say Netherlands and use that class in the Button SpriteCssClass() method. Here is the code for this scenario:


.netherlandsFlag
{
background-image: url("<path to image folder>/flags.png");
background-position: 0 -64px;
}

@(Html.Kendo().Button()
.Name("btnSpriteIconButton")
.SpriteCssClass("k-icon netherlandsFlag")
.Content("Sprite icon"))

Icon Method Usage:

You should use Icon() method when you want to use one of the predefined icons we pack as part of Kendo UI control set. You can refer our Icons Demo to get a glimpse of all the pre packaged icons. Here is the code to use the Icon() method and provide an Kendo UI Icon for the button:


@(Html.Kendo().Button()
.Name("kendoIconButton")
.Icon("funnel")
.Content("Kendo UI sprite icon")
)

ImageUrl Method Usage:

If you have any image that you want to use as a icon, you can use the ImageUrl() method and provide the image path. Here is the code for the same:


@(Html.Kendo().Button()
.Name("imageButton")
.ImageUrl(Url.Content("<a href="http://demos.kendoui.com/content/shared/icons/sports/snowboarding.png&quot;))">http://demos.kendoui.com/content/shared/icons/sports/snowboarding.png"))</a>
.Content("Image icon")
)

Here is the screen shot of the buttons with all the above 3 icon methods being employed:

image

Handling Client Side Events:

You can handle the client side event using the ButtonEventBuilder. Button has a Click event exposed. You can provide the name of the client side JavaScript function which will handle the event. Here is the code snippet for handling click event on the client side:


@(Html.Kendo().Button()
.Name("refreshButton")
.Icon("refresh")
.Content("Refresh Button")
.Events(ev => ev.Click("onClick"))
)

<script>
function onClick(e)
{
console.log("button click event handled");
}
</script>

Accessing Button Instance Client Side:

Similar to all kendo UI Widgets, an existing Button instance can be accessed via the .data() jQuery method, executed by the jQuery object on the originating element. Here is code snippet of how to access a button instance:


@(Html.Kendo().Button()
.Name("btnEdit")
.Content("Edit")
)
<script>
$(document).ready(function ()
{
var kButton = $("#btnEdit").data("kendoButton");
console.log(kButton);
});
</script>

Conclusion:

In this blog post we looked at how easy it is to work with the Kendo UI Button wrapper for ASP.NET MVC. We looked at the feature of providing icons to the button. We support 3 different types using which you can provide the icons. You can look at more Kendo UI Button demos here. Give it a spin and let us know if you have any feedback or comment.

How to defer Kendo UI Initialization scripts when using Kendo UI ASP.NET MVC Wrappers

About Kendo UI:

Kendo UI is a flagship product from Telerik which is a HTML5 powered client side JavaScript framework. We have Widgets/Controls apart from a plethora of framework level goodies like MVVM, Validation, Globalization etc. out of the box. Although this is a client side framework which means that you program against Kendo UI using JavaScript – obviously. But Kendo UI also has a server side wrapper for ASP.NET MVC very similar to HtmlHelper extensions available from Microsoft (TextBox, CheckBox etc.). What this means is, the wrappers shield you from writing JavaScript yourself and instead you code in your natural comfort zone of C# and Razor and the wrappers output the JavaScript for you. These JavaScript are the initialization scripts for the widgets.

Widget Initialization Scripts:

Kendo UI relies  on 2 things – JQuery framework and Kendo Web JavaScript file. Before you can start working with Kendo you need these 2 JavaScript file references added to your page. Assume that we have referenced the 2 script files in the head section of the page.

When you use wrappers to code on the server side, the wrappers output the necessary JavaScript code required for Kendo UI to work on the client side. Note: the wrappers do not out put the markup rather output the JavaScript which is required to initiate a widget on the client side. But the initialization code blocks are rendered right at the place where the widget was defined in your source code.

To illustrate this – lets take a simplest of the code as an example. We will use the AutoComplete Widget and see the rendered code on the client side. Here is the Razor syntax using AutoComplete Kendo UI Wrapper:

@(Html.Kendo().AutoComplete()
.Name("countries")
.Filter("startswith")
.Placeholder("Select country...")
.BindTo(new string[] {
"Bulgaria",
"India",
"Australia",
"Germany",
"USA",
"UK",
"Hong Kong"
})
.Separator(", ")
)
<div class="hint">Start typing the name of an European country</div>

Notice that we have a div after the autocomplete widget. Now at run time right click on the browser and view the source code. Here is the code that gets generated:


<input id="countries" name="countries" type="text" /><script>

jQuery(function(){jQuery("#countries").kendoAutoComplete({"dataSource":["Bulgaria","India","Australia","Germany","USA","UK"],"filter":"startswith","placeholder":"Select country...","separator":", "});});

</script>

<div class="hint">Start typing the name of an European country</div>

As you can see the initialization script code is rendered right at the place where we had defined the wrapper in our source code. This works fine as long as the Jquery and Kendo script references are done at the head level of the document. In next section we will see what happens when we move the script reference to the end of the page.

Following Best Practice for Script References:

One of the best practice of the web development is to load any scripts we need at the end of the page. What this does is it doesn’t block the page from loading. Page continues to load & render and the scripts gets loaded at the end and user does not see any blockings in the page load. But we have a problem. As seen in the previous section, the widget initialization script gets rendered at the position where the widget was defined in source code and gets executed immediately. if the Jquery and Kendo scripts are loaded at the end of the page, the initialization script will fail with errors as the frameworks are not yet loaded. Here is the error we get:

image

Deferring Initialization Scripts:

Luckily, Kendo UI Wrappers have a answer to the initialization scenario we saw in the previous section. Each of the widget wrappers expose a method called Deferred(). It’s a fluent method and will suppress immediate script statement rendering. The next question we may have is – we deferred the initialization, but how do we initialize the widget once page is loaded. Answer is, Kendo wrappers expose one more fluent method called DeferredScripts(). DeferredScripts method will output all the previously deferred initialization statements.

Here is the updated code to handle deferring the scripts:

First, I moved the Jquery and Kendo script  reference to end of the page and made a call to RenderSection. This is the section where we will out put the initialization scripts from the pages.

<script src="@Url.Content("~/Scripts/kendo/2013.2.716/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.all.min.js")"></script>
@RenderSection("PageScripts", required:false)

Second, I have called the Deferred() fluent method on the auto complete wrapper. Declared a section PageScripts and called DeferredScripts() fluent method to output the deferred statements.

@(Html.Kendo().AutoComplete()
.Name("countries")
.Filter("startswith")
.Placeholder("Select country...")
.BindTo(new string[] {
"Bulgaria",
"India",
"Australia",
"Germany",
"USA",
"UK",
"Hong Kong"
})
.Separator(", ")
.Deferred()
)
<div class="hint">Start typing the name of an European country</div>
@section PageScripts {
@Html.Kendo().DeferredScripts()
}

With the above code changes, we now have the initialization statements deferred till we explicitly call the DeferredScripts() fluent method in the PageScripts section. Here is the generated code at run time:

<input id="countries" name="countries" type="text" />
<div class="hint">Start typing the name of an European country</div>
<script src="<a href="http://localhost:39897/Scripts/kendo/2013.2.716/jquery.min.js">/Scripts/kendo/2013.2.716/jquery.min.js</a>"></script>
<script src="<a href="http://localhost:39897/Scripts/kendo/2013.2.716/kendo.all.min.js">/Scripts/kendo/2013.2.716/kendo.all.min.js</a>"></script>
<script>jQuery(function(){jQuery("#countries").kendoAutoComplete({"dataSource":["Bulgaria","India","Australia","Germany","USA","UK","Hong Kong"],"filter":"startswith","placeholder":"Select country...","separator":", "});});</script>

Conclusion:

When using Kendo UI ASP.NET MVC wrappers, you should pay attention to how you want to use the widgets. Since the wrappers output the initialization statements immediately at the position of the wrappers definition, it needs the JQuery and kendo scripts to be available upfront. If you follow the best practice of loading the scripts at the end of the page, you will need to defer the initialization statement and manually output all deferred statements after you have loaded the JQuery and Kendo scripts. This blog post introduces you to Deferred() and DeferredScripts() fluent method supported in Kendo. Hope this information is useful to you. If you have not experienced Kendo UI, encourage you to visit www.kendoui.com and take a look at our demos.

Till next time, Happy Coding!

How to perform various tasks while navigating to/from KendoUI Mobile View in Cross Platform App

Learn more about Kendo UI here

Recently while conversing with one of the customers I came across some of the following queries,

  • How to do some tasks while navigating away from Mobile View
  • How to do some tasks while navigating to a Mobile View

Let us first simplify above queries. Essentially customer wants to call JavaScript functions while navigating to or navigating away from the Mobile View. There could be following combinations of scenarios like following,

  • Perform some task before Mobile View is visible
  • Perform some task after Mobile View is visible
  • Perform some task before Mobile View is hidden
  • Perform some task after Mobile View is hidden
  • Perform some task when Mobile View is visible
  • Perform some task when Mobile View is hidden

Kendo UI Mobile View provides events for all these scenario. As a developer what all you need to do is to call various events associated with Kendo UI Mobile View. Various events with their purpose is depicted in below image,

image

Now let us consider example that you need to perform a task before Kendo UI Mobile view is getting visible. You can do that by setting data-before-show attribute of Mobile View. In below image we are setting data-before-show property to a function with name myfunct.

image

Now each time before homeview (id of the view in example is set to homeview) will be navigated or get visible a function myfunct will be called. In the same way you can set other events as attributes to achieve a particular task while navigating to or away from view. Let us consider one more example that you want to achieve a task after view is hidden. In that scenario you need to set data-hide attribute of the view. We can achieve that as given in following image,

image

In this way you can set events as attributes to achieve any tasks while navigating to and from a Mobile View. Below I am putting codes from above discussion,


<div id="homeview"
 data-role="view"
 data-title="Mobile View"
 data-before-show="myfunct"
 data-hide="myfunct1" >

 <h1>Mobile View Contnet</h1>

 </div>

<script>
 function myfunct() {

alert("Called before View is Visible");
 console.log("Called before View is Visible");
 }
 function myfunct1() {

alert("Called after View is Hiden");
 console.log("Called after View is Hiden");
 }
 </script>

I hope you find this post useful. Thanks for reading.

Learn more about Kendo UI here

How to fix ButtonGroup at the top in KendoUI Mobile View

Learn more about Kendo UI here

Recently, I was working on one of the requirement in which I had following widgets in same mobile view.

  1. Kendo UI Mobile ListView
  2. Kendo UI Mobile ButtonGroup

I had to fix position of ButtonGroup always on the top. To explain it more let us suppose there are a ListView and ButtonGroup as given in below image,

image

I have created above view with following code


<div data-role="view" data-title="Sessions" id="sessionview" data-show="getSessions">

 <ul data-role="buttongroup" data-index="1" data-select="onSelect">
 <li>Day 1</li>
 <li>Day 2</li>
 <li>Day 3</li>
 </ul>

 <ul id="sessionList"
 data-source="sessionDataSource"
 data-endlessscroll="true"
 data-template="sessionTemplate"
 data-role="listview"
 data-style="inset">
 </ul>

</div>

Only problem in above implementation is that, ButtonGroup is not fixed and when you scroll ListView it will scroll with ListView.

Fixing this or rather achieving this is quite simpler, what all you need to do is to put ButtonGroup inside a header. Essentially you need to do following,

image

Now I have modified implementation as below to achieve ButtonGroup at fixed position


<div data-role="view" data-title="Sessions" id="sessionview" data-show="getSessions">

 <div data-role="header">
 <ul data-role="buttongroup" data-index="1" data-select="onSelect">
 <li>Day 1</li>
 <li>Day 2</li>
 <li>Day 3</li>
 </ul>
 </div>
 <ul id="sessionList"
 data-source="sessionDataSource"
 data-endlessscroll="true"
 data-template="sessionTemplate"
 data-role="listview"
 data-style="inset">
 </ul>

</div>

On running application ButtonGroup is fixed at the top.

clip_image002

I hope you find this post useful. Thanks for reading.

How to fetch data from Icenium Everlive using KendoUI DataSource

Read about Icenium here

Icenium Everlive is Backend as a Service offering from Telerik. In this post we will take a look on how easily KendoUI DataSource can be used to fetch data from Icenium Everlive.

Read more about Kendo UI DataSource here

To start with, in Everlive I have created a content type with name Session. In Everlive Content type represents a data type or loosely I can say a table. I have created content type with name Sessions. Now we need to fetch all the items from Sessions content type using Kendo UI DataSource.

Very first we need to add reference of Everlive as below,


<script src="scripts/everlive.all.min.js"></script>

After adding reference create instance of Everlive as below. You need to pass Everlive application key as parameter while creating instance of Everlive. You will find application key on Everlive portal.


var el = new Everlive('W1286lVOH0DXYZ');

Now you will be amazed seeing how easily you can fetch all the items from Session content type using Kendo UI DataSource. Only you need to provide type as everlive and in transport typeName as name of Everlive Content type.


var sessionDataSource = new kendo.data.DataSource({
 type: 'everlive',
 transport: {
 typeName: 'Sessions'
 },
 schema: {
 model: { id: Everlive.idField }
 }

});

While fetching data from Everlive using Kendo UI Data Source, we need to set following

  • type as everlive
  • In transport typeName as content type name. You need to provide name of the content type which data items you want to fetch. In this case we want items of Sessions content type so typeName is Sessions

You can verify in any debugger console that data is fetched from Everlive in Kendo UI DataSource.

clip_image002

Now once you have data at the client side you can use them as of your requirement. You can bind that ListView , GridView etc. I hope you find this post useful. Thanks for reading.