Windows Azure Mobile Services Data and Telerik RadDataGrid: Two good things together

Learn more about Rad Controls for Windows 8 here

Recently I was in a Windows Azure event for local user group. Attendees were very excited about Windows Azure Mobile Services. When I discussed with them how more immersive and user friendly it could be working with data from Windows Azure Mobile Service Table in Telerik RadDataGrid, they got more excited. In this post we will go very basic and learn basic required steps to fetch data from Mobile Service Data Table in RadDataGrid.

image

If you are new to Mobile Services and Windows Store App development then before you proceed in this post, I recommend you to read these two posts

Step by Step working with Windows Azure Mobile Service Data in XAML based Windows Store Apps

Three Steps to work with RadDataGrid in XAML based Windows Store Application

Video: Getting started with RadDataGrid in XAML based Windows Store Application

Mobile Service Data Table

You can view all Windows Azure Mobile Services and tables by login to Windows Azure Management Portal.

We are going to display data from techbloggers table. I have created this table in Windows Azure Mobile Service as shown below. There are three columns in table. We will display content from techbloggers Mobile Service table in RadDataGrid.

image

We need App URL and key. You need key and application URL to work with Mobile Services from Windows Store application. You will find key and application URL at the portal.

image

Creating Windows Store App

Very first you need to install Windows Azure SDK for Windows 8. You can download that from here . After installing make sure that you have installed RadControls for Windows 8. You can download trial from here

Now go ahead and create a Windows Store App by choosing Blank App project template from Windows Store project tab. After project being created add Rad Controls for Windows 8 reference and Windows Azure Mobile Services Managed Client reference in the project. To add reference right click on Reference in project and select Add Reference.

image

After adding reference on XAML add namespace on MainPage.xaml to work with RadDataGrid


xmlns:telerik="using:Telerik.UI.Xaml.Controls.Grid"

Next add following namespaces on MainPage.xaml.cs to work with Mobile Services client.


using Microsoft.WindowsAzure.MobileServices;
using System.Runtime.Serialization;

Next you need to create entity class representing table from the Windows Azure Mobile Service. Let us create entity class as following. We are creating entity class TechBloggers.


public class TechBloggers
 {
 public int id { get; set; }
 [DataMember(Name = "name")]
 public string Name { get; set; }
 [DataMember(Name = "technology")]
 public string Technology { get; set; }

}

After creating entity class go ahead and add following global variables.


MobileServiceClient client;
IMobileServiceTable<TechBloggers> bloggerstable;

Once global variable is defined in the constructor of page you need to create instance of MobileServiceClient and MobileServiceTable. Let us go ahead and create that in constructor of the page.


public MainPage()
 {

 this.InitializeComponent();
 MobileServiceClient client = new MobileServiceClient("https://youappurl", "appkey");
 bloggerstable = client.GetTable<TechBloggers>();
 }

Next you need to put RadDataGrid on XAML and bind it to data source. RadDataGrid can be created as following


<telerik:RadDataGrid x:Name="BloggerGrid" />

Next you need to bind RadDataGrid to List of Bloggers. List of Bloggers will be fetched from Mobile Service data table. You can do this as following.


protected async override void OnNavigatedTo(NavigationEventArgs e)
 {
 var items = await bloggerstable.ToListAsync();
 this.BloggerGrid.ItemsSource = items;
 }

Next go ahead and run application. You will get records from Mobile Service table bind to RadDataGrid.

image

These are basic steps to fetch data from Windows Azure Mobile Services Table Data and display in RadDataGrid. In further posts we will get into further details of working with these two together. I hope you find this post useful. Thanks for reading.

Learn more about Rad Controls for Windows 8 here

Advertisements

Join me for webinar on 25th April 2013: Create faster Enterprise Apps for Windows 8 and win Telerik Ninja T-shirt

Learn more about Rad Controls for Windows 8 here

If you are a Windows Store App developer and want to quickly create Enterprise App then this webinar is for you.

Register here to attend webinar

image

You will learn to create Enterprise App harnessing goodness of DataGrid in this webinar.

image

We will follow following agenda in webinar ,

  • Introduction of RadControls for Windows 8
  • First look of all RadControls
  • Setting up environment to work with RadControls for Windows 8.
  • Getting started with RadDataGrid
  • Working with different kinds of columns in RadDataGrid
  • Working with Services in RadDataGrid
  • Charts in RadDataGrid
  • Grouping and Filtering in RadDataGrid.

Register here to attend webinar

In this webinar we will focus on Data Grid along with other controls. During webinar we will be selecting two active participants from the webinar and sending them the much in demand Telerik Ninja T-Shirt. You will be coming, right?

image

Register here to attend webinar

Learn more about Rad Controls for Windows 8 here

See you in webinar, If you have any query reach me at dhananjay.kumar@telerik.com

Working with Columns width in RadDataGrid in XAML based Windows Store Application

Learn more about Rad Controls for Windows 8 here

In last blog post we learnt to work with RadDataGrid in three simple steps. In this post let us have a look on how we could work with Columns in RadDataGrid. Before we move ahead and understand how to work with columns width and columns header, let us have some understanding on columns in RadDataGrid. There are two kinds of columns in RadDataGrid.

image

TextColumn renders each cell value as System.String object whereas TemplateColumn renders as DataTemplate. In this post we will focus our discussion on TextColumn. It inherits DataGridColumn.

It got following important properties

  1. Header
  2. HeaderStyle
  3. SizeMode
  4. Width
  5. SortDirection

image

We will use Product business object from LAST POST . You will notice in output of last post that RadDataGrid columns were taking default width. Width of column was stretched to maximum. We got output as following

image

Now if you want to set width of each columns you need to follow following steps

Make sure AutoGenerateColumns property is set to false

image

After this you need to manually create columns. In column creation you need to set width of the column. Create RadDataGrid.Columns inside RadDataGrid.

image

After creating RadaDataGrid.Columns you need to create RadDataGrid.Columns. In columns you can set

  1. Header : Set value of header text
  2. Width : Fixed width of the column
  3. PropertyName : Set this as property name of business object you want to display in this column.

image

So putting all together you can create fixed width text column in RadDataGrid as following. We have XAML from previous post. Modified XAML with fixed column width is as following


<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
 <telerik:RadDataGrid
 x:Name="ProductGrid"
 AutoGenerateColumns="False"
 Width="500">
 <telerik:RadDataGrid.Columns>

<telerik:DataGridTextColumn
 PropertyName="ProductName"
 Header="Name"
 Width="200"/>
 <telerik:DataGridTextColumn
 PropertyName="ProductPrice"
 Header="Price"
 Width="50"/>
 <telerik:DataGridTextColumn
 PropertyName="ProductType"
 Header="Type"
 Width="150"/>
 <telerik:DataGridTextColumn
 PropertyName="InStock"
 Header="In Stock"
 Width="100"/>
 </telerik:RadDataGrid.Columns>
 </telerik:RadDataGrid>
 </Grid>

On running application you will get RadDataGrid with fixed column width as following

image

Other important property of column is SizeMode. This property can be set with following three values

image

  1. Width property takes effect only when SizeMode is set to Fixed.
  2. If SizeMode is set to Auto then column takes only width which is required. It overrides value of width.
  3. If SizeMode is set to Strech then column will override width value and stretch to all available space.

image

If you modify above RadDataGrid with setting SizeMode property of fourth column as Auto then RadDataGrid will render as following

image

In this post we used some of the discussion from last post so did not discuss about binding and Product class in earlier part of this post. However For your reference find definition of business class Product below


public class Product
 {

 public string ProductName { get; set; }
 public double ProductPrice { get; set; }
 public string ProductType { get; set; }
 public bool InStock { get; set; }
 }

ItemSource of RadDataGrid is set as below,


protected override void OnNavigatedTo(NavigationEventArgs e)
 {

this.ProductGrid.ItemsSource = GetProducts();
 }

GetProducts() class is defined as below,

private List<Product> GetProducts()
 {
 List<Product> lstProduct = new List<Product>
 {
 new Product
 {
 ProductName ="Pen",
 ProductPrice = 100,
 ProductType = "Education",
 InStock = true
 },
 new Product
 {
 ProductName ="Pencil",
 ProductPrice = 50,
 ProductType = "Education",
 InStock = false
 },
 new Product
 {
 ProductName ="Math Book",
 ProductPrice = 345,
 ProductType = "Education",
 InStock = true
 },
 new Product
 {
 ProductName ="Ball",
 ProductPrice = 23,
 ProductType = "Sports",
 InStock = true
 },
 new Product
 {
 ProductName ="Cricket Bat",
 ProductPrice = 560,
 ProductType = "Sports",
 InStock = true
 },
 new Product
 {
 ProductName ="Baseball Bat",
 ProductPrice = 550,
 ProductType = "Sports",
 InStock = false
 },
 };

return lstProduct;
 }

In this way you can work with column width. I hope you find this post useful. Thanks for reading.

Learn more about Rad Controls for Windows 8 here

Complex Object and RadAutoCompleteBox in XAML based Windows Store Application

Learn more about Rad Controls for Windows 8 here

In this post we will take a look on working with Complex Business object and RadAutoCompleteBox in XAML based Windows Store Application. To start with make sure that you have added RadControls for Windows 8 reference in project. To add reference right click on project and from Extensions tab select RadControls for Windows8.

image

After adding reference of RadControls for Windows 8 you need to create business object. Let us assume, we are going to work with Employee object. You need to create Employee class is as follows,

public class Employee
 {
 public string FirstName { get; set; }
 public string LastName { get; set; }
 public string Department { get; set; }

}
}

As of now you have created Employee class. Next you need to create or rather populate Employee data. There are many ways Employee data can be populated in application. Some of them are as follows,

  • From WCF SOAP Service
  • From WCF REST based Service returning either JSON or XML.
  • From OData Service etc

For purpose of this post we are going to populate data locally. Let us create a function returns collection of Employee

private List<Employee> GetEmployees()
 {
 List<Employee> lstEmployee = new List<Employee>
 {
 new Employee
 {
 FirstName = "Dhananjay",
 LastName = "Kumar",
 Department = "Team1"
 },
 new Employee
 {
 FirstName = "Dhananjay",
 LastName = "Kumar",
 Department = "Team1"
 },
 new Employee
 {
 FirstName = "Deepak",
 LastName = "Chwala",
 Department = "Team2"
 },
 new Employee
 {
 FirstName = "Amit",
 LastName = "Chawla",
 Department = "Team1"
 },
 new Employee
 {
 FirstName = "Arun",
 LastName = "Narayn",
 Department = "Team2"
 },
 new Employee
 {
 FirstName = "Bunty",
 LastName = "Goyel",
 Department = "Team1"
 },
 new Employee
 {
 FirstName = "Boman",
 LastName = "Irani",
 Department = "Team2"
 },
 new Employee
 {
 FirstName = "Charu",
 LastName = "Sharma",
 Department = "Team2"
 },
 new Employee
 {
 FirstName = "Depanker",
 LastName = "Banerjee",
 Department = "Team1"
 },
 new Employee
 {
 FirstName = "Ashok",
 LastName = "Singhal",
 Department = "Team2"
 },
 new Employee
 {
 FirstName = "Chabhi",
 LastName = "Rastogi",
 Department = "Team1"
 },

};

return lstEmployee;
 }

As of now you have collection of business object with you. Now you need to create RadAutoCompleteBox. Very first on XAML add following namespace


xmlns:tinput="using:Telerik.UI.Xaml.Controls.Input"

After adding namespace you need to add RadAutoCompleteBox on XAML a follows,


<tinput:RadAutoCompleteBox
 Height="70"
 Width="200"
 x:Name="autocompleteEmployee"
 DisplayMemberPath="FirstName">

 </tinput:RadAutoCompleteBox>

You can set one of the property of complex object as suggestion term. Above we are setting FirstName property as suggestion term.

In last step you need to set ItemSource of RadAutoCompleteBox. This can be set as following

protected override void OnNavigatedTo(NavigationEventArgs e)
 {
 autocompleteEmployee.ItemsSource = GetEmployees();

 }

Now on running application you will find RadAutoCompleteBox bind with complex object.

image

In this way you can work with complex object as RadAutoCompleteBox in XAML based Windows Store 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.

Using RadControls in JavaScript based Windows 8 Application

In this post we will set up project to use RadControls for Windows 8 in JavaScript based Application. Before you go ahead with this post, read here

Getting Started with Rad Controls for Windows 8

Once you have done with downloading and installing Rad Control for Windows 8, create a new JavaScript based Windows Store project

image

Right click on the reference in solution explorer and add a new reference. Choose Windows Library for JavaScript and add to the project.

image

After adding references, verify in solution explorer that you have successfully added the references

image

Once references are successfully added in the project, you need to add references of Rad Control JS files and CSS files on the HTML page. You can refer them as following listing,

image

Now you are all set to use RadControls for Windows 8 in your application. To test that whether we have added all the references correctly or not ,let us put a RadSlider control on HTML

image

Now when you run the application you should get a RadSlider control on the page successfully.

image

In this way you can get it started with Rad Controls for Windows 8 in JavaScript based application for Windows Store. I hope you find this post useful. Thanks for reading.