Kendo UI Button Wrapper for ASP.NET MVC

Overview:

In this blog post we will take a look at one of the new widgets we have released as part of Kendo UI Web controls suite. For long people have been asking about why we didn’t have a Kendo UI Button in the arsenal. Well we already have a <button> element in HTML specs so we didn’t want to reinvent things. But when it comes to using Kendo UI for your app you may want to keep things in your app consistent with respect to styling. So instead of you using regular button and styling it to have a look and feel of Kendo UI style sheet, we have gone ahead and released a Button widget for you. You just instantiate the button as any other widget you have been using. The button automatically takes the style of the current Kendo UI theme you are using. So this blog post will be your primer for using the Button Widget in your ASP.NET MVC apps.

About Button Wrapper:

Kendo UI Button Wrapper for ASP.NET MVC provides a styled clickable UI widget with any arbitrary content. With Kendo UI Button Wrapper you get a consistent Kendo UI styling.

image

Basic Button Usage:

In order to create a Button, you will use the Button() builder. You will need to provide a name to the widget and the content which needs to be shown on the button. Here is the code:


@(Html.Kendo().Button()
.Name("textButton")
.Content("Submit")
)

 

Buttons with Icons:

Kendo UI Button wrapper allows you to also specify a icon as part of the button content. The icons can be provided to the button in three ways. They are:

  • SpriteCssClass Method
  • Icon Method
  • ImageUrl Method

SpriteCssClass Method Usage:

You can use the SpriteCssClass() method to provide a icon to the content. In this method the icon is provided by using a background image (usually a sprite). From web standards point of view, using a background image is better. In the below example I am using a sprite which contains flags of different country. I will create a class to point to a specific country lets say Netherlands and use that class in the Button SpriteCssClass() method. Here is the code for this scenario:


.netherlandsFlag
{
background-image: url("<path to image folder>/flags.png");
background-position: 0 -64px;
}

@(Html.Kendo().Button()
.Name("btnSpriteIconButton")
.SpriteCssClass("k-icon netherlandsFlag")
.Content("Sprite icon"))

Icon Method Usage:

You should use Icon() method when you want to use one of the predefined icons we pack as part of Kendo UI control set. You can refer our Icons Demo to get a glimpse of all the pre packaged icons. Here is the code to use the Icon() method and provide an Kendo UI Icon for the button:


@(Html.Kendo().Button()
.Name("kendoIconButton")
.Icon("funnel")
.Content("Kendo UI sprite icon")
)

ImageUrl Method Usage:

If you have any image that you want to use as a icon, you can use the ImageUrl() method and provide the image path. Here is the code for the same:


@(Html.Kendo().Button()
.Name("imageButton")
.ImageUrl(Url.Content("<a href="http://demos.kendoui.com/content/shared/icons/sports/snowboarding.png&quot;))">http://demos.kendoui.com/content/shared/icons/sports/snowboarding.png"))</a>
.Content("Image icon")
)

Here is the screen shot of the buttons with all the above 3 icon methods being employed:

image

Handling Client Side Events:

You can handle the client side event using the ButtonEventBuilder. Button has a Click event exposed. You can provide the name of the client side JavaScript function which will handle the event. Here is the code snippet for handling click event on the client side:


@(Html.Kendo().Button()
.Name("refreshButton")
.Icon("refresh")
.Content("Refresh Button")
.Events(ev => ev.Click("onClick"))
)

<script>
function onClick(e)
{
console.log("button click event handled");
}
</script>

Accessing Button Instance Client Side:

Similar to all kendo UI Widgets, an existing Button instance can be accessed via the .data() jQuery method, executed by the jQuery object on the originating element. Here is code snippet of how to access a button instance:


@(Html.Kendo().Button()
.Name("btnEdit")
.Content("Edit")
)
<script>
$(document).ready(function ()
{
var kButton = $("#btnEdit").data("kendoButton");
console.log(kButton);
});
</script>

Conclusion:

In this blog post we looked at how easy it is to work with the Kendo UI Button wrapper for ASP.NET MVC. We looked at the feature of providing icons to the button. We support 3 different types using which you can provide the icons. You can look at more Kendo UI Button demos here. Give it a spin and let us know if you have any feedback or comment.

Codeless File Uploading to Everlive using Telerik’s Cloud Upload for ASP.NET AJAX

This content was originally posted on Telerik’s blogs here.

Overview:

Telerik’s ASP.NET AJAX Cloud Upload is a brand new control in the arsenal of ASP.NET controls which provides you the ability to support uploading of files to Cloud providers. What’s best about this control is, you don’t have to write any code i.e. this is codeless uploading of files. If this excites you, then read on.

About Cloud Upload for ASP.NET AJAX:

RadCloudUpload. is part of the RadControls for ASP.NET AJAX suite and at the moment supports the following cloud providers: Amazon S3, Azure Blob Storage and Everlive (Telerik’s Backend as a Service) .

In rest of the sections, we will see how to use Cloud Upload with Everlive.

What is Everlive?

Everlive is Telerik’s Backend as a Service or BaaS. Everlive links your application to backend cloud storage and provides User management, push notifications, Social networking services integration etc. Some of the benefits are:

  • One portal to manager your entire app background
  • Data & file security
  • Target every mobile platform with ease
  • Frictionless login with social authentication services
  • Push, Email and SMS notifications

You can know more about Everlive at http://telerik.com/everlive

Creating Everlive Project to store files:

You can sign up for free and you get a developers account which gives you unlimited API calls, 10K push notifications, 100MB of DB space, 1GB of file storage and 5GB of bandwidth. Once you log into your Everlive account, you can create a new project. Click on “Create a Project” from the Everlive dashboard.

el1

In the “New Project” dialog, enter project name, description, select “Start from scratch” radio button and click on “Create Project” button.

el2

Here is the project dashboard once Everlive creates our new project:

el3

Notice that, Everlive has out of the box added Files, Users and Roles entity types. Files entity type is like container to which you can readily add files. Click on Files link on the left hand menu to look at Files screen:

el4

You can click on “Upload Files” to upload a new file from the portal itself.

API Keys for accessing Everlive:

In order to integrate with Everlive i.e. uploading to or reading files from Everlive from any application, you will need to have access keys. You can get access keys to your projects, by clicking on “API Keys” in your project dashboard. Note down the application name and the application key. We will need this information when we integrate with RadCloudUpload.

el5

Create a Web Application:

Fire up a Visual Studio 2013 and select File > New Project. In web templates select “RadControls Web Application”, give it a name, location and click Ok. Visual Studio will go ahead and create our project. By default a default.aspx page is already added to the project. We will use this page for the demo purpose.

Adding Everlive Client Library:

To integrate with Everlive Cloud Storage, we need to reference the assembly Telerik.Everlive.Sdk.Net35dll. You can download the files from here. Download the zip file, extract it and add reference to Telerik.Everlive.Sdk.Net35.dll in the web project. We also need Newtonsoft.Json.dll, so add a reference for that too.

Using the Cloud Upload control:

From the tool box drag and drop RadCloudUpload control on to Default.aspx page. Access the smart tag of the control and choose Everlive as the provider type. Then click on the “Open Everlive’s Configuration Wizard”.

el6

<telerik:RadCloudUpload ID="RadCloudUpload1" runat="server" ProviderType="Everlive" />

In Configuration Wizard dialog enter Everlive API Key.

el7

Specifying the Uncommitted Files Expiration Period (hours), you could easily configure the time, after which the unprocessed files will be removed from the storage.

This will add configuration setting in the web.config file:

<telerik.web.ui>
<radCloudUpload>
<storageProviders>
<add name="Everlive" type="Telerik.Web.UI.EverliveProvider" apiKey="<YOUR API KEY>" uncommitedFilesExpirationPeriod="1" />
</storageProviders>
</radCloudUpload>
</telerik.web.ui>

RadCloudUpload in Action:

We are all set now. Just run the application. You will see a select button. Click on the select button to select a file. As soon as a file is selected, the upload will start. Here is the snapshot of file being uploaded:

el8

And here is the snapshot of file upload being finished:

el9

At this point if we jump back in to Everlive project dashboard and Files section, you should see the file we just uploaded. Here is the screenshot of the Files on Everlive:

el10

Conclusion:

That’s it. We are done. I did not write single line of code but was able to upload files to Everlive file storage. That is as easy as it can get with Telerik’s Cloud Upload for ASP.NET AJAX. Give it a spin or check out the demos and let us know what you feel about this control.

How to Automate Test for Image verification using Test Studio

Learn more about Test Studio here

Telerik Test Studio got out of box feature to automate test for image verification. You can verify, whether image has been changed or distorted in application without writing any script. In this post we will take a look on, “How can image verification test can be automated in Test Studio

Let us consider that there is web application with an image as below,

clip_image001

To do verification around this image, start recording the test. Once application is launched for recording, select Enable or Disable over hover option from Test Studio control panel docked in recording browser window,

clip_image002

This will allow you to select image on DOM. Put mouse for some time and you will get a blue bubble.

clip_image004

On clicking of blue bubble you will get option to Image Verification.

clip_image005

Next you need to click on Image Verification. On clicking you will get Image Verification dialog box.

clip_image007

In dialog box you can configure various options like,

  • Verify entire image
  • Verify certain area of image

To do exact match you need to put Total Difference as 0. Recommended is to put in between 1 to 5 %. If you want to verify certain area of image then uncheck Verify Entire Image checkbox and configure X axis, Y axis, Width and Height value.

I have recorded a very simple test for image verification with two steps as below. You can see that error tolerance has been set to 2%.

clip_image002

Assume if test fails in image verification step then you will get information as below that Images are not the same.

clip_image004[6]

We just learnt that Test Studio allows us to perform automation of image verification without writing any script. I hope you find this post useful. Thanks for reading.

clip_image006

How to do CRUD operation on Telerik Everlive data from .NET Application

Learn more about Telerik Everlive here

You can consider this post as second post of the series. In first post of this series we learnt about fetching data from Telerik Everlive in a .Net application.

How to fetch data from Telerik Everlive in a .NET Application

In previous post we touched upon following,

  • Creating client side representation of Everlive content type
  • Adding required assembly to work with Everlive in a .Net application
  • Fetching data from Everlive in .Net application.

To create an item also we need client side representation of Everlive content type. You can create a single item as following,


static async void CreateData(EverliveApp productApp)
 {
 var productToInsert = new Products
 {
 ProductName = "sugar",
 IsContinued = true ,
 Quantity = 100,
 UnitInStock = 23,
 UnitPrice = 20 ,

 };

await productApp.WorkWith().Data<Products>().Create(productToInsert).ExecuteAsync();
 Console.WriteLine("Product Inserted " + productToInsert.Id);
 }

In above code,

  • We are creating item to be inserted. This item is instance of client side representation (class) of Everlive content type. In this case we are creating object of Products. This will pass as parameter to Create function.
  • Asynchronously we are inserting an item by calling Create function. This function takes instance of Products as parameter. This instance will get inserted as an item to Telerik Eeverlive

So these simple steps you need to follow to insert an item from .Net application to Telerik Everlive content type.

Next you can update an item by first fetching it on basis of id or any other column. Once data is fetched at the client application , you can update that and using Update() function save data back to Everlive server.


static async void UpdateData(EverliveApp productApp)
 {

var productToUpdate = await productApp.WorkWith().Data<Products>().GetById("76a49eb0-67ad-11e3-8374-496a59d093be").ExecuteAsync();
 productToUpdate.ProductName = "Sugar and Salt";
 productToUpdate.IsContinued = true;
 await productApp.WorkWith().Data<Products>().Update(productToUpdate).ExecuteAsync();

}

In above code,

  • We are fetching an item to update
  • Updating required columns
  • Using Update function saving data back to Everlive

These simple steps are required to update an item from .Net application.

Deleting an item is simplest. You need to pass id of item to delete that. If you want you can delete an item on other projection as well. In further posts we will discuss about that. To keep it simple we can delete an item on basis of id as below,


static async void DeleteData(EverliveApp productApp)
 {

var idtoDelete = "76a49eb0-67ad-11e3-8374-496a59d093be";
 await productApp.WorkWith().Data<Products>().Delete(idtoDelete).ExecuteAsync();

}

These simple steps are required to perform CRUD operation from .Net application on Telerik Everlive data. I hope you find this post useful. Thanks for reading.

How to fetch data from Telerik Everlive in a .NET Application

Learn more about Telerik Everlive here

To start with and put in a single sentence Telerik Everlive in Backend as a Service offering from Telerik. In this post we will take a look on fetching data from Everlive in a .Net application. We will consider using .Net Console Application. However concept will be same for almost all other kind of .Net applications like WPF, Windows Apps.

To start with download .NET SDK from here . On download page make sure that you have selected .NET platform. Download and extract folder. You should get two dll. You need to add these dll in .Net project.

image

To add dll in project right click on Reference in project. From context menu select option of Add Reference. You need to add above two extracted dll in the project.

image

After adding required references next step is to create class which will represent Everlive content type in the client application. That class can be created as following ,


public class Products : DataItem
 {
 private string productName;
 public string ProductName
 {
 get
 {
 return this.productName;
 }

set
 {
 this.productName = value;
 this.OnPropertyChanged("ProductName");
 }
 }

private int unitPrice;
 public int UnitPrice
 {
 get
 {
 return this.unitPrice;
 }

set
 {
 this.unitPrice = value;
 this.OnPropertyChanged("UnitPrice");
 }
 }

private int quantity;
 public int Quantity
 {
 get
 {
 return this.quantity;
 }

set
 {
 this.quantity = value;
 this.OnPropertyChanged("Quantity");
 }
 }

private bool isContinued;
 public bool IsContinued
 {
 get
 {
 return this.isContinued;
 }

set
 {
 this.isContinued = value;
 this.OnPropertyChanged("IsContinued");
 }
 }
 private int unitInStock;
 public int UnitInStock
 {
 get
 {
 return this.unitInStock;
 }

set
 {
 this.unitInStock = value;
 this.OnPropertyChanged("UnitInStock");
 }
 }


}

There are couple of points you need to keep in mind,

  • Class name should be same as Content Type name
  • Class should inherit from DataItem. It is not a must condition though.
  • Properties name should be same as columns of Content Type

After creating client side class, you can either synchronously or asynchronously fetch items from Everlive. Items can be fetched asynchronously as below,


static async void FetchData(EverliveApp productApp)
 {
 var products = await productApp.WorkWith().Data<Products>().GetAll().ExecuteAsync();

 foreach (var item in products)
 {
 Console.WriteLine(item.ProductName + item.UnitPrice);

}
 }

Important point is that you need to pass client side type (class) in this case Product to fetch items. You need to make an instance of EverliveApp class passing your app key in the constructor.


static void Main(string[] args)
 {
 EverliveApp productApp = new EverliveApp("yourkey");
 FetchData(productApp);
 Console.ReadKey(true);
 }

This is all you need to do to fetch elements from Telerik Eeverlive in a .Net Console Application. I hope you like this post. Thanks for reading.

Error Solved: Binding Excel file as Data Source in Test Studio

Download free 30 days trial of TestStudio from here

Find more about Test Studio here

Okay, so have you come across this error while binding an Excel File as DataSource to a Test in Test Studio? You may get this error when you are working with fie saved in Excel 2013 format.

image

Now how to solve this error? Very easily you can solve this error by saving Excel file in Excel97-2003 Workbook format.

clip_image002

If you do not want and can save your file in Excel97-2003 format then probably you may want to check application log. To check application log follow these two steps,

  1. Navigate to Help Menu
  2. Click on Enable log to enable log in Test Studio.

image

In Log if you see something like Microsoft.ACE.OLEDB.12.0 is not registered on local machine then, you need to install Access Database Engine. You can download and install it from below link,

http://www.microsoft.com/en-us/download/details.aspx?id=23734

After installing it you should able to work with Excel file regardless of it format is Data Source in Test Studio.

I hope this post useful. Thanks for reading.

Download free 30 days trial of TestStudio from here

Find more about Test Studio here

Recap of webinar Journey from Manual to Automated Tester

image

On 12th December 2013, we conducted webinar on Journey from Manual to Automated Tester in 1 Hrs. We had great time teaching Automated Testing over web to audience of more than 150.

Download free 30 days trial of TestStudio from here

Find more about Test Studio here

In webinar we covered following topics,

  • Why to automate a Test
  • Advantage of Test Automation
  • Getting started with Test Studio
  • Record and Play a Test
  • Cross Browser Testing
  • Data Driven Testing
  • Test Lists and Scheduling

If you missed webinar then you can view recorded webinar below,

 

Some of the Questions and Answers from webinar are below,

Which all technologies that can be automated by Test Studio?

TestStudio can automate functional Testing of

  • Web Applications
  • Desktop Apps created using WPF
  • Load Testing
  • Load Testing of Web Services
  • Load Testing of Mobile Apps

Can we perform Load testing for more than 100 virtual users?

Yes Load Testing can be performed with more than 100 Virtual Users. Learn more about Load Testing here,

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/load-testing.aspx

Can we do automation testing for excel application?

What I understand from this question that you want to automate testing of

  • Reading Excel file
  • Verifying whether data being written to Excel file.

Yes you can do it using CODED STEPS. You need to write C# Code using File System API and Excel API to achieve automation .Learn more about Coded Steps here

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/coded_steps.aspx

What programming languages does it support?

Test Studio supports below programming languages,

  • C#
  • VB.Net

Can test studio access Linux System?

No Test Studio does not work on Linux system. As of now Test Studio supports only Windows.

Can you please show how we parameterise the user name and password?

As shown in demo you can do it using Data Driven Testing. Learn more about Data Driven Testing here,

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/data-driven-testing.aspx

When you choose any Browser for test recording

Learn more about recording here,

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/recording-tests.aspx

How this tool is handled browser pop-up?

Learn more about handling popup here,

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/dialogs-and-popups/dialogs.aspx

Is there any option for automating silver light application?

Yes Test Studio supports automation testing of Silverlight application. Learn more about that here,

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/write-tests-in-code/silverlight-test-automation/introduction.aspx

Does it support flex?

Unfortunately Test Studio does not support Flex application testing.

Can we do testing for Kendo UI applications?

Test Studio supports out of box testing of Kendo UI Widgets. See Kendo UI Grid testing video here,

http://tv.telerik.com/watch/automated-testing-tools/testing-kendoui-grid-with-test-studio

Webinar was highly demo oriented and PPT had very less role to play. However if PPT interests you then find it below,

Download free 30 days trial of TestStudio from here

Find more about Test Studio here

clip_image002

Telerik TestStudio: Subscription based Automation Testing Tool

image

Telerik TestStudio is now subscription based. Now as user you have three options to choose from.

Learn more about Purchasing Options

image

You have now monthly and yearly subscription option. You can choose among three bundles as per your requirement.

There are many added and imprived features with this release. Some of them are as follows,

  • Load Testing Traffic from Mobile Devices
  • Load Testing of Web Services
  • Extended Support for HTML5 Controls
  • Improved Browser Calibration
  • TeamPulse Integration Improvement. Etc.

Learn what is new in TestStudio

I hope you will find new subscription based model along with new features exiting. Test Studio rocks.

How to change default waiting time to find Element for a step in Test Studio

Learn more about Test Studio here

While talking to customers I come across one common question that, “How can we change default waiting time to find element for a particular Test Step? “

Let me start with explaining this question little bit more. So when you record a test, TestStudio saves information about elements in Element Repository. While executing test, TestStudio try to identify element in Element Repository on basis of Identification Logic saved. TestStudio waits for 30ms to find element.

Now there could be scenario when 30ms is not enough and you want to change this default wait on step value. Let us learn how can we change this?

To change default wait to find element in a step, click on edit steps. You will get an option of UseStepWaitOnElements. You need to check the check box as given below.

image

Once you check this check box, next go to step property. There you will find WaitOnElement property field editable. Here you need to put desired wait time to find an element for a particular step.

clip_image001

This is what all you need to do to change default wait time for elements. I hope you find this post useful. Thanks for reading.

Telerik Test Studio participated at STC 2013

Learn more about Test Studio here

See Photos from Event here

We are happy to announce that Telerik team was present at STC 2013 on 4-5th December in Bangalore. We had great time talking, interacting and advocating our products to esteem audience. Telerik had a booth at the event and we witnessed great response from audience at booth.

Download 30 days free trial of Test Studio from here

image

It was one of the premiere event with large number of audience. There were industry known speakers and audience from profile of Test Director to junior level Test Professional.

clip_image002

Our Evangelist Dhananjay Kumar did two presentations at event. At first day he gave a Test Studio tool demo. Second day he had a talk on “A Look on Automated Web Testing”. In talk he focused on how to handle dynamic id and Ajax in web test automation.

clip_image004

We gave away more than 100 Telerik Ninja TShirts and Nexus 7 Tablet to winner of lucky draw.

clip_image006

We had great time at the event. If you have any further queries feel free to write us at Dhananjay.kumar@telerik.com

Download 30 days free trial of Test Studio from here

Handle Dynamic Id with ease in Test Studio

Learn more about Test Studio here

Download 30 days Free Trial Here

Okay, so I will start this post saying there is not a single golden rule to handle dynamic id while automating Test. It depends, I repeat it depends. In this post I will focus on various ways you can handle dynamic id in Test Studio.

clip_image002

In this post we will learn to deal with dynamic id in three different ways,

  1. Handling with changing setting at Test Project level
  2. Handling with changing setting at Element level
  3. Handling with Coded Step

Scenario # 1 : Test Project Level

Let us say you are sure that id is going to be dynamic throughout the application. And you cannot rely on id to identify element. In this scenario Test Studio allows you to configure Identification Logic at the Test Project level. You can change that in Project Settings.

By default Test Studio finds and element on following identification logic. It search on the id AND tagname. This is set for the Test Project level.

clip_image002

Now we know that id for application in test is going to be dynamic and we want to change the FindLogic to some other tag. In other words we want to change default Find Logic for whole Test Project. To do this navigate to Project Settings.

You can browse to FindLogic setting of Test project by clicking on

Project -> Show Setting

clip_image004

In Project Setting dialog box click on identification logic. Here you can find identification logic and change it as per requirement to your project.

clip_image006

As you can clearly see that by default Test Studio find an element on its Id. If you consider that Name of the elements are not expected to change frequently then you can consider to change project setting to find an element on its Name attribute.

To change FindLogic select any attribute then click on up/down arrow to change its position. For example Name is at second from top. To make it first attribute on which Test Studio will find element select Name and then click on up arrow button to bring it at the top in the list.

clip_image008

In this way you can configure FindLogic. You may notice that if required you can add new Tag to list as well. After reconfiguring Identification Logic you can find that now FindLogic for whole Test project (recording which will happen after changing logic) has been set to name and tagname.

clip_image010

Scenario # 2 : Element Level

Second scenario could be you need to change identification logic only for a particular element. You do not want to change identification logic for whole Test project rather for a particular element. Test Studio allows you to do that as well. To do this select element from Element Repository and right click. From context menu select Edit Element.

clip_image001

When click on Edit Element, next you will get various options to Find Element.

clip_image003

Let us Find Element in Live Version. To find element in Live Version make sure that application is already open in browser. Since already application is opened here so select open Current Page and select application from drop down.

clip_image005

After navigating to application you will find Elements current FindLogic.

clip_image007

To delete current logic move mouse and you get option like below to delete current filter.

clip_image009

After deleting both filter let us use XPath to find element.

clip_image011

This is what all you need to change FindLogic for a particular element. You can see in Element Repository that FindLogic has been changed to XPath.

clip_image013

Scenario # 3 : Code Step

So far in above two scenario we saw that if Id is dynamic we can change it to some other attribute of element like Name, XPath etc. Now there could be scenario that you cannot rely on any attributes.

XPath gives you positional based FindLogic. Consider scenario of a Grid. In Grid you need to automate test to find an Employee ‘e2’. Say e2 is second employee in database and is listed in the second rows of Grid. You can put verification step as below,

clip_image001[6]

Now above test will fail if order of elements in Grid is changed. So in this kind of scenario you cannot rely on either id or XPath of element.

There could be many ways you can fix and automate test to find whether employee e2 exists in db or not. Test Studio allows you to write your custom logic using Coded Step. So we can write a coded step as below.

clip_image002[6]

In above coded step, we are finding reference of Grid then searching Employee ‘e2’ in whole grid and then asserting if count is equal to 1 to verify existence of Employee e2.

So in this scenario we are not finding element on any of the attribute and writing our own logic in script to find element.

Conclusion

We learnt in this post that there are various ways to deal with dynamic id. Again there is not a single bullet proof method to deal with dynamic id. It depends on the scenario that how dynamic id cane be handled while automating test.

Learn more about Test Studio here

Download 30 days Free Trial Here

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

Overview:

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

About Telerik’s ASP.NET AJAX Controls:

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

ASP.NET AJAX Controls Help Documentation:

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

image

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

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

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

Navigating Help Documentation:

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

image

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

Getting Started with a Control:

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

image

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

image

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

Looking at the Demos:

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

image

Telerik TV:

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

Conclusion:

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

Resources for webinar “Adaptive Rendering Mobile Web Apps using ASP.NET MVC”

On Nov 28 2013 we conducted a webinar on the topic “Adaptive Rendering Mobile Web Apps using ASP.NET MVC”. In this blog post we will provide the resources from the webinar.

ASP.NET MVC has a fantastic feature which allows you to design web pages for traditional web browser or for a mobile browser. In order to support Mobile browsers, all you need to do is to create a page with “.mobile” in the file name i.e. if I have index.cshtml view just create a index.mobile.cshtml and ASP.NET MVC pipeline will serve this page when some body requests index view from a mobile browser.

image

Kendo UI Mobile is a flagship product from Telerik which is a HTML5 based cross platform adaptive rendering mobile controls. Kendo UI Mobile controls when uses will adapt to the platform they are running on and will give you the look and feel of that platform. So you write your application only once and deploy to platforms like Android, iOS, Windows Phone and Blackberry without any code changes.

Slide Deck:

One of the things I tried with this webinar was – Only Action No Theory. Well what I meant was I didn’t have a slide deck for this webinar. It was completely demo oriented.

Video Recording:

If you had missed attending the the live event or you want to go over it once again don’t worry we record every one of our webinars. So here is the video recording of the  webinar:

Q&A:

As with every webinar, this webinar too had many questions from the attendees. We tried our best to address most of them during the webinar. With the lack of time, we might not have been able to answer every question. So we list them here with the answers.

Q: Is adaptive rendering same as responsive design?
A: No. Responsive design is where you design a web page which reacts to different dimensions of the browser. For e.g. If you create a web page using Twitter’s bootstrap style sheets they have rules which make your page realign to different dimension. Where as adaptive rendering is about rendering controls which look native on the platform they run. For e.g. if you use a button, when the page is seen from a iOS browser, button should look the blue shade button or when it is seen from a Android browser, it should look like a black shade android button etc.

Q: How does kendo recognize the mobile or device in which app is running?
A: Each browser will let you know information about the platform through user agent strings. So we rely on that.

Q: Can we override the native look and feel. Like if we have requirement to show app similar to android in IOS
A: Yes you can. We have a special skin or theme called Flat. If you use this flat theme the UI will be same across platforms. You can customize the Flat theme CSS to have your own color combination.

Q: Can we use Kendo UI without using Asp .net MVC?
A: Yes you can. Kendo UI is a HTML5 powered Client Side UI framework. You can use Kendo UI Web Controls in a plain HTML page also. Kendo UI Mobile controls are used for developing Mobile Applications.

Q: Why there is a need to add Jquery mobile script file separately and why can’t we make it as part of kendo scripts ?
A: Kendo UI depends only on Jquery and nothing else. So its necessary to first add Jquery before referencing Kendo UI scripts.

Q: Is it possible to create iOS/Android apps like messaging, file sharing using KENDO UI?
A: Yes you can.

Q: when you Customize/override the layout by making skin ‘Flat’ , the tabs were in the bottom in Android UI too, so it means Kendo UI will not work if we override or customize it?
A: When we use Flat skin, the UI looks consistent across platforms which includes the tab strip too. The tab strip will be at bottom. But if you want the tab strip to be on top for android or other platforms you can easily customize the flat theme CSS for a particular platform.

Q: I can build Mobile Web using such adaptive layout with Jquery mobile + ASP.net MVC , what are the key features for Kendo Web UI?
A: Kendo UI Mobile controls are adaptive in nature. i.e. you write once and deploy on different platforms, the controls will look like native UI. For more information visit: http://www.kendoui.com/mobile.aspx

Q: Does Kendo UI supports HTML5 features?
A: Yes.

Q: how to convert mobile web app to hybrid app?
A: You can just take the HTML/JS/CSS files, package it and deploy it to respective marketplace.

Q: What all kind of app we can develop using Kendo UI?
A: kendo UI comes with 3 flavors. Kendo UI Web – used to develop HTML5 based web apps/sites, Kendo UI DataViz – used to develop data visualizations for web and mobile and Kendo UI Mobile – used for developing Hybrid Mobile Apps. For more information visit – www.KendoUI.com

T-Shirt Giveaway:

With every webinar we select 2 random attendees to receive a give away from our side. The give away is a .NET Ninja t-shirt from Telerik. So here are the 2 winners from this webinar:

  • Sivakumar SS
  • Mahesh Darga

For those of you who are feeling sad about not winning the t-shirt, don’t worry. We have a lot of webinars planned ahead. So keep looking out for our next webinar.