RadGrid

RadGrid and SqlDataSource control – Be Careful with your DataSource choice

Overview:

This blog post is in response to one of the customer queries we received a couple of days back. One of our India customer called us up and said that they are seeing slowness in couple of pages where they are using RadGrid. Problem statement was – when they click on “Add New Row” button it takes nearly 1.5 minutes for the row to appear on the grid. This made it even scary for them as they had moved the code to production. Through this blog post I will try to outline what I found out and what could have been done better to resolve the problem.

Analysis:

I went in to a call with the customer and took a look at their code. There were couple of things they were doing. Let me list them down:

  • DataSource for the RadGrid was a SqlDataSource control defined in the .ASPX page
  • They were handling OnItemCommand and OnItemDataBound. They had some logic in this method which would execute on every data bound and every item command
  • The new item template had lot of drop down lists and each of them were bound to SqlDataSource control as their data source.

Now, next thing I did was to take look at the timing. We used IE Developer Tools and captured the network traffic when Add New button was clicked. What I found out was, server was taking close to 10 seconds to finish its server side processing. That’s a lot of time if you ask me. What was surprising for them was, they had paging enabled on the grid. So they were thinking that paging is happening correctly but still why is the add new row scenario slow.

So this made me to delve little bit deeper into what exactly is happening in this scenario. So rest of this blog post is all about my observation. Read on if you have faced a similar problem.

Observations:

Did two experiments to figure out what was happening. First I use a RadGrid and bind it to SqlDataSource control and look at the query executed at the DB side. Second was to use entity data source instead of SQL data source and look at the query executed at the DB.

For my experiments I am using Northwind Database and in particular Order Details table. Order Details table contains nearly 2155 records. So this makes a good candidate to mimic a scenario where you are paging the RadGrid lets say 10 records per page.

I assume that you have RadControls for ASP.NET AJAX suite installed on your system. If not, you can always download from our products page – www.telerik.com/products/aspnet-ajax.aspx. You will need that if you want to follow along with this post. Also in order to trace the SQL Queries executed, I am making use of a open source tool called “Express Profiler” which is available at CodePlex here: http://expressprofiler.codeplex.com/. I had to use this as I have a SQL Server 2012 express edition and express edition does not come with Profiler option. You need a full blown SQL server to get the profiler.

I have created a RadControls Web Application for my experiments. When you install the RadControls for ASP.NET AJAX suite, you will get project templates in Visual Studio, using which you can create a web application.

SNAGHTML47a123f

Fig 1: RadControls Web Application Project Template

DataBinding with SqlDataSource control:

First experiment was placing a RadGrid and bind it to SqlDataSource control. I placed a RadGrid and set its basic properties.  Then added a SqlDataSource control to the page and set its connection string and provided a select command. Here is the code snippet for grid and SQL data source control:

 
    <telerik:RadGrid ID="RadGrid1" runat="server" 
                     DataSourceID="SqlDataSource1" 
                     AllowPaging="true" AllowSorting="true" 
                     AllowFilteringByColumn="true" AllowAutomaticInserts="True"
                     MasterTableView-EditMode="InPlace"  
                     MasterTableView-CommandItemDisplay="TopAndBottom" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                       ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                       ProviderName="System.Data.SqlClient" 
                       SelectCommand="SELECT * FROM [Order Details]" />

Analyzing the queries:

Now, before you run the application, lets get ready to trace the SQL queries that get executed. You should have downloaded the Express Profiler. Start the express profiler – Set the server details, select the authentication mechanism and finally select the events you want to trace. Here is the screen shot:

SNAGHTML4aaebbd

Fig 2: Express Profiler Settings

Run the web application. Notice that if we just set AllowPaging=true on RadGrid and do not provide a page size, by default RadGrid puts 10 as the PageSize. So in my case I should see only 10 rows on my first page of the RadGrid. Here is the Grid output:

image

Fig 3: RadGrid output

When I ran the app and looked at the trace, here is what I get:

SNAGHTML4af9b0f

Fig 4: SQL Query Trace for SQL Data Source Control bound to RadGrid

What you see here is a call to retrieve all the records from the table. You may be asking but the page size is set to 10. That is correct but what really happens is this: RadGrid will go ahead and ask SQL Data Source to get the data. SQL Data Source will blindly execute the query that has been set for the select command. RadGrid will not be able to do any tinkering with query because the SQL Data Source does not provide us a chance to put paging related statements.

Now lets do a page change on the grid. I will go ahead and click on Page 2.  RadGrid will now navigate to Page 2. Here is the trace that is generated for this:

SNAGHTML4c8b053

Fig 5: SQL Trace for Page Change Event

What you notice is, the SQL Data Source goes ahead and brings all the records from the table. RadGrid will then pick up only the second page rows and displays it.

Now lets go ahead and click on the Add New Row button and trace the query executed:

SNAGHTML4cdbf80

Fig 6: SQL Trace for Add New Record Event

As you can see it again retrieves all the records from the table.

What this tells us is the time taken is due to the fact that its going and getting all the table records no matter whatever is the situation we have. Now hitting DB and getting everything does call for some time although small but it till takes up time on the server.

Now lets do the same experiment but with Entity Data Source.

DataBinding with Entity Data Source:

I will use the same data grid but instead of SQL Data Source I will use a Entity Data Source. In order to work with Entity Data Source, you need a Entity Data Model. I will not get into how to create a Entity Data Model but assume that you know how to do it. Just create a ADO.NET Entity Data Model and generate the models from the database and use the same Northwind database. Once you have the ADO.NET Entity Data Model created, create a Entity Data Source on the page. Here is the Entity Data Source code snippet that I have:

 
<asp:EntityDataSource ID="EntityDataSource1" runat="server" 
                          OnContextCreating="EDS_ContextCreating" 
                          EntitySetName="Order_Details" />

I am making use of the OnContextCreating event to set the DbContext of ADO.NET Data Model to Entity Data Source ObjectContext. Here is the code for the event handler of OnContextCreating:

 
protected void EDS_ContextCreating(object sender, EntityDataSourceContextCreatingEventArgs e)
{
    var db = new NORTHWINDEntities();
    e.Context = (db as IObjectContextAdapter).ObjectContext;
}

Here NORTHWINDEntities is my Entity Data Model context. I am just casting it to ObjectContext since Entity Data Source works with ObjectContext. I set this entity data source as the data source of the RadGrid.

Analyzing the Queries:

Now lets run the app and trace SQL queries for the same set of actions we did with SQL Data Source control.

First, on page load:

SNAGHTML509e74c

Fig 7: Entity Data Source – Page Load – Query Trace

As you can see we have put in a “SELECT TOP 10” statement in the query. So its not bringing all 2155 records rather only 10 records. So time spent to do this will be very negligible. We also execute one additional query to get the total record count.

Now lets see what happens when we do a paging:

SNAGHTML50e4016

Fig 8: Entity Data Source – Paging – Query Trace

Now, lets trace the query when we do ‘’Add new record” scenario:

SNAGHTML50fd88d

Fig 9: Entity Data Source – Add New Record – Query Trace

Notice that, in this scenario, we automatically page to the last row and add a blank record.

As you can see from the above experiments, RadGrid is intelligent enough to optimize the queries based on the scenario you are dealing with.

Conclusion:

It was very evident from the experiments that if you are using SQL Data Source as your data source choice, there is not much RadGrid can do to optimize the query before it gets executed. Where as with Entity Data Source, RadGrid is smart enough to optimize the query and always have a optimized data fetch. I personally recommend using an ORM in the project for the data access scenarios and use the Entity Data Source as your data source choice. We i.e at Telerik have a free ORM called OpenAccess. Its free for life so you can pretty much use this in your production without any hassle at all. Do give it a try and let us know how you feel about it.

I hope this blog post does give you information on things you need to take care while doing data binding to Grids. This is just not in particular to RadGrid, this is mostly about any data binding scenario. Trace your queries and be sure that write and optimized queries are getting executed in your apps.

Till next time, Happy Coding.

Advertisements
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.

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

How to Bind RadHtmlChart for ASP.NET AJAX to SQL Data Source Control

Introduction:

RadControls for ASP.NET AJAX contains a HTML5 powered charting control known as RadHtmlChart. This charting component outputs SVG and is completely client side rendering of the chart. The charting component will output SVG on modern browsers and falls back to VML when running in older browsers. When it comes to data binding the chart, it supports a wide range of data binding mechanism starting from simple array to your custom object collection. In this blog post we will take a look at one of the data binding mechanism namely binding to SqlDataSource.

Pre-Requisites:

In order to follow this post, you will need our RadControls for ASP.NET AJAX suite. You can download a 30 day free trial from http://www.telerik.com/products/aspnet-ajax.aspx. So download the trial and install it on your system. If you already have a licensed version installed that’s even better. Following sections assume that you have done this.

Getting Started:

First lets create a “C# RadControls Web Application”. Fire up a Visual Studio and do the customary File > New Project action. In the new project dialog, you will see Telerik as one of the installed template. Expand Telerik and you will see Web as one of the nodes. Select Web and you will presented with different project templates. Select “C# RadControls Web Application”. Give your project a name and click Ok.

SNAGHTML1665f329Fig 1: New Project Dialog

You will be presented with 2 more dialogs to select theme and web settings. Select appropriately and finish the wizard. Visual Studio will go ahead and create the project.

Adding SQL Data Source to the page:

The project template will add all references required for Telerik ASP.NET Ajax controls, necessary updates to Web.config and create a Default.aspx page. We will be working with Default.aspx for this blog post. Since we need to bind the chart to a SqlDataSource control, lets go ahead and add one to the page. You can configure the data source using the smart tag option in the ASPX page or just go to design and select the smart tag on the control.

image

Fig 2: Configuring SqlDataSource

Clicking on Configure Data Source, will open “Choose Your Data Connection” dialog. So go ahead and set up your connection for the data source. For this example I will be using Northwind as the database and Products table. Once you pass the connection settings dialog, you will be required to configure the select statement. For this demo I will just do a select of top 10 products by their price in descending order. Here is how my test query looks like:

SNAGHTML1678372cFig 3: Test Query Dialog

Click Finish to finish configuring the SqlDataSource. Next we will see how to work with RadHtmlChart.

Adding RadHtmlChart to the page:

From the Toolbox, drag and drop a RadHtmlChart on the page. In the ASPX page, select the smart tag on the RadHtmlChart. It will open a configuration window. We will configure the RadHtmlChart now to work with SqlDataSource control.

image

Fig 4: RadHtmlChart Smart Tasks

Select the DataSource from the Choose Data Source drop down.Then click on the Open Configuration Wizard. You will see the following Configuration Wizard pop up:

SNAGHTML167ef05cFig 5: RadHtmlChart Configuration Wizard

We will go through the configuration one by one.

Chart Type:

For this blog post I will be going with Column chart. So in the Type tab, select Column Chart.

SNAGHTML1680fd76Fig 6: Chart Type selection

Data:

Now to let the chart know where to read the data from, select the Data tab. The data source would have been defaulted to the sql data source we had added in previous section. Now we need to add a series to the chart. Click on the “+” button next to the Series section. Provide Name, AxisName, Type of the series and what field in the data source should the Y axis data point be read from. For this example UnitPrice will be my Y axis data point. I will be plotting the price on the Y axis. Here is how my settings look like:

SNAGHTML1684d53e

Fig 7: Series configuration

X Axis:

Now we need to configure how our X axis will look like. If you want to customize the Min Value, Max Value, Step and Axis Crossing Value or you want to hard code the X axis items, you can do so in the XAxis tab.

SNAGHTML168eec95

Fig 8: XAxis Configuration

Once done with the settings click Apply. Now we need to show the product name as the X axis data point. For that we will need to get back to the code, add a property called “DataLabelsField” and value of this property will be the column name from the data source which will contain the data points. In our case this will be ProductName column. Here is the code:

<XAxis DataLabelsField="ProductName"></XAxis>

Y Axis:

Similar to XAxis you can customize how you want the YAxis to look. The YAxis tab provides you options to customize the axis and also allows you to add additional Y Axis to the chart.

SNAGHTML1694c8e0

Fig 9: YAxis Configuration

In our current example, we don’t have to do anything here. The Min and Max value and Step will be calculated automatically based on the data source.

Legend, Title:

Last but not the least, we can customize how the Legend and the Title of chart should look like. Click on the Legend/Title tab and provide the appropriate data. Here is my settings:

SNAGHTML169795df

Fig 10: Legend, Title Configuration

Click Ok when done. This will generate the following code in the ASPX:

<telerik:RadHtmlChart ID="RadHtmlChart1"
runat="server" DataSourceID="SqlDataSource1">
 <ChartTitle Text="Top 10 Products By Price">
 <Appearance>
 <TextStyle FontSize="16px"></TextStyle>
 </Appearance>
 </ChartTitle>
 <Legend>
 <Appearance Position="Top"></Appearance>
 </Legend>
 <PlotArea>
 <XAxis DataLabelsField="ProductName">
 </XAxis>
 <YAxis Name="Price">
 </YAxis>
 <Series>
 <telerik:ColumnSeries Name="Price"
 DataFieldY="UnitPrice" />
 </Series>
 </PlotArea>
 </telerik:RadHtmlChart>

So we are now done with the RadHtmlChart configuration. We have configured it to work with the Sql Data Source we added in the previous section. We have set what chart we want and configured the series, XAxis, YAxis and Legend/Title. Its time now to look at the output.

Output:

Build and run the project. It should open up a browser and show you the following chart output:

image

Fig 11: RadHtmlChart output

Conclusion:

In this post we saw how easy it is to configure RadHtmlChart to work with Sql Data Source. Also we looked at the RadHtmlChart configuration wizard which makes it super easy to configure the chart with various settings and best of all you don’t have to write any code. The configuration wizard gives you a GUI and when you are done with the settings, it will generate the code for you. I say this is a productivity gainer. Let us know how you are using RadHtmlChart in your projects. We will love to hear your feedback or suggestions. So do drop in a line in the comments.

Till next time, Happy Coding.

Revamping Web Applications: Upgrading to RadListView

We have finished the ORM deployment with our previous post. Now we are ready to start migrating the default controls to Telerik controls. In this post we will take a look at converting asp:ListView to telerik:RadListView and we would learn about telerik:RadDataPager which will replace the asp:DataPager.

Add RadListView

For this exercise we will take Directory page from our Event Networking application. Remove the existing ListView control and add a RadListView control from the Telerik AJAX Components.image

Note: After adding the control rename the ID property same as your asp:ListView ID property. We might see an error because the underlying type has changed. The error occurs because initially the same id was linked to asp:ListView. The error will eventually disappear. Again, we need to first remove the already existing methods defined for the ListView from the aspx.cs i.e. codebehind page. Now copy the rest of the properties from ListView. We need to add the property DataKeyNames to our RadListView. Now we copy all the templates from asp:ListView.

image

If you run the application RadListView should have been populated by the data, as the data binding has already been handled at the Page_Load event (explained in our previous blog <Hyperlink>).

Your data is now populated but currently there is no paging option. To provide paging add the property AllowPaging=”true” to RadListView.

Add Event Handler to RadListView

To add an event, type the name of the event and click <Create New Event>. So add an event handler for OnItemCreated. We are using this event to populate the pictures of each attendee.

We had the following code under asp:ListView event:

image

Lets tweak the existing code for the RadListView:

NOTE: Do not forget to add “using Telerik.Web.UI;” in your aspx.cs

protected void directoryListView_ItemCreated(object sender, RadListViewItemEventArgs e)
 {
var item = e.Item as RadListViewDataItem;
if (item != null)
{
var userId = item.GetDataKeyValue("UserId").ToString();
var u = (from x in uu
where x.UserID == int.Parse(userId)
select x);
if (u.Count() != 0)
{
((Image)e.Item.FindControl("ProfileImage")).ImageUrl = u.First().URL;
}
 }
 }

Add RadDataPager

If you use ASP pager, you only have the numeric option. But using RadDataPager gives you lot more option.
imageimage

The main aim is to get a better UX and hence we replace asp:DataPager with telerik:RadDataPager. We changed the following properties PagedControlID=”directoryListView” and PageSize=”15″. Next we add a field and within it we insert the <telerik:RadDataPagerSliderField /> . This provides us a natural gesture to slide through various pages.

To do it declaratively switch to Design view and select the RadDataPager. Then expand the smart-tag and change the PagedControlID and the Pager Mode to NextPrevNumericAndAdvanced. This would allow users to do more than just select the page numbers.

Error Explanation

But if we had copied the same code to our RadListView item created event it throws following error:

‘Telerik.Web.UI.RadListViewItem’ does not contain a definition for ‘DataItem’ and no extension method ‘DataItem’ accepting a first argument of type ‘Telerik.Web.UI.RadListViewItem’ could be found (are you missing a using directive or an assembly reference?)

This occurs because the “e” defines the event argument which at runtime has type RadListViewDataItem but has RadListViewItem at compile time. Hence we need to explicitly need to typecast it into RadListViewDataItem and then we can use it in a similar way.

Why Change it after all:

In case of customisation RadListView gives us far better UX and functionality.

The dataPager is static for ASP control whereas we have many more features and modes in which we can operate while using RadDataPager varying from just numeric pagers to smooth sliders gesture.

The following image gives us an overview of how the ASP control looked. And in the following image we can the great UX and the additional features available with us.

image

image

Read- Revamping Web Applications Part-9: Working with RadWindows & Converting GridView to RadGrid

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

How to set Column Header Style of RadDataGrid in XAML based Windows Store Application

Learn more about Rad Controls for Windows 8 here

RadDataGrid is most important RadControl to create enterprise based Windows Store Application. Currently I have been writing on RadDataGrid and you can read previous two posts at below link,

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

Part 2: Working with Columns width in RadDataGrid in XAML based Windows Store Application

In this post we will take a look on setting Column Header Style. You can set column header style by configuring value of

image

To start with first you need to add following references on XAML.


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

After adding reference Create RadDataGrid as following. Make sure AutoGenerateColumns property is set to false


<telerik:RadDataGrid
 x:Name="ProductGrid"
 AutoGenerateColumns="False"
 Width="500">
</telerik:RadDataGrid>

After this you need to manually create columns. 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

In DataGridTextColumn you need to set HeaderStyle. That can be done as following. In below code we are setting

  1. Header Background
  2. Header Fontstyle
  3. Header Fontsize

image

So putting all together you can create RadDataGrid with customized column header as following


<telerik:RadDataGrid
 x:Name="ProductGrid"
 AutoGenerateColumns="False"
 Width="500">
 <telerik:RadDataGrid.Columns>

<telerik:DataGridTextColumn
 PropertyName="ProductName"
 Header="Name"
 Width="200">
 <telerik:DataGridTextColumn.HeaderStyle>
 <Style
 TargetType="telerikgridrimitives:DataGridColumnHeader">
 <Setter Property="Background" Value="SaddleBrown"/>
 <Setter Property="FontStyle" Value="Italic"/>
 <Setter Property="FontSize" Value="20"/>
 </Style>
 </telerik:DataGridTextColumn.HeaderStyle>
 </telerik:DataGridTextColumn>

 <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:DataGridTextColumn.HeaderStyle>
 <Style
 TargetType="telerikgridrimitives:DataGridColumnHeader">
 <Setter Property="Background" Value="Blue"/>
 <Setter Property="FontStyle" Value="Oblique"/>
 <Setter Property="FontSize" Value="20"/>
 </Style>
 </telerik:DataGridTextColumn.HeaderStyle>
 </telerik:DataGridTextColumn>

</telerik:RadDataGrid.Columns>
 </telerik:RadDataGrid>

On running application you will get RadDataGrid with styled column header 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 header style. I hope you find this post useful. Thanks for reading.

Learn more about Rad Controls for Windows 8 here

Download Source codes, Slides and Recording from 7th march Webinar: Developing Applications for Nokia Lumia using Telerik Controls

On 7th March 2013 we at Telerik India hosted webinar on Developing Applications for Nokia Lumia using Telerik Controls. We appreciate that you joined in. We hope that webinar was useful to you. If you have any further queries, please feel free to reach us.

Learn more about Rad Controls for Windows Phone here

Download trial from here

Download webinar resources from here

In webinar we explored various controls with focus on following three controls.

  • Conversation View
  • QR and Barcodes
  • Different kind of charts

Please find recorded webinar below.

Learn more about Rad Controls for Windows Phone here

Download trial from here

Download webinar resources from here

If you have any query feel free to reach us. You can reach me any time at dhananjay.kumar@telerik.com .

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.

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.

New UI Controls as part of Telerik DevCraft Q3 2012 Release

On Oct 17 2012, we did a release of our Telerik DevCraft bundle known as Q3 2012 release. As part of the release our UI suites have got couple of new controls added to the bundle. In this blog post we will look at what new controls have been added to our UI suites namely – RadControls for ASP.NET AJAX, RadControls for Silverlight, RadControls for WPF, RadControls for WinForms, Windows 8 Controls and RadControls for Windows Phone. So lets go over them one by one.


RadControls for ASP.NET AJAX:

ASP.NET AJAX suite gets the following new controls added to the family of already existing 70+ controls. They are:

Gauge:

This is a high performing HTML5 based radial and linear gauge control which can be used to show certain values in a scale.

 

See demos of Gauge control here

PivotGrid (Beta):

PivotGrid is a control used to show pivoted data in a tabular or outline or in a compact layout. We bring the power of Pivot to Web with the introduction of this control. This control supports aggregates, drag and drop and a field list control panel.

See demos of PivotGrid here.

AutoCompleteBox:

As the name goes – this is a auto completion textbox. It auto suggests filtered list with options based on user input and supports multiple item selection. This was one of the highly requested control for ASP.NET AJAX

See demos of AutoCompleteBox here.

You can download a free trial of RadControls for ASP.NET AJAX and evaluate the controls for your needs.

image


RadControls for SilverLight:

Four new controls got added to the Silverlight controls family. They are:

PivotGrid (Beta):

RadPivotGrid is released as a Beta control in this release. This supports data summarizations and great data visualization capabilities.

image

See demos of RadPivotGrid here.

GanttView:

GanttView is a control designed for managing and visualizing complex planning data and tasks. Often used in project planning and management scenarios. Using this control it is easier to understand and analyze the data.

image

See demos of GanttView here.

AutoCompleteBox:

No need to explain this control. The auto suggestion control is now available in Silverlight suite also.

image

See demos of AutoCompleteBox here.

HeatMap:

HeatMap is a control which is matrix-like control, which uses color to encode the values along two axes.

image

See demos of RadHeatMap here.

Download free trial of RadControls for Silverlight and evaluate them for your needs.

image


RadControls for WPF:

New controls introduced for WPF suite are as follows:

PivotGrid (Beta):

image

GanttView:

image

AutoCompleteBox:

image

HeatMap:

image

Download free trial of RadControls for WPF and evaluate them for your projects.

image


RadControls for WinForms:

There was one control added to the WinForms family. That is RadPivitGrid and released as a Beta control in this release.

PivotGrid Filtering

You can download thirty day free trial of RadControls for WinForms with dedicated support during trial period.

image


RadControls for Windows Phone:

Five new controls got added to the Windows Phone controls family. They are as follows:

TimeSpanPicker:

TimeSpanPicker control provides full control over time and duration in any app where users set duration. This control allows users to define duration of certain action.

TimeSpanPicker

Expander:

Expander control allows users to expand or collapse conversations. Fits well in applications that rely on interaction and messaging.

Expander Control

PasswordBox:

As the name goes this is a ready made password input text box for Windows Phone scenario. Using this control in a registration form will automatically display the typical dots in place of the actual password being typed.

PasswordBox

DataForm:

DataForm control provides with out of the box data forms that can be simply configured to work with business logic of your application. It also provides out of the box validation, styling and other customization mechanisms.

DataForm

InputPrompt:

This control allows you to create prompts where you can ask users to enter important details such as Phone number, email, etc.

InputPrompt

You can download a free trial of RadControls for Windows Phone to evaluate the controls.

image


RadControls for Windows 8:

This is a brand new suite as far as the RadControls family is concerned. This suite contains some of the controls which are not found in the SDK of Windows 8 development like date and time pickers. These controls have been built from ground up and provide you with the same UI and UX as that of Windows 8 look and feel. Currently following 15+ controls are released and many more will be added to the suite over time. At this moment we are offering this suite at an introductory price of $99 and you will receive all the new components and updates that will be added to the suite in the next year.

image

image


Hope this blog post excites you in terms of the new control offerings from our UI control suites. If you feel like trying out them go ahead and download our free 20 day trials and evaluate them. Note that during the trial period you will get dedicated support meaning you can raise support tickets and a dedicated support team will be responding to you. Give it a try and let us know how you feel about our UI controls.

Till next time, Happy Coding.