Kendo UI Mobile Cordova Templates for Hybrid Mobile Apps

Hybrid Mobile Apps are one of the ways in which you can create a cross platform Mobile Applications using HTML/JavaScript/CSS technologies. The key here is Cross Platform. I want to write once and want to take my app to all platforms. One of the quickest ways is the Hybrid Way. Although Hybrid has its disadvantages when it comes to scenarios like high graphical UIs – it is a good choice when we have a simple data entry kind of scenario. In this blog post i will introduce you to Kendo UI Mobile templates we have done. These templates will speed up your Cordova based Hybrid Mobile App development. These templates make use of our Open Source Hybrid Mobile UI Framework called Kendo UI Mobile. Continue reading

Advertisements
Kendo UI Chart - Custom Series Colors

How To: Provide Custom Series Colors for Kendo UI Data Visualization Charts

In this blog post i will take a look at one of the simplest API configuration we have for Kendo UI Data Visualization. When you use Kendo UI Data Viz to plot a chart have you ever wanted to provide your own custom colors for the series in the chart. If yes, well read on – i will show you how to achieve custom colors on series using Kendo UI Data Viz. Lets get started. Continue reading

Kendo UI Chart with Angular

How to: Drill Down Kendo UI Chart using Angular JS 1.X

Recently a customer was evaluating Kendo UI for one of their applications. Their team was using Angular JS as the UI framework. They wanted to know how to achieve a drill down on Kendo UI Chart with Angular JS. Now, Kendo UI has always supported Angular JS 1.x directive out of the box. Eventually i built a small demo on how to achieve this to showcase it to the customer. I thought why not turn this to a blog post and hence this post. I will be walk you through on how to create a drill down Kendo UI Chart with Angular JS 1.x. Lets get started. Continue reading

Kendo UI Grid

Video: How to add custom Date filter column in Kendo UI Grid using ASP.NET MVC Wrapper

Recently i wrote a blog post showcasing how to add a custom Date filter column in Kendo UI Grid using our Telerik  UI for ASP.NET MVC wrappers. You can find the blog here. In this blog post i will be providing a screen case i have recorded where i give you step by step instruction on how to create a custom Date filter column. If you have read the blog post – now you get to see it in action. Continue reading

Kendo UI Grid

How To: Custom Date Filter Column in Kendo UI Grid using ASP.NET MVC Wrapper

In one of my previous blog post, i had written about how to have a custom date filter column in Kendo UI grid but the JavaScript way. You can read about it here. Video version of that blog post is available here. In this blog post i will showcase how to achieve the same scenario but using ASP.NET MVC Wrapper. Continue reading

Kendo UI Grid

Video: Custom Date Filter Column in Kendo UI Grid (JavaScript)

In my previous post here, i talked about Kendo UI Grid & Custom Date Filter column using JavaScript. I have recorded a screen cast on the same subject. In the screen case you will be able to follow the step by step instruction to create a custom date filter column. Below you will find the screen cast recording:

Hope the video helps you if you have a similar requirement in your projects.

Till next time – Happy Coding !

Kendo UI Grid

Video: How to Scaffold Kendo UI Grid in ASP.NET MVC Applications

Kendo UI is one of our popular controls set when it comes to HTML5 based app development. Kendo UI is client side UI framework and you work with Kendo UI using JavaScript. But if you are coming from ASP.NET MVC background you may be familiar with the concepts of HTML helper. Helpers are nothing but a shorthand to otherwise writing lengthy HTML code. With our UI for ASP.NET MVC product we provide what we call as “Kendo UI Wrappers for ASP.NET MVC” a.k.a Kendo UI helpers in ASP.NET MVC.

Grid control or widget as we call it – is one of the most widely used widget in Kendo UI. When you install our UI for ASP.NET MVC we also install Kendo UI Scaffolder. Scaffolding is a handy productivity feature in Visual Studio where the Scaffolder generates all the boiler plate code necessary. Our Kendo UI Scaffolder can scaffold Grid code for you – without you writing a single line of code.

In the below video i have tried to capture the steps required to perform a Kendo UI Grid Scaffolding in your ASP.NET MVC applications. The video is like a Step by Step instruction for you to follow:

Hope this video gives you a jump start if you are planning to use Kendo UI Grid in your ASP.NET MVC applications.

Till next time – Happy Coding !

Video: Building Enterprise Dashboards in Minutes using ASP.NET MVC

In my previous blogs post here, i talked about our Telerik UI for ASP.NET MVC and Dashboard Project Template that we provide for Visual Studio. In this blog post i have a screen cast created which shows how to use the Dashboard Project Template. In the screen cast i go over the process of using the Dashboard Project Template in a step by step manner. Continue reading

UI for ASP.NET MVC

Creating Dashboard in Minutes using Telerik UI for ASP.NET MVC

In this blog post i will be talking about one of our products named “UI for ASP.NET MVC”. As part of the product we provide certain productivity improvement things and in this blog post i will showcase one such feature namely – Project Templates. Using Project Templates you can jump start your ASP.NET MVC project using Kendo UI. We have a specific template which helps you create Dashboard within minutes. So lets take a lap around this Dashboard Project template now. Continue reading

Kendo UI

Resources from Webinar “Coexist: AngularJS 2.0 and React with Kendo UI”

On Jun 23 2016 we conducted yet another webinar. This time we talked about Kendo UI Components for Angular JS 2.0 and React JS. This blog post is a recap of the webinar. You will find the slide deck and video recording in this blog post. If you missed attending live or had to leave in between dont worry – we have you covered. Just go through this blog post to catch up on what you missed. Continue reading

UI for ASP.NET MVC

Get Up & Running with Telerik UI for ASP.NET MVC Project Templates

As a team working on a project one of the key aspects of development is productivity. You want to get up & running with your project as fast as you can. You don’t want to spend time on some mundane things, rather you want to leapfrog your development. That’s almost every project teams #1 priority and wish. Today, in this blog post i will be talking about how our product known as “UI for ASP.NET MVC” can help you jump start your ASP.NET MVC (3 to 5) projects. Let’s get things rolling now. Continue reading

Kendo UI

Kendo UI Data Source Offline Storage + OData V2 – Cannot read data from offline storage

Kendo UI is our flagship product when it comes to HTML5 based UI. Kendo UI provides Web, Data Visualization and Mobile widgets for building HTML5 Apps/Sites. One of the cool features of Kendo UI is the support for storing data offline when using our Data Source. We introduced this offline support as part of our Q2 2014 SP1 release. With offline support the data bound Kendo UI widgets will continue to work even when the server connection is not available. With this support users can continue working with the available data till the network connectivity is resumed.

Kendo UI

Kendo UI

Offline Feature of Kendo UI Data Source:

The way Kendo UI Data Source supports offline functionality is through a property called “offlineStorage”. We give a unique string value to this property. This value for “offlineStorage” will be used by the data source to create a key in local storage and save the data there. We need to let the data source know if its online of offline. This helps the data source decide whether to ping the remote end point or read from local storage. Data Source exposes a method named “online()” and expects a Boolean property to indicate online or offline.

Here is a code snippet of how you would use the offline feature of data source:

We are setting a type property on data source to a value “odata”. This lets the data source know that it has to communicate using the OData V2 specification. Since we have set the property offlineStorage, data source will automatically store the data it receieved from server in the local storage key “allProducts”. We then let the data source know if we are online or offline by using the online() method.
At this point it’s important to understand the shape of the data that OData service returns when asked in JSON format. Following is a glimpse of the payload we get from an OData V2 GET request on any collection:

As you can see, the data is in a results array and is part of the padded “d” object. Now, Kendo UI Data Source understands all this and will be able to parse the payload and use the results array as the data. And it will save the data array to local storage also since we have provided an offlineStorage key. Note: data source will not save the entire payload to local storage. It will only store the data array found in the results property.

The Problem:

Everything is all right so far. So what is the problem you may ask? Let me explain it below:
Let’s assume the mobile app will be used by the user when he has network connection. The GetOnline() method will detect the status and return the Boolean value accordingly. So when there is a network connection, we set the online status of data source to true and it will go ahead make a request to the remote OData end point. The service will return the data in JSON format, data source will pass the payload, use the data array in the results property, and then store the data array in the local storage.

Let’s assume that the mobile app needs to be used when there is no network connection. Theoretically it should work. Why you ask – well we had told the data source to store the data offline in local storage. So whenever there is no network connection on the device and when we let the data source know that it is offline, we think that it will read data from local storage and everything should work normally. Well I thought so too. But we get the following error:
“TypeError: Unable to get property ‘results’ of undefined or null reference”

Hmm, it doesn’t work as expected. Well what is wrong then? Remember I said that the data shape of the odata GET on any collection is actually “d.results”. Well when data source sees that its offline, it will simply go ahead read data from the local storage. But the parsing logic is looking for “d.results” property on the saved data. Whereas the saved data in local storage is just a plain data array. It does not contain the padded d object and results property on d object. Hence the parser is looking for the d.results, doesn’t find it and throws up an error.

The Solution:

Kendo UI data source has a schema property exposed. Using the schema property, we can tell the parser where to look for the data in the payload. We do that by setting the data property of schema. In our case we just need to let the parser know that if it finds “d” padded object on the payload, it can then get the data from the results data array. Else just use the payload as it is because probably it’s the local storage data that was read. Just a simple if else condition to get out of this situation. Here is the code snippet:

With the above code changes, now whenever the data source in in offline mode, it will be able to read the data correctly from the local storage.

The above code is available as a demo here: http://dojo.telerik.com/@kashyapa/itUMe/2

Hope this helps anybody who has faced a similar situation.

Till next time, Happy Coding.