Icenium Workshop in Pune

View event photos here

Telerik India conducted a full day Icenium Day in Pune on 26th Aug 2013.

clip_image002

It was invite only event and 30 energetic developers attended full day workshop on Icenium. There was high energy discussions around native v/s hybrid, JavaScript or C# etc. It was great gathering of prominent and opinionated developers.

We started day with introduction of Icenium and setting up development environment on participant machines. Some of the participants preferred to work on Icenium MIST, so they did not need any installation.

clip_image004

Whole day we covered following topics,

  • Why Cross Platform Mobile Application
  • Getting started with Icenium
  • Creating your first Cross Platform App
  • Managing Certificates in Icenium
  • Debugging with Live Sync
  • Understanding version control and Github integration
  • Building and packaging App
  • Publishing Apps to store
  • Working with Kendo UI Framework elements like DataSource and Template
  • Consuming Services like OData
  • Understanding layout , transition etc
  • Working with Icenium Everlive

This was Hands on Lab workshop and all participants wrote codes for whole day with sheer passion.After successful completion of labs each participant got a participation certificate.

clip_image002[6]

It was energetic learning day. We loved developers from Pune and excited to visit city again with more sharing on goodness of Telerik.

clip_image004[6]

View event photos here

Advertisements

Resources for Webinar Integrating Coded Steps in Telerik Test Studio

Learn more about Test Studio here

On Aug 22 we conducted a webinar titled “Integrating Coded Steps in Telerik Test Studio”. This is part of the ongoing webinar series we here at Telerik India are doing targeting the APAC region. We call this the Telerik. .NET Ninja Developer Webinar series. You can take a look at the Aug-Sep schedule here

image

Slides deck of webinar is here,

 

For those of you who missed attending the webinar live, we have it covered for you. We record all our webinars and so was this one. Here is the recording of the webinar:

 

 

Telerik Ninja T-Shirt Giveaway:

We select 2 person from the webinar attendees and give away our .NET Ninja T-Shirt in each of our webinars. We have picked up 2 lucky persons in this webinar too. They are:

Farjana Parveen

swati gagare

Congratulations to the winners. We will be contacting you shortly and we will ship your t-shirts.

Excited to see you in next webinar

Telerik India at PUG DevCon 2013

It was 10th Anniversary of India’s one of the most prominent Microsoft User Group and as always Pune User Group did not disappoint. PUG delivered packed two days event with more than 300 attendees and 25 speakers.

More about event here

Telerik loves community and as part of our community engagement, Telerik India team participated in event.

image

We had a booth for both days and we had great interaction with Pune community. We loved the passion of community and discussion went on the topics ranging from Cross Platform Mobile Apps to Automate Testing. I and Telerik India country manager Abhishek Kant both presented in event.

Mr Kant presented on SPA with Kendo UI and I presented on Backend as a Service with Everlive. We gave away Ninja T-Shirts and one lucky winner got a Karbon Android tablet.

I loved passion being shown my developers around Kendo UI and Icenium .

image

If you were at the event and want any further discussion or demo, do not hesitate to reach us through our site or send us a mail on Dhananjay.kumar@telerik.com or abhishek.kant@telerik.com

Push Notification on Android device using Icenium Everlive

Download sample used in this blog post from Github

Learn more about Icenium

In this post we will walkthrough working with Icenium Everlive Push Notification on an Android device. This post is divided in three parts from creating Google project to writing JavaScript code to enable notification on device.

Let us follow following steps to get it started with push notification on android devices

Step 1: Configure or Create Google Project

You need to start with creating Google Project. You need Google project ID to enable Push Notification.

  • Navigate to https://code.google.com/apis/console
  • In drop down you get an option to create a new project. From there create a new project
  • After creating project, you will get project number. There are two ways you can find project number, either in URL or on dashboard

image

After creating Google project, from left hand options select API Access. In that go ahead and click on Create a New Android Key. We need Android key at Everlive server side to enable Push Notification

image

After getting Android key next step you need to do to enable Service. To enable that click on Services in left and On Google Cloud Messaging for Android.

image

As of now we have created Google Project.

Step 2: Create and Configure project in Icenium Everlive

To create Icenium Everlive project, navigate to https://www.everlive.com/ . To create new project click on Create New Project on the home page. After successful creation of project go to Settings

image

In Settings select Push Notification from left menu options. We are going to enable Push Notification for Android, so check the check box of Android and provide Android Key created in previous step.

image

Step 3: Create Application

In this step we will create application to work with push notification. We will us EverLive JavaScript SDK. You can download sample Sample App from GitHub here

To start with you need following JavaScript files in your application. You can get these files from downloaded sample.

image

Now to start with, you need EverLive API key of your project and android project number. You will find API key on EverLive portal and android project number which you configured in step1 of this post.

image

As of now we have created environment in application to work with EverLive SDK for PushNotification. Next we need to create pushSettings for Android. You may notice that we are passing androidProjectNumber to create push setting for android.

image

Next you can enable notification on device by calling enableNotifications function and passing setting for push notification as input parameter in that. On successful enabling we are returning registration of device.

image

After enabling notification on device you need to register device in Everlive portal. To do this call register function on instance of current device.

image

These are two operations you need to perform to get push notification on android device from Everlive push notification. I have created two buttons on app view to enable notification on device and then register device to get push notification. View with buttons are as follows,

 <div data-role="view" id="pushview" data-tile="Push" data-model="app.pushService.viewModel" >
 <a id="initializeButton" data-role="button" data-bind="click: enablePushNotifications" class="btn-big">Enable Notifications</a>
 <a id="registerButton" data-role="button" data-bind="events: { click: registerInEverlive }" class="btn-big">Register</a>

 </div>

Below find full code to enable and register device for push notification.


(function (global) {
 var everliveApiKey = 'I1eE4AuOaWv0Vp5y';
 var androidProjectNumber = '1088191728786';
 var emulatorMode = false;

var pushViewModel = kendo.data.ObservableObject.extend({

el: new Everlive({
 apiKey: everliveApiKey
 }),

message: function () {
 alert("dhananjay");
 },

onAndroidPushReceived: function (args) {
 alert('Android notification received: ' + JSON.stringify(args));
 },
 enablePushNotifications: function () {
 // Push Setting for Android
 var pushSettings = {
 android: {
 senderID: androidProjectNumber
 },
 notificationCallbackAndroid: this.onAndroidPushReceived,

};
 // Setting the current device
 var currentDevice = this.el.push.currentDevice(this.emulatorMode);
 currentDevice.enableNotifications(pushSettings)
 .then(
 function (initResult) { return currentDevice.getRegistration();
 },
 function (err) {
 alert("ERROR!<br /><br />An error occured while initializing the device for push notifications.<br/><br/>" + err.message);
 }
 );

&nbsp;
 },
 registerInEverlive: function () {
 var currentDevice = this.el.push.currentDevice();

if (!currentDevice.pushToken) currentDevice.pushToken = "some token";
 this.el.push.currentDevice()
 .register({ Age: 15 })
 .then(
 this.onDeviceIsRegistered,
 function (err) {
 alert('REGISTER ERROR: ' + JSON.stringify(err));
 }
 );
 },
 onDeviceIsRegistered: function () {

alert("device registered");
 }

&nbsp;
 });

app.pushService = {
 viewModel: new pushViewModel()
 };

})(window);

&nbsp;

After successful operations on device, you will find device is registered in Everlive portal as below. All device registered for application will be listed here.

image

Now you can send push notification to device from portal. Device is enabled and registered to receive push notification from the Icenium Everlive server. We just witnessed that it is so easy working with push notification on Android devices from Icenium Everlive server. I hope you find this post useful. Thanks for reading.

Download sample used in this blog post from Github

Learn more about Icenium

RadTileList

Resources for Webinar “Modern UI in ASP.NET Applications using RadTileList”

On Aug 8 we conducted a webinar “Modern UI in ASP.NET Applications using RadTileList”. This is part of the ongoing webinar series we here at Telerik India are doing targeting the APAC region. We call this the Telerik .NET Ninja Developer Webinar series. You can take a look at the Jun-Jul schedule here: https://telerikhelper.net/2013/05/24/telerik-webcasts-june-july/.

image

About RadTileList:

Build modern, Windows-8-like navigation easier and faster. With its first version the TileList control supports out of the box:

  • Single and multiple selection
  • 4 tile types: image, text, image and text, and template tiles
  • Peek templates and animations
  • Drag to reorder
  • Tile groups and more

Slide Deck:

Here is the slide deck from the webinar:

 

Webinar Video:

Here is the recorded video of the webinar:

Questions & Answers:

As with all the webinars, we too had a bunch of questions in this webinar too. We answered a few and we couldn’t answer many of them. So we will try to answer as much questions as possible here:

Q: Any size restriction for the Image and Text tile?
A: The tiles are of 2 types – – Wide and Square. Wide tiles have a dimension of 350x150px and Square tiles are of 150x150px dimension.

Q: we can use any type of image?
A: Yes. Any image types can be used in the Image tiles.

Q: Difference between ContentTemplate and Text Tile?
A: You can take a look at the Tiles overview here: http://www.telerik.com/help/aspnet-ajax/tilelist-tiles-overview.html

Q: Image and Text Tile, title will always be at bottom or we can arrange the position?
A: The Title is always at the bottom. You cannot customize that.

Q: Can we format text in the image and text tile control?
A: Yes. The content text of the tiles can be customized.

Q: Can the badge be mapped to any other page say a link?
A: No. The linking is on the tile itself. The Modern UI philosophy is all about using the Tiles as a navigational item. The Badge is used as a additional information display.

Q: Whether Tile can be customized to various size?
A: No. The tiles come in two dimension: Wide – 350x150px and Square – 150x150px.

Q: Can these tiles be resized?
A: No. They come in standard dimension as per the Modern UI guidelines – Wide and Square.

Q: can we use effects the way tile appears?
A: Yes. We have the concept of Peek Templates. Peek Templates have settings which control how the template should appear. You can find more info here: http://www.telerik.com/help/aspnet-ajax/tilelist-tiles-peek-template.html

Q: what all languages you support in RAD?
A: C# and VB.NET

Q: We have Telerik license for developers. Do we need to install it on production server also ?
A: No. the app build will contain all that is required for Telerik controls to work. No need to install it on production server.

Q: Can I change the positions of Title and Badge ?
A: No. This is as per the Modern UI guidelines and it dictates that the Title and Badge have to be in the lower portion of the tile.

Q: I am curious about its interoperability along with several other controls in Telerik?
A: You can work with this control programmatically too. You can wrap this control and create your sub classed controls too.

Q: Can I use RadTilelist control in sharepoint 2010/2013 applications?
A: All of our ASP.NET AJAX controls suite is SharePoint compatible. You can use our AJAX controls in custom WebParts and host them in Sharepoint.

Q: If the content exceeds the height of the content tile how we have to control the text flow?
A: As per the design principles, when using ContentTemplate Tile, the text or content you provide should be a short and informational text. You can use CSS to control the overflow – but then it will bring in the scroll bars and the whole tile concept wont look good.

Q: How it works in Desktop app UI design. We don’t deal much with Web app coding?
A: We have Windows Presentation Foundation control suite and Windows Forms controls suite for desktop applications. WPF has TileList control and Windows Forms has RadPanirama control. Both of these controls help you build a Modern UI like navigation using Tiles in your windows applications.

Q: Once Tiles are re-arranged,, whether this can be persist or re-set after page refresh?
A: Yes. The selections can be persisted. You can integrate with the RadPersistenceFramework.

Q: Is this also part of ASP.net MVC?
A: No. This is part of ASP.NET Webforms.

Q: how to resize the tile as in windows 8 using rad controls?
A; At the moment we don’t support resizing.

Q: Can we bind these values to some data source so that frequently that can be refreshed, like we have in Mail tile in Windows 8?
A: Yes absolutely. You can do that certainly.

Q: Am using Telerik controls version: 2013.1.403.40, but this doesn’t contain Rad tile List control in toolbox?
A: This was released as part of our Q2 release. So upgrade yourself to 2013 Q2 release and you will see the control.

Q: do we documentation available for RadTileList ?
A: Yes very much. You can find the documentation here: http://www.telerik.com/help/aspnet-ajax/tilelist-overview.html

Q: Can Tile be created as dynamic as similar to number of rows in Grid?
A: Yes. You can programmatically create the Tiles too. You don’t have to place them on designer like the way I did in the demo.

Q: Why is it called RADControls?
A: RAD stands for Rapid Application Development. We help you build things faster. We help you improve your productivity through our controls. Our controls contains out of the box many features that otherwise you will need to build them by yourself.

Q: can we create a link on image to redirect to another page?
A: All the tile types support NavigateUrl property which when set, clicking the tile will navigate to that page.

Telerik .NET Ninja T-Shirt Giveaway:

We select 2 persons from the audience in every webinar and give away a Telerik .NET Ninja T-Shirt. So from this webinar we have randomly selected the following 2 persons:

  • Himanshu Garg
  • Kothainayaki Krishnamoorthy

Congratulations to the winners. We will be contacting you shortly to get your postal address. We will ship you your T-Shirt soon. Rest of the folks, don’t worry we have a lot of webinars coming up. So try your luck in next webinars.

Till next time – Happy Coding.

MVVM using Kendo UI in three simple steps

Learn more about Kendo UI here

Find sample used in this blog on JSFiddle

Yes I know you love Kendo UI and you love MVVM as well. There are many libraries out there like Knockouts to help you creating HTML5 Apps adhering to MVVM pattern. In this post we will learn to create a simple application using MVVM.

Step 1: Create View Model

ViewModel can be created using Kendo.observable. Object of Kendo.observable will notify any changes to view. Let us create a studentViewModel as below.


var studentViewModel = kendo.observable({
                          name: "Dhananjay Kumar",
                          age : 30 ,
                          sayHello: function () {
                              var name = this.get("name");
                              var age = this.get("age");
                              alert("Hello, " + name + "You are" + age + "Years Old") ;
                                               }
                             });

studentViewModel contains two properties and one method sayHello.

Step 2: Create View

In second step let us go ahead and create View. You need to bind ViewModel to view.


<div id="studentview">
          <input data-bind="value: name" />
          <input data-bind="value: age" />
          <button data-bind="click: sayHello">Say Hello</button>
 </div>

Above in studentview , we are binding value of input types and click of button. There are many other HTML properties can be bind using Kendo UI MVVM like Text , Value , Visible , Html etc.

As you see we are using data-bind property to perform binding.

Step 3: Binding View and ViewModel

Third and final step you need to do is to bind View and ViewModel. Either you can bind ViewModel to a particular view (in this case div with id studentview) or you can bind ViewModel to any DOM element using body. Binding can be done as follows,

 kendo.bind($("#studentview"), studentViewModel);

This is all what you need to do to start creating HTML 5 Apps adhering MVVM pattern using Kendo UI. When you run app, you shall get expected output as below,

clip_image002

Last but not least do not forget to add references of KendoUI library in your project.

Find sample used in this blog on JSFiddle

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

Learn more about Kendo UI here

Raise a support ticket for that

Sometimes customers need more help that is possible over a phone call or a demo. These cases are the ones that require more investigation or may fall outside the expertise of the person conducting the demo.

Now, if you have faced the dreaded comment – “Please raise a support ticket for that” here is how you can do the same:

  • Login to your account (trial/ paid) on telerik.com:

image

image

  • Click on “Contact Support Team” from your account page (after logging in):

clip_image002

  • Choose the product you want the support for:

clip_image004

  • Identify the kind of help you need:

clip_image006

  • Choose the control you are looking help for:

clip_image008

  • Provide details:

clip_image010

The message should include information on:

1. Steps to reproduce the problem

2. Attach screenshots of the error that you are encountering

Press Send button.

After you have submitted the support ticket, you expect a reply. But how soon? We have 24 working hours SLA for paid subscribers. However, we have no SLA for non-paid/trial subscribers but try and provide answers in 72 working hours. Do be aware of the “working hours”! So, if you have raised a support ticket on Friday evening, you can’t expect to get an answer on Monday morning even if you are a paid customer.

The procedure is almost the same for all Telerik products. We take pride in providing help to our customers when it is needed to improve their productivity. The above process helps us prioritize our tasks so that we can deliver most value.

If you have any feedback/ suggestions/ comments on how we can improve this further, please do share your thoughts on the comments section.

Update: We now have a video demonstrating this process:

RadHtmlChart

How to bind RadHtmlChart for ASP.NET AJAX to EntityDataSource control

Introduction:

This is the 3rd blog post in the series on RadHtmlChart, our HTML5 based charting control for ASP.NET AJAX and its data binding options. So far we have seen data binding the RadHtmlChart control with SQLDataSource and LinqDataSource. In this blog post we will look at one more data binding option namely binding to EntityDataSource.

In this blog post we will focus on how to create a EDM or entity Data Model using Entity Framework, then adding the EntityDataSource control to the web page and finally binding it to the RadHtmlChart. For the rest of this post it is assumed that you have already installed our RadControls for ASP.NET AJAX suite and also our free ORM called OpenAccess.

About EntityDataSource:

EntityDataSource is a control that was made available during the days of Visual Studio 2008 SP1 i.e. .NET 3.5. According to MSDN EntityDataSource control is defines as:

A control which can be used together with a data-bound control to retrieve data from an EDM and to display, edit, and sort data on a Web page by using little or no code.

I wont be spending too much time on discussing EntityDataSource control in this blog post. I suggest you to go through the overview article from MSDN available here: http://msdn.microsoft.com/en-us/library/cc488502.aspx. The article will get you up to speed with the EntityDataSource control.

Getting Started:

To start with, lets create a “C# RadControls Web Application”. Open a Visual Studio and navigate to File > New Project > Telerik > Web and select “C# RadControls Web Application”. Give it a name & click finish so that VS can go ahead and create the project for us.

SNAGHTML13df131b

Figure 1: New Project Dialog

Adding ADO.NET Entity Data Model:

Entity Data Source control requires a ADO.NET Entity Data Model to work with. Entity Data Source can be configured to work with a Entity Data Context for reading, creating, updating and deleting data with little or no code from the web page. In order to create a EDM, we need to first add Entity Framework bits to our project. Use the Nuget Package Manager to add a package named EntityFramework.

SNAGHTML1424992c

Figure 2: Nuget Package Manager

One of the best practice is to create a Models folder at the root of the web application. So lets create a folder called Models. Right click on the Models folder and select Add > New Item. In the new item dialog, under Data category select “ADO.NET Entity Data Model”, give it a name and click Add.

SNAGHTML142c24a9

Figure 3: Add New Item Dialog

Next we will be presented with a EDM Wizard. In the interest of the time, I will post my settings in the wizard as a serious of images below:

SNAGHTML142e40e0

Figure 4: Entity Data Model Contents

SNAGHTML142f47a3

Figure 5: Data Connection

SNAGHTML1430a6f2

Figure 6: Database objects

Once we finish with the wizard, NorthwindEntityDataModel.edmx is created in the Models folder. Double clicking that we will be presented with a visual designer with one object called Product placed. Remember we had selected only one Table for this demo called Product. Here is the screen shot of the EDMX designer:

image

Figure 7: EDMX Designer

Now that we have the EDM created, next is to add the Entity Data Source control to the page.

Adding Entity Data Source Control:

Open Default.aspx page and add EntityDataSource control to the page. You can either drag and drop the entity data source control from toolbar and you can write the declarative code by hand. I will drag and drop it from the toolbox onto the page. Use the Entity Data Source control smart tag (either from the ASPX page or from the designer) to configure data source settings. Here is my settings for the data source:

SNAGHTML144def19

Figure 8: Object Context Configuration

SNAGHTML144ee98e

Fig 9: Data Selection Configuration

When we finish the configuration wizard, following code will be generated by the Visual Studio

 
<asp:entitydatasource id="NorthwindEntityDataSource" runat="server" 
defaultcontainername="NORTHWINDEntities" connectionstring="name=NORTHWINDEntities" 
enableflattening="False" entitysetname="Products" 
entitytypefilter="Product" 
select="it.[ProductName], it.[UnitPrice]">
</asp:entitydatasource>

Note that we couldn’t add the top 10 keywords when configuring using the wizard and also there was no way to provide the orderby clause. In order to specify the top keyword just prepend “top(10)”  to the Select text. EntityDataSource supports OrderBy property. So add the property and provide the value “it.UnitPrice DESC”. Here is the final code:

 
<asp:EntityDataSource ID="NorthwindEntityDataSource" runat="server"
                DefaultContainerName="NORTHWINDEntities"
                ConnectionString="name=NORTHWINDEntities"
                EnableFlattening="False"
                EntitySetName="Products"
                EntityTypeFilter="Product"
                Select="top(10) it.[ProductName], it.[UnitPrice]"
                OrderBy="it.UnitPrice DESC" >
            </asp:EntityDataSource>

Add RadHtmlChart:

You can add a RadHtmlChart either by dragging and dropping from the toolbox onto the page or by writing the declarative code on the page. I will be dragging and dropping the control on to the page. Following 3 things need to be taken care while data binding to a EntityDataSource. They are:

  • DataSourceID: Set the DataSourceID property of the RadHtmlChart to the name of the Entity Data Source you want to bind to.
  • DataFieldY: Set the DataFieldY property of the data series to the column name from which the data points have to plotted on the Y axis. I am plotting the UnitPrice on the Y axis so I will set the DataFieldY property to “UnitPrice
  • DataLabelsfield: Set the DataFieldsLabel property of the XAxis to the column name from which we need the X axis data points to be plotted. I am having the products name on the XAxis so I will set the DataLabelsField property to “ProductName”.

Here is the complete code for the RadHtmlChart:

 
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" 
                DataSourceID="NorthwindEntityDataSource" 
                Height="600px" Width="1000px">
                <ChartTitle Text="Top 10 Products By Price">
                    <Appearance>
                        <TextStyle FontSize="16px"></TextStyle>
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance Position="Top">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries Name="UnitPrice" DataFieldY="UnitPrice">
                        </telerik:ColumnSeries>
                    </Series>
                    <XAxis DataLabelsField="ProductName">
                        <LabelsAppearance RotationAngle="90" />
                        <MinorGridLines Visible="false" />
                        <MajorGridLines Visible="false" />
                    </XAxis>
                    <YAxis>
                        <TitleAppearance Text="Price" />
                        <MinorGridLines Visible="false" />
                    </YAxis>
                </PlotArea>
            </telerik:RadHtmlChart>

Here is the output of the chart:

image

Figure 10: RadHtmlChart Output

Summary:

In this post we looked at one more data binding technique with RadHtmlChart. We looked at EntityDataSource, how to configure entity data source and finally how to bind it with RadHtmlChart. With just 3 things to take care its very easy to bind the chart with entity data source. Hope this makes you excited to start working with RadHtmlChart. Do let us know your experience with the RadHtmlChart.

Till next time – Happy Coding !

RadHtmlChart LinqDataSource

How to bind LinqDataSource to RadHtmlChart for ASP.NET AJAX

Introduction:

RadHtmlChart which is a charting component in RadControls for ASP.NET AJAX suite supports binding to variety of data sources. In this post we will look at a scenario where we will see how to bind the RadHtmlChart to LinqDataSource. So the rest of this post is about how to achieve databinding linq data source to RadHtmlChatrt. So lets get started. First we will look at creating a new project in Visual Studio, then we will add a Data Context to the project, then add a LinqDataSource & use the data context to return top 10 products from Northwind database and finally add RadHtmlChart and see how to use LinqDataSource as the source of the chart.

Creating New Project:

To get started, let’s first create a new “C# RadControls Web Application”. Note you need to have our RadControls for ASP.NET suite installed before you can do this. Open a Visual Studio, select File > New Project > Telerik > Web and C# RadControls Web Application.

imageFigure 1: New Project Dialog

Visual Studio will go ahead and create a Web Application. It will have a single page named Default.aspx. For the rest of the demo, we will work with this page.

Add Northwind Data Context:

In order to work with Linq Data Source, I will create a Entity Data Context using our OpenAccess ORM. OpenAccess is a free tool to download and you can use this in your production too without any licensing involved. First Add New Item to your project of type “Telerik OpenAccess Domain Model”. Give it a name and click Ok.

SNAGHTML20d3224b

Figure 2: Add New Item dialog

You will next be presented with a wizard. Here is the wizard dialog screen shots and the settings I have done:

SNAGHTML20d8441d

Figure 3: OpenAccess Model Type

SNAGHTML20d8e599

Figure 4: Database Connection

SNAGHTML20da3474

Figure 5: Database Items – Products Table Selected

SNAGHTML20dafe38Figure 6: Naming Rules

SNAGHTML20dd52ec

Figure 7: Code Generation Settings

Once you click finish, the wizard will create a .rlinq file in your project. If you double click the rlinq file, you will get a visual designer. For this post I have selected only Products table. So you will see the products table visually laid out:

image

Figure 8: OpenAccess Data Model

Next we will see how to add a LinqDataSource and hook that with our data model to return the products data.

Add LinqDataSource:

In order to add LinqDataSource to your page, you can either drag and drop from the tool box or directly code the tag in the source file. What we will do for this demo is, we will handle a specific event called OnSelecting. In the event handler we will instantiate our OpenAccess data model and return the top 10 products ordered by UnitPrice in descending order. Here is the code which defines LinqDataSource control on the page:

<asp:LinqDataSource ID="LinqDataSource1"
        runat="server"
        OnSelecting="LinqDataSource1_Selecting">
    </asp:LinqDataSource>

Here is the event handler definition:

protected void LinqDataSource1_Selecting(object sender, LinqDataSourceSelectEventArgs e)
    {
        NorthwindDataModel context = new NorthwindDataModel();
        e.Result = context.Products
                          .OrderByDescending(p => p.UnitPrice)
                          .Take(10);
    }

Now that we have the data model and the linq data source only thing left out is to add the RadHtmlChart and bind it to linq data source.

Add RadHtmlChart:

So now we are ready to add the chart. You can either drag & drop the chart from the toolbox on to the page or code the chart definition directly on the page. In this post I will just add the RadHtmlChart code and highlight the main points you need to take care while wiring it with LinqDataSource.

So here is my chart definition:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1"
                DataSourceID="LinqDataSource1" Width="1000" Height="700">
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries DataFieldY="UnitPrice" Name="Price">
                            <LabelsAppearance>
                                <TextStyle Bold="true" FontSize="15" Color="Orange" />
                            </LabelsAppearance>
                            <TooltipsAppearance Visible="false" />
                        </telerik:ColumnSeries>
                    </Series>
                    <XAxis DataLabelsField="ProductName">
                        <LabelsAppearance RotationAngle="90" />
                        <MajorGridLines Visible="false" />
                        <MinorGridLines Visible="false" />
                    </XAxis>
                    <YAxis>
                        <LabelsAppearance><TextStyle Bold="true" /></LabelsAppearance>
                        <TitleAppearance Text="Units" />
                        <MinorGridLines Visible="false" />
                    </YAxis>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false" />
                </Legend>
                <ChartTitle Text="Top 10 Products by Price">
                </ChartTitle>
            </telerik:RadHtmlChart>

Here are the things you need to do for wiring up the chart with LinqDataSource:

  • On the chart set the DataSourceID property to the ID of the LinqDataSource
  • When you define a series, set the DataFieldY property to a value “UnitPrice”. Here UnitPrice is the column in my data source which I want to bind and plot the points on Y axis
  • On the XAxis definition, set the DataLabelsField property to a value “ProductName”. Here ProductName is the column to which I want to bind and plot the XAxis points.

And that’s all its there to wiring up the RadHtmlChart to LinqDataSource. Now build the project and run to see the output. Here is a screenshot of the chart we just created:

image

Figure 9: RadHtmlChart output

Summary:

In this blog post I wanted to show one of the data binding option that RadHtmlChart supports – namely LinqDataSource. As we have seen it is very easy to create a LinqDataSource and bind it to RadHtmlChart. We just need to take care of 3 things to make the chart work with the LinqDataSource. I hope this blog post gives you a head start if you are working with LinqDataSource and the RadHtmlChart. Do let us know your feedback/comment you may have on this post.

Till next time – Happy Coding.