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

RadMap rendering OpenSTreetMap map

How To: Use RadMap in your ASP.NET AJAX Web Applications

In this blog post i will take a lap around on of the interesting controls we have in our Portfolio. UI for ASP.NET AJAX is one of the popular control suites in our portfolio. As part of the suite we have “RadMap” – an Server Control which renders HTML5 based map on your web page. Rest of this blog post will focus on how to getting started with RadMap. If you want to quickly jump to the demos we have and take a sneak peek – well head over here. 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

Cordova Logo

How To: Use Pre-populated SQLite DB in your Hybrid Apps

In my job as an Evangelist, i speak to numerous customers of ours. Many a times the customer is in an evaluation mode. They are trying out our tools and have plenty of questions on their mind. My job is to talk to them, understand their problem and provide a solution. I must say I love this exercise, as i get to hear a new problem with every new customer we talk to. Figuring out a solution to a challenge is always a happy moment. Today we discuss one such problem that a customer was facing with respect to Hybrid Mobile Apps.

Continue reading

Telerik Reporting

Video: Telerik Reporting with Visual Studio 2013 in WPF Applications

Recently, i was talking to a customer who was evaluating Telerik Reporting. They were on Visual Studio 2013 and wanted to use Telerik Reports in WPF application. But they were having difficulty getting started with our Reporting. In order to make things easier, i have recorded a getting started video for Telerik Reporting using Visual Studio 2013 and consuming the report in WPF application.

Here is the video:

Hope this helps anybody who is working on our Reporting software & WPF platform.

Till next time, Happy Coding.

How To Get Started With Telerik’s ASP.NET AJAX Controls

Overview:

Recently when talking to one of our clients, I had a question from them. They said your demos are great and covers most of the scenarios but when I take a particular control lets say Grid, how do I get started. Well that question prompted me to write this blog post. So if you are one of those who get the exact question in your mind about our controls, then do read on.

About Telerik’s ASP.NET AJAX Controls:

RadControls for ASP.NET AJAX is a complete development tool set for developing web sites or web apps based on ASP.NET AJAX technology. Our suite for ASP.NET AJAX contains nearly 70+ controls and helps you in rapid UI development. We also provide you with nearly 15 themes out of the box. If this excites you, check out the product page here: http://www.telerik.com/products/aspnet-ajax.aspx

ASP.NET AJAX Controls Help Documentation:

Almost all suites of Telerik have a very rich documentation support. Various formats of help is available. You can choose which mode you want to use the help documentation. If you navigate to page – http://telerik.com/help, it will list all suites help options. We will concentrate on ASP.NET AJAX controls for now. Here is the screen shot of the page with ASP.NET AJAX Controls Help Documentation Options:

image

Lets spend a moment here to understand the help options. For ASP.NET AJAX we have the following resources:

  • Online Help or you can download a copy of CHM format, MS Help 2 format or MS Help 3 format. Clicking on “Online Help” will give you the documentation online. Where as other options you can download the help documentation on to your hard disks.
  • Step-by-step tutorial – the name says it all
  • Knowledge Base – a vast base of knowledge articles for you to do a quick glance at
  • Code Library – a vast library of codes for specific scenarios or requirements

For this blog post I will consider the “Online Help” option and point you to resources there. This will be the same for other formats too.

Navigating Help Documentation:

If you are starting new on a specific control, first thing you should do is to head over to the help documentation and get to the section which deals with the control you want work with. II f you navigate to online help link which is at http://www.telerik.com/help/aspnet-ajax/introduction.html, you will see the following page:

image

If you notice the help documentation page, we have a tree on the left hand side. This tree lists down a lot options for you to get help on. I have highlighted 2 sections, namely – RadControls for ASP.NET AJAX Fundamentals and RadControls. The RadControls for ASP.NET AJAX Fundamentals will give you fundamental details about ASP.NET AJAX and about the RadControls itself. If you want to get to the documentation of controls you will need to expand the section “RadControls” which then will list all of our controls. As a shortcut, on the center section of the online help page, you will see links to controls directly and you can click on your control of interest. You will be navigated to that controls Documentation now.

Getting Started with a Control:

Now that you know how to navigate to the Help Documentation, the next step is to figure out getting started with a control. Remember the short cut I said that is available on the help documentation home page – well find the control you want to learn and click on it (the control name is a hyperlink which will take you to its documentation). For this exercise I will take our most popular control Grid and walk you through. Once I click on the RadGrid hyperlink, it will take me to RadGrid for ASP.NET AJAX Overview page. The left side tree on the page will now have the node RadGrid under RadControls be default selected and the sub nodes under it would have been expanded.

image

Now you will see a sub node called Getting Started. Click on it to expand the node. You will now see a child node which says “Getting Started with RadGrid for ASP.NET AJAX”. Click on the link and you will get a step by step guide on how to start working with our Grid.

image

And that’s it – now you can first go through the getting started, understand steps required to get a Grid on your page and start using the grid.

Looking at the Demos:

Now that you know how to get started with the Telerik RadGrid, next step would be to start looking at our demos to understand different features and how to work with those features. In our demos we try to provide you with all the scenarios in which a Grid will be used in real world applications. So take a look at the demos online here – http://demos.telerik.com/aspnet-ajax/. Note that, when you download our product, the same online demo is shipped and installed on your hard disk. So you can just open the local demos right from your hard disk and go through them.

image

Telerik TV:

Another great resource for anybody getting started with our Telerik Suites is to look at our Telerik TV. This is a public site available on the internet and you don’t need to be a licensee of Telerik to access the site. Telerik TV has videos on all of our products which are short in nature and very focused on a particular feature of a control. These videos are created by evangelists like me in Telerik. Personally I use this a lot to quickly understand how to work with a control. I highly recommend book marking this one in your browsers. Here is the Telerik TV URL: http://tv.telerik.com

Conclusion:

Whenever you are starting new, without knowing the right resources and guide its little tough to get started. Idea of this blog post was to hold your hand and walk you through various resources we here at Telerik have to make your experience of developing with Telerik controls an easy one. Personally as a developer at heart first place I go to is our documentation to understand the control and to go over its API exposed. Next stop would be Telerik TV and finally a look at the demos to understand different features and scenario in which the control can be used. Hope these simple steps will help you all with your evaluation of Telerik controls and make it much more easier and simpler to evaluate. Do feel free to get in touch with us in case you need further assistance.

Making sense of the Enterprise Mobility

imageMobile apps have mostly meant games and a few more utility apps. While this is a large section of the mobile app ecosystem, there is a potentially lucrative market waking up now to the possibilities of mobile apps – The Enterprise.

The enterprise mobility requires a different set of considerations than the consumer oriented mobile apps. While in-app ads, mobile commerce, frame rates, access to a RadBackend (or mBaas) may be important for consumer apps, the enterprise looks for value elsewhere.

For long enterprises have controlled the hardware and the software that is allowed within its premises for reasons of security, resource optimization and IT management. These days employees are getting their own mobile devices into the enterprise leading to a more heterogeneous environment.

A story that illustrates this is about an enterprise that adopted WiFi to make it easy for employees to work on their laptops anywhere in the building. The load was calculated keeping in mind the number of laptops in the organisation (a decent assumption). The infrastructure collapsed within a week of it launching. On investigation, the IT realized that the devices logging into the WiFi system were more than double of what was planned for. The sneaky addition was the mobile devices of the employees  (outnumbering the laptops easily)!

Now, let us look at the requirements that an enterprise or small & medium business might have of the mobility application platform that they may use:

Support for heterogeneous devices

The BYOD trend can saddle an enterprise with multiple platforms – Android, iOS, Windows Phone & BlackBerry. Add to it the complexity of different form factors for each platform. The mobile apps need to accommodate and embrace this heterogeneity.

Legacy Hardware Infrastructure

A lot of infrastructure is in production in an enterprise. This may include the LAN architecture and the servers in use. The enterprises will need to add WiFi infrastructure and provision for the additional load on the IT servers by the way of mobile.

With mobility, users will also want to access data from outside the corporate network. The organisation may need to revisit its IT policies to allow data access from outside corporate network.

Security

The enterprise first needs think about securing the mobile devices though policies (e.g. password, retention). An investment needs to be made in the device management software allowing for capabilities like platform upgrades, remote wipe/lockout.

The next step is to plan user authentication via the mobile apps. Mobile apps are thick clients and need a different authentication mechanism(s) than currently used. Extending LDAP or ADFS infrastructure becomes necessary here.

Apart from authentication, one needs to consider authorization in the mobile apps. Consider the nightmarish scenario of  HR deptt accessing sales apps and employees accessing executive dashboards.

Integration with Business Apps

imageIT has become the backbone of the modern enterprise. Various business applications (e.g. SAP, Oracle, Salesforce, SharePoint) are driving the everyday business processes. Mobile devices require a different set of endpoints to be exposed (namely webservices). The enterprise needs to consider the extensibility of the apps to accommodate this requirement.

Enterprise App Stores

The mobile app ecosystems are tightly controlled by the platform vendors. The devices are only allowed to download apps from the “official” marketplaces of the devices. This leads to exposure of apps meant for the employees of the organisation to the masses. This risk can be mitigated by integrating secure login into the application.

Another option is to deploy an enterprise app store working with the platform vendors. This option may be more expensive and resource intensive (think registering devices in the app stores).

Development Choice

The enterprise needs to make a decision on the the development technology and the tool of choice. Today, the options exist between Native Development or Hybrid Development. Hybrid development offers a host of benefits including reuse of existing skills, cross platform development and lower hardware requirements for mobile app development.

I believe that today’s enterprise requirements are very well met with the Hybrid Mobile Development approach. In a recent report by reserach2guidance, they found the following:

“The majority of users say that CP (Cross Platform) Tools have saved them time compared to native app development. Almost 45% of the users estimate time-savings of 50% and more.”

Equally important things to consider would be requirements, configuration, bug and release management for the application development phase.

Mobile Testing

The mobile apps should perform as per expectations. Having a good quality team to whet the quality of the initial release is very important. Even more important is to have an automated process in place to verify each app release meets the quality bar of the organization.

App Analytics

This is an area that hasn’t been paid much attention to but would pay tremendously if included in the mobile app. Knowing the features of apps that are most widely used allows the enterprise on developing those features further. Also, knowing the detailed crash reports help to pinpoint the buggy sections of the code improving the reliability of the apps.

Synchronization/ Offline Capabilities

This is one non-functional requirement that takes special meaning in the mobile app scenarios. Since the mobile app works in the sometimes disconnected environment, it is important to have some offline way of caching data.

One needs to take care of the scenario where the server may not be available at intermediate times. Even at these times, the mobile app should provide some critical functionalities to the users.

Backend Services

While mBaaS services are in vogue today, they have limited value for the enterprises. The main challenge is that mBaaS are public cloud services. An enterprise may be reluctant to host its data in a public cloud due to security considerations. In addition to file and data storage, mBaaS services may also provide notification services, geolocation services, login services, digital wallets, audience segmentation and device management capabilities. The enterprise may consider mBaaS services if they require any of the above services.

How to ask questions in Telerik Forums?

Recently one of our customer sent me mail that how could I ask questions in Forums. She was a fresher with assigned job to work on Rad Controls for AJAX. I helped her over the call and found a step by step guide could be useful for many Telerik products users. To ask question in forums follow following steps,

Step 1

Navigate to http://www.telerik.com/ and login with your Telerik Credentials. You should able to see your name at the right top.

clip_image001

 

Step 2

Next select the specific product for which you want to ask question. Let us say you want to ask question for any of the DevTools. From top click on Product Families and select DevTools.

clip_image003

Step 3

Now from menu select Community & Support and then choose Forums.

clip_image004clip_image006

Step 4

Next you need to choose specific product. Let us assume you want to ask question for Rad Controls for AJAX. For that choose ASP.NET AJAX

clip_image008

Alternatively you can search in entire forum also. For that put your search term and click green Search button.

Step 5

Now you need to select category of your question. For instance if you want to ask question for Calendar control then choose Calendar from listed option. After choosing category click on green New Thread button to ask question.

clip_image010

While asking question following points are important,

  • · Give descriptive title of the question.
  • · Embed code using code button from menu
  • · Be specific in asking question.

At end make sure to check subscribe me to this thread such that on every reply you get a mail.

clip_image012

In this way you can ask questions in forum. I hope you find this post useful. Thanks for reading.

Step by Step Creating WCF Data Service using Telerik Open Access ORM

In this post we will learn step by step to create WCF Data Service using Telerik Open Access ORM. We will create data model of data from SQL Server and further exposed that as WCF Data Service using Telerik Open Access ORM.

Learn more about Open Access ORM here

We are going to follow step by step approach. To create WCF Data Service follow the steps given below,

Step 1: Create Telerik Web Access Web Application project

After installation of Telerik Open Access ORM you will get Telerik Web Access Web Application project template while creating a new project. Go ahead and create a project selecting Telerik Web Access Web Application project template from Web group

image

Step 2: Create Domain Model

Next you will be prompted to create Domain Model. Open Access ORM allows you to create domain model from any of the following type of database. If required you can create Empty Domain Model as well.

image

Let us go ahead and create data model from Microsoft SQL Server. Choose Microsoft SQL Server from drop down and click on the Next.

Step 3: Setup Database connection

In this step you need to set up Database connection. Either you can provide Connection String manually or can create a New Connection. To create new connection click on Add New Connection. You will get window to add new connection. In this window provide database server name and choose database from the dropdown. To test the connection click on Test Connection and after successful testing click on Ok to add a new connection.

image

Step 4: Setup Database Connection

In this step you need to setup database connection. If you want you can change connection string name. Let us leave it to default and click on the Next.

Step 5: Choose Database Items

In this step you need to choose

  • Schemas
  • Tables
  • Views
  • Stored Procedure to create data model.

Let us say we are choosing only one table to create data model. After choosing items click on the next .

image

 

Step 6: Define Naming Rules

In this step you can define naming rules of Classes, Fields and Properties if required. Let us leave to default and click on next to proceed further

Step 7: Code Generation Settings

In this step you can configure Code Generation Settings. Let us leave settings to default and click on Finish to generate data model.

Once Data Model is created you will find *.rlinq file added in the project. Click on *.rlinq file to view the data model.

image

Step 8: Add Open Access Service

By step 7 you have created data model. Now let us go ahead and add WCF Data Service on the created Data Model. For this right click on the project and select Add Open Acccess Service. You will be prompted with Add Open Access Service Wizard. Before adding Open Access Service make sure that once you have built the project.

You need to choose

  • Context : Select Context from the drop down
  • Project : Use the existing project

image

Click on the Next after selecting Context and Project.

Step 9: Select Service Type

In this step you need to choose type of Service you want to create. Since we want to create WCF Data Service, let us choose that from the option and click on the next.

image

Step 10: Choose Entity to expose a part of the Service

In this step we need to choose entity to expose as part of service. Since there is only one entity choose that and click on the Next

image

In last step you can preview various References being added and changes to config files. Click on Finish to create Service. After WCF Data Service being created you can test that in browser. Run the application and browse to *.svc to test the service in browser.

You should get data of People in browser as below after successful creation of the service.

image

Conclusion

In this post we learnt to create WCF Data Service using Open Access ORM. I hope you find this post useful. Thanks for reading.

How to work with Pie Charts in JavaScript based Application for Windows 8

In this post we will take a look on working with Pie Charts in JavaScript based Application for Windows Store. We will follow step by step approach in this blog post.

Step 1: Add References

Very first we will add Telerik JS and CSS files references in the project. If first time you are working with Rad Controls in Windows 8, I suggest you to read blog post to setup the environment

After adding the files in the project we need to refer them on the html file . Files can be referred as given in following code snippet.

<!--Telerik References -->
 <script src="/Telerik.UI/js/jquery.js"></script>
 <script src="/Telerik.UI/js/ui.js"></script>
 <link href="/Telerik.UI/css/dark.css" rel="stylesheet" />
 <link href="/Telerik.UI/css/common.css" rel="stylesheet" />

Step 2: Create a Chart

A Pie chart can be created by setting data-win-control attribute of a div as Telerik.UI.RadChart and setting series type as pie


<div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [{
 type: 'pie',
 data : [

{value:30,category:'Math'},
 {value:20,category:'Physics'},
 {value:22,category:'Chemistry'},
 {value:28,category:'Economics'}

 ],
 lables :
 {
 visible:true
 }

 }
 ]}"

 />

&nbsp;

In above code snippet,

  • We are setting data-win-control attribute as Telerik.UI.RadChart
  • In data-win-options , series type is set as pie
  • In data-win-options data is set locally.
  • Data array contains two properties. They are values and categories

At this point if we go ahead and run the application, we will get an output something like below

image

Step 3: Configure More Pie Chart options

You can configure common options of char series as discussed in this blog post . Apart from common options you can configure options like following,

  1. colorField
  2. explodeField
  3. categoryFiled

Assume you have data source as following

image

You can configure these values for pie chart as following

image

On running you will pie chart as following. You will find that colours of categories have been changed.

image

You can explode a category as following. Even though in following example we are setting explode attribute with explode property in data array, you are free to set any property of data array as explode field by setting explodeField attribute as we set colorField.

image

On running you will pie chart as following.

image

In this we can work with pie charts. Below is the consolidated code of above discussion


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>TestDemoJavaScript</title>

<!-- WinJS references -->
 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
 <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
 <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!--Telerik References -->
 <script src="/Telerik.UI/js/jquery.js"></script>
 <script src="/Telerik.UI/js/ui.js"></script>
 <link href="/Telerik.UI/css/dark.css" rel="stylesheet" />
 <link href="/Telerik.UI/css/common.css" rel="stylesheet" />

 <!-- TestDemoJavaScript references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
</head>
<body>

 <h1>Chart Demo</h1>

<div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [{
 type: 'pie',
 data : [

{value:30,subject:'Math',color :'red',exlode : 'true'},
 {value:20,subject:'Physics',color:'blue',explode:'false'},
 {value:22,subject:'Chemistry',color:'green',explode:'true'},
 {value:28,subject:'Economics',color:'gray',explode:'true'}

 ],
 field: 'value',
 categoryField: 'subject',
 colorField :'color',
 lables :
 {
 visible:true
 },
 tooltip :
 {
 visible : true
 }

 }
 ]}"

 />

&nbsp;

</body>
</html>

&nbsp;

Future Post

In this post we learnt working with pie Charts. We focused on only one type of series. In further posts we will explore various series type and working with remote data in the Rad Chart. I hope you find this post useful. Thanks for reading.

Working with RadAutoCompleteBox in JavaScript based Application for Windows Store

In this post we will take a look on working with RadAutoCompleteBox in JavaScript based Windows Store Application.

Getting Started with RadAutoCompleteBox

You can create RadAutoCompleteBox by setting data-win-control property of a div or span as Telerik.UI.RadAutoCompleteBox. See the code below,


<div id="sportsAutoComplete"
 data-win-control="Telerik.UI.RadAutoCompleteBox"
 data-win-options="{placeholder:'enter player...'}">
</div>

In above code

  • data-win-control attribute of div is set as Telerik.UI.RadAutoCompleteBox
  • In data-win-options attribute

You can set datasource of RadAutoCompleteBox in two ways. You can directly set datasource either in data-win-options attribute or in the JavaScript function. You can set datasource in code behind as following,


var sportsArray = ['Sachin Tendulkar', 'Saurabh Ganguli', 'MS Dhoni', 'Rahul Dravid', 'Kevin Pierson', 'Kalis'];
 var sportsAutoComplete = document.getElementById("sportsAutoComplete").winControl;
 sportsAutoComplete.dataSource.data = sportsArray;

In above code we are

  • Creating an array named sportsArray
  • Creating reference of RadAutoCompleteBox as winControl
  • Setting datasource of RadAutoCompleteBox with the sportsArray

At the point if you run application you should get Auto Complete Box as following,

image

Working with Template for RadAutoCompleteBox

There may be scenario when you need to set data source of RadAutoCompleteBox to array of complex objects. For example there is an array as following,

 var movieArray = [
 { title: "The Artist", picture: "images/TheArtist.jpg" },
 { title: "A Better Life", picture: "images/abetterlife.jpg" },
 { title: "Abduction", picture: "images/abduction.jpg" },
 { title: "African Cats", picture: "images/africancats.jpg" },
 { title: "Angel Crest", picture: "images/angelscrest.jpg" },
 { title: "Arthur", picture: "images/arthur.jpg" },
 { title: "Anonymous", picture: "images/anonymous.jpg" },
 { title: "A Dangerous Method", picture: "images/adangerousmethod.jpg" },
 { title: "A Good Old Fashioned Orgy ", picture: "images/agoodoldfashionedorgy.jpg" },
 { title: "A Seperation ", picture: "images/aseparation.jpg" },
 { title: "Another Earth ", picture: "images/anotherearth.jpg" },
 { title: "A Heartbeat Away ", picture: "images/aheartbeataway.jpg" },
 { title: "Bad Teacher ", picture: "images/badteacher.jpg" },
 { title: "Begineers ", picture: "images/beginners.jpg" },
 { title: "Brotherhood ", picture: "images/brotherhood.jpg" },
 { title: "Bridesmaids ", picture: "images/bridesmaids.jpg" },
 { title: "Born To Be Wild ", picture: "images/borntobewild.jpg" },
 { title: "Blackthorn ", picture: "images/blackthorn.jpg" },
 { title: "Bellflower ", picture: "images/bellflower.jpg" },
 { title: "Butter ", picture: "images/butter.jpg" },
 { title: "Bunraku ", picture: "images/bunraku.jpg" },
 { title: "Cars 2 ", picture: "images/cars2.jpg" },
 { title: "Cost Of A Soul", picture: "images/costofasoul.jpg" },
 { title: "Carnage ", picture: "images/carnage.jpg" },
 { title: "Crazy Stupid Love ", picture: "images/crazystupidlove.jpg" },
 { title: "Cracks ", picture: "images/cracks.jpg" },
 { title: "Colombiana ", picture: "images/colombiana.jpg" },
 { title: "Cedar Rapids ", picture: "images/cedarrapids.jpg" },
 { title: "Captain America ", picture: "images/captainamerica.jpg" },
 ];

You can set this array also, as data source of RadAutoComplte Box. This can be done as following,


var movieAutoComplete = document.getElementById("movieAutoComplete").winControl;
 movieAutoComplete.dataSource.data = movieArray;

On HTML RadAutoComplete with id movieAutoComplete is created as following

<div id="movieAutoComplete"
 data-win-control="Telerik.UI.RadAutoCompleteBox"
 data-win-options="{placeholder:'enter movie...',
 template:moviestemplate,
 dataTextField: 'title'}">
</div>

  • Placeholder is set as enter movie
  • dataTextField is set as title . title is one of the property in array.
  • template is set as moviestemplate. Template decides how data will be displayed in the control. Template can be created by setting data-win-control property of a div or span as WinJS.Binding.Template

We have created moviestemplate as following

<div id="moviestemplate" data-win-control="WinJS.Binding.Template">
 <div style="width: 100px;height: 100px;">
 <img src="#" style="width: 70px;height: 70px;" data-win-bind="src:picture" />
 <h4 data-win-bind="innerText:title" />
 </div>
 </div>

We are binding title of the array to h4 element and picture property of the array to image element. When you run the application, you should get RadAutoCompleteBox as following

image

Working with onSelect Event

You can read the selected item in RadAutoCompleteBox in onSelect event. You can attach select event and read the selected value as given in following,

movieAutoComplete.addEventListener("select", function (e) {
 document.getElementById("selectedmovie").src = movieAutoComplete.dataItem(e.item.index()).picture;
 });

In above code selectmovie is id of the image element. Image of the selected movie item will be displayed.

So in this way you can start using RadAutoCompleteBox in application. I hope you find this post useful. Thanks for reading.

Working with RadDropDownList in JavaScript based Windows Store Application

Read here to set up environment to use RadControls in your application.

In this post we will take a look on working with RadDropDownList in JavaScript based application for Windows 8. RadDropDownList allows you to select one item from list of items.

Getting Started with RadDropDownList

You can create a RadDropDownList by setting data-win-control property of a span or div element as Telerik.UI.RadDropDownList. You can do that as following,


<span id="sportsdropdown"
 data-win-control="Telerik.UI.RadDropDownList"
 data-win-options="{height: 250,
 dataSource:['Cricket','Soccer','Tennis']
 }"
 >
 </span>

RadDropDownList allows you to select an element from the list of elements displaying in drop down. RadDropDownList can display a local array or data returning from remote service as data. dataSource property of RadDropDown defines the data to be displayed . In above RadDropDown we have set the dataSource with inline array in the data-win-options. You can also bind dataSource of RadDropDownList from array defined in other files or JSON data returning from the remote services.

Let us say there is an array on default.js as following


var sportsArray = ['Cricket','FootBall','Hockey','Tennis','BaseBall'];

To set it as dataSource of RadDropDownList, first you need to create a Namespace. You can create that as following,

WinJS.Namespace.define("sportsdata", { sports: sportsArray }
 );

So far we have create array and namespace. Now you can set dataSource of RadDropDownList with array defined on default.js as following,

<div id="sportsdropdown"
 data-win-control="Telerik.UI.RadDropDownList"
 data-win-options="{height: 250,
 dataSource:sportsdata.sports
 }"
 >
 </div>

On running the application you should get RadDropDownList as populated with data from sportsArray as following,

image

Working with Remote Data

Above we used local data as dataSource of RadDropDownList. We can bind data from remote data source as well. For example if we want to display movies title from Netflix we can do that following below steps ,

  • Make a call to Netflix Odata serveice
  • Parse the resturned JSON
  • Construct array from parsed JSON data
  • Set array as datasource of RadDropDownList

WinJS.xhr({
 url: "http://odata.netflix.com/Catalog/Titles" + "?$format=json&$select=ShortName,BoxArt&$top=300"
 }).then(function (xhr) {
 var movies = JSON.parse(xhr.response).d;
 movies.forEach(function (i) {
 movieArray.push(i.ShortName);
 });
 var moviedropdown = document.getElementById("moviesdropdown").winControl;
 moviedropdown.dataSource.data = movieArray;
 });

In above code,

  • we are making call to Netflix OData feed using WinJS.xhr
  • Prasing returned JSON using JSON.parse
  • Iterting each element and pushing it to array
  • Taking reference of RadDropDownList using document.getElementbyID
  • Setting the datasource

And on HTML there is a div elment with id moviedropdown


<div id="moviesdropdown"
 data-win-control="Telerik.UI.RadDropDownList"
 data-win-options="{height: 250,

 }"
 >
 </div>

When you run the application you will get RadDropDownList populated with movies title from Netflix.

image

Attaching Change Event

You can attach change event to RadDropDownList and read the selected value . You can do that as following


moviedropdown.addEventListener("change", function (e) {
 document.getElementById("output").innerText = e.target.value;

});

In above code

  • Output is id of the span
  • Selected value will be displayed as text of the output span

In this way you can work with RadDropDownList in the application. In this post we learnt on getting started, working with remote data and about change event. I hope you find this post useful. Thanks for reading.

Reading NotficationTemplate controls value in RadHubTile for Windows 8

In this post we will take a look on how to read values NotificationTemplate controls in RadHubTile. Let us say, you are working with RadHubTile and you have set the NotificationTemplate as following,


<telerik:RadHubTile x:Name="rdRunsHubTiles"
 Title="Score"
 Message="India/Eng Score"
 ImageSource="/Assets/indengmatchlogo.JPG"
 BackContent="Score of India England first Test"
 Margin="93,209,0,388">
 <telerik:RadHubTile.NotificationTemplate>
 <DataTemplate>
 <StackPanel Orientation="Horizontal" >
 <TextBlock Text="{Binding Runs}" />
 <TextBlock Text="{Binding Country}" />
 </StackPanel>
 </DataTemplate>
 </telerik:RadHubTile.NotificationTemplate>
 </telerik:RadHubTile>

There are two TextBlock Controls inside the NotificationTemplate. Both TextBlock are data bind. RadHubTile DataCoontext is set as following


protected override void OnNavigatedTo(NavigationEventArgs e)
 {
 rdRunsHubTiles.DataContext = GetRun();

 }

Data GetRun()
 {
 return new Data ()
 {
 Runs = 200,
 Country = "India"
 };

 }

And Data class is defined as following,


public class Data
 {
 public int Runs { get; set; }
 public string Country { get; set; }
 }

Now when user tapd RadHubTile you need to read values of NotficationTemplate TextBlocks. To do this you need to handle tap event. Register tap event to RadHubTile as following ,


public MainPage()
 {
 this.InitializeComponent();
 rdRunsHubTiles.Tapped += rdRunsHubTiles_Tapped;

 }

Now in the Tap event we can read controls values as following,


void rdRunsHubTiles_Tapped(object sender, TappedRoutedEventArgs e)
 {

Data valueOfNotification = (sender as RadHubTile).DataContext as Data ;
 var runsettocontrol = valueOfNotification.Runs;
 var countrysettocontrol = valueOfNotification.Country;
 }

In above code we are

1. Typecasting sender as RadHubTile

2. Reading DataContext of RadHubTile as Data

3. Reading set values as property

So in this way we can read NotificationTemplate controls value. I hope you find this post useful. Thanks for reading.

Working with RadHubTile in XAML based Windows Store Application

In this post we will take a look on working with RadHubTile in XAML based Windows Store Application. RadHubTile gives you same immersive experience as you see on the home screen of Windows 8. You can display message, notification, title and message on flipping of tile using RadHubTiles. RadHubTile gives you experience like below image.

image

To start working with RadHubTile let us start with Creating Application for Windows Store. To create this choose Blank App from Windows Store project tab. After creating project you need to add reference Of Rad Control for Windows 8 in the project. To do that right click on the reference and select Add Reference. From the Reference Manager Dialog box select Rad Control for Windows8.

image

After adding reference in the project, you need to add namespace on the XAML page. You can do that as following,

image

You can create a HubTile on XAML as following ,

image

Since you have not set any propery of RadHubTile like Message , Title etc , so as output you will get a simple rectangular tile as below,

image

Some of the important properties of RadHubTiles are as following ,

image

Now let us go ahead and set properties of RadHubTiles ,

 <telerik:RadHubTile Title="Score"
 Message="India/Eng Score"
 ImageSource="/Assets/indengmatchlogo.JPG"
 Notification="100/0"
 BackContent="Score of India England first Test"
 >

 </telerik:RadHubTile>

Above we have set several properties of RadHubTiles . Now let us go ahead and run the application to see the output

image

Now let is go ahead and create template for BackContent. We crate template to show information in back of the RadHubTile as we want. Let us say , we want to display Image and Title in the back of the RadHubTile. We can do that by creating a DataTemplate and then setting that as value of BackContentTemplate. We can do that as following ,

image

You see that in above code we have created DataTemplate . There is StackPanel and one Image control along with TextBlock have put vertically in the StackPanel. When you run the application , you will get RadHubTile back content as following ,

image

For your reference full code with BackContent Template is given below,

 <telerik:RadHubTile Title="Score"
 Message="India/Eng Score"
 ImageSource="/Assets/indengmatchlogo.JPG"
 Notification="100/0"
 BackContent="Score of India England first Test"
 Margin="93,209,0,388">
 <telerik:RadHubTile.BackContentTemplate>
 <DataTemplate>
 <StackPanel Orientation="Vertical">
 <TextBlock Text="India England Test Series" />
 <Image Source="/Assets/indengmatchlogo.JPG" />
 </StackPanel>
 </DataTemplate>
 </telerik:RadHubTile.BackContentTemplate>

</telerik:RadHubTile>

As we set BackContentTemplate , we can set

  • NotificationTemplate
  • MessageTemplate

As well. Let us go ahead and create the NotificationTemplate. We will bind controls in NotificationTemplate with the data coming from the background. Let us say there is function returning Data. In this case I am hard coding the data value, however in real time scenario you will like to fetch data from a remote service.

 Data GetRun()
 {
 // Put code here to fetch data from remote service
 return new Data ()
 {
 Runs = 200,
 Country = "India"
 };

 }

Data class is defined as following,


namespace HubTilesXaml
{
 public class Data
 {
 public int Runs { get; set; }
 public string Country { get; set; }
 }
}

We need to set DataContext of RadHubTile as given below,


protected override void OnNavigatedTo(NavigationEventArgs e)
 {

rdRunsHubTiles.DataContext = GetRun();

}

Now let us go ahead and create NotificationTemplate . NotficationTemplate can be created as following.

image

We are creating a DataTemplate and setting it as value of NotificationTemplate property of RadHubTile. For your reference full code with BackContentTemplate and NotficationTemplate for RadHubTile is given below,

<telerik:RadHubTile x:Name="rdRunsHubTiles"
 Title="Score"
 Message="India/Eng Score"
 ImageSource="/Assets/indengmatchlogo.JPG"

 BackContent="Score of India England first Test"
 DataContext=""
 Margin="93,209,0,388">
 <telerik:RadHubTile.BackContentTemplate>
 <DataTemplate>
 <StackPanel Orientation="Vertical">
 <TextBlock Text="India England Test Series" />
 <Image Source="/Assets/indengmatchlogo.JPG" />
 </StackPanel>
 </DataTemplate>
 </telerik:RadHubTile.BackContentTemplate>
 <telerik:RadHubTile.NotificationTemplate>
 <DataTemplate>
 <StackPanel Orientation="Horizontal" >
 <TextBlock Text="{Binding Runs}" />
 <TextBlock Text="{Binding Country}" />
 </StackPanel>
 </DataTemplate>
 </telerik:RadHubTile.NotificationTemplate>

</telerik:RadHubTile>

At this point if you run the application you should get a RadHubTile with BackContentTemplate , NotficationTemplate , Message and Image.

image

We can get all the information from RadHubTile in code behind and can use them. For example let us say when user is tapping on the RadHubTile , we want to display the NotificationCount. We can do that as following,


void rdRunsHubTiles_Tapped(object sender, TappedRoutedEventArgs e)
 {

var runset = (sender as RadHubTile).Notification;
 }

In this way we can work with RadHubTile in Application for Windows Store. I hope you find this post useful. Thanks for reading.

Working with RadNumericBox in JavaScript Windows 8 Application

In this post we will take a look on working with RadNumericBox. If first time you are working with RadControls in JavaScript based Windows 8 Application, I recommend you to read this post .

To work with RadNumericBox simply set data-win-control property of a div or span as Telerik.UI.RadNumericBox


You will get RadNumericBox configured with default values as following,

You can work with RadNumericBox from JavaScript as well.


Here agebox is id of span.

You can set different options for RadNumericBox. Some of those options are as following,

Options can be set as following,

Now when you run the application, you should get RadNumericBox configured with default value 40, minimum value 0, maximum value 255 and step as 10. While working with RadNumericBox there are two important events,

In code behind you can attach event to RadNumericBox as following,

You can work with spin event as following

And showmessage function is written as below,


For your reference code is given below,

Default.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>javascriptAutoComplete</title>

<!-- WinJS references -->
 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
 <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
 <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!--Telerik references -->
 <script src="///Telerik.UI/js/jquery.js"></script>
 <script src="/Telerik.UI/js/ui.js"></script>
 <link href="/Telerik.UI/css/dark.css" rel="stylesheet" />
 <link href="/Telerik.UI/css/common.css" rel="stylesheet" />

<!-- javascriptAutoComplete references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
</head>
<body>
 <h1>Numeric Box Demo</h1>
 <div id="agebox"
 data-win-control="Telerik.UI.RadNumericBox"
 data-win-options="{value: 40,
 min: 0,
 max: 255,
 step: 10,
 decimals: 2,
 format: 'n0',
 }">
 </div>
 <br />
 <span id="output" >

 </span>
</body>
</html>

&nbsp;

Default.js


if (args.detail.kind === activation.ActivationKind.launch) {
 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
 // TODO: This application has been newly launched. Initialize
 // your application here.
 } else {
 // TODO: This application has been reactivated from suspension.
 // Restore application state here.
 }
 args.setPromise(WinJS.UI.processAll());
 var nbage = document.getElementById("agebox").winControl;
 nbage.addEventListener("spin", showmessage);
 nbage.addEventListener("change", function (e) {
 document.getElementById("output").innerText = "You have selected" + nbage.value;
 });
 }
 };

 function showmessage(e) {

document.getElementById("output").innerText = "You have selected" + e.target.value;
 }

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