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
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
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
Hope the video helps you if you have a similar requirement in your projects.
Till next time – Happy Coding !
This post is one of the Customer Problem Solution kind of blog post. I will be talking about a requirement i was given and the solution to that requirement. If you had a similar requirement in any of your projects – well the solution is available in this post. So read on. Continue reading
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 !
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
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
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
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 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.
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.
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.
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.