Kendo UI Button Wrapper for ASP.NET MVC

Posted by Lohith

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.

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:

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

Posted by Lohith

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.

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

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

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:

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.

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

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

In Configuration Wizard dialog enter Everlive API Key.

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:

And here is the snapshot of file upload being finished:

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:

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

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

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,

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,

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

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

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

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

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

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.

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

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

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

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

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.

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.

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

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

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.

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

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,

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

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

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

On 12^th 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

Telerik TestStudio: Subscription based Automation Testing Tool

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

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

Learn more about Purchasing Options

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

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

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.

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.

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

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

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-5^th 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

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.

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.

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

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

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

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.

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

Handling with changing setting at Test Project level
Handling with changing setting at Element level
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.

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

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

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.

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.

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.

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

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.

After navigating to application you will find Elements current FindLogic.

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

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

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.

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,

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.

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

Posted by Lohith

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:

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:

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.

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.

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.

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”

Posted by Lohith

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.

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.

Helping Ninja Technologists

Developer Experiences powered by GTM Catalyst

Month: December 2013

Kendo UI Button Wrapper for ASP.NET MVC

How to Automate Test for Image verification using Test Studio

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

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

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

Recap of webinar Journey from Manual to Automated Tester

Telerik TestStudio: Subscription based Automation Testing Tool

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

Telerik Test Studio participated at STC 2013

Handle Dynamic Id with ease in Test Studio

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

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