Learn about Telerik Testing Solution at STC 2013

Learn more about Test Studio here

We are happy to inform that Telerik team will be present at STC 2013 on 4-5th December in Bangalore. Do join us to learn more about Test Studio, along with other products at the event.

We invite you to join us at Telerik booth and explore Test Studio with us.

image

We are giving away one Nexus 7 Tablet as well at the booth. So if you come, interact and explore Test Studio with us then you have a chance to win Nexus 7 Tablet.

clip_image002

Our Evangelist Dhananjay Kumar will present on “A Look on Automated Web Testing”. In this session he will use Test Studio as tool to demonstrate the concepts. He will touch on following topics,

  • Getting started with Test Automation
  • Data Driven Testing
  • Ajax Testing
  • Grouping of Tests and Scheduling

We are excited to see you at event. If you have any further queries feel free to write us at Dhananjay.kumar@telerik.com

Advertisements

Assigning Telerik licenses to individual developers

asset-management-software-294x300If you have purchased license(s) of Telerik tools, it is highly desirable that you assign the licenses to the developers who are going to be using it. Apart from the licensing requirements, it provides two important benefits for your developers:

  1. Gives them ability to download the latest updates for the software they are using on their own
  2. Allows them to raise support tickets to Telerik on their own. This is managed support from the Telerik team. This support is different from posting your query on Telerik forums, stackoverflow or on social media. It is fully managed by our dedicated support team.

In this post, we will detail the steps that you need to take to assign the licenses to your developers. One purchase of a license, you would have provided 2 pieces of information:

1. Billing Information

2. Shipping Information

To us the billing information is license holder. He/she is one responsible for making the payment to Telerik. The invoice generated for the payment due is sent to the billing contact alias. The email alias provided in the shipping information is the address where the license activation mail is sent. If you want both billing and shipping information can be made the same.

Most people get it till here. The piece that is shrouded in ignorance starts from here. Let’s say you bought 30 licenses of DevCraft Complete to be used by 30 developers in your team. However, only 1 shipping alias would have been specified. This means that all licenses at the time of activation are provided to the shipping contact. It is the responsibility of the shipping contact and a licensing requirement that the shipping contact assign the licenses to the named developers actually using the product. To do the same, the following steps needs to be done:

1. The shipping contact person needs to login to his account on Telerik.com:

clip_image002

2. Browse to his Account Overview (using the email alias and password):

clip_image004

3. Single Click on “Products & Subscriptions” Menu and choose the “Manage Licensed users” option:

clip_image006

(If you can’t see the “Manage Licensed Users” option, you are not authorized to assign licenses to other developers)

4. Select the product for which you want to assign the licenses:

image

In this view, you are able to see the users to whom the licenses have been assigned and their permissions.

5. Click on “Assign user to license”. Please enter the details of the developer you want to add (making sure that email has been spelled correctly):

image

Please pay close attention to the “User Permissions” section. You don’t want to provide the “can manage licensed users” permission to any developer. With this permission they will acquire the right to further assign the license to another person making software asset management more difficult. Please do select the “send email notification to user” checkbox so that the developer is notified of the license assignment.

6. On clicking “Assign” button, an email is sent to the developer added with his account activation instructions. After this the developer is able to login to Telerik.com to raise support tickets and download the product updates etc.

There may be times, when you want to revoke a license from a user and reassign it someone else. The screens used are the same as above. But now, you first delete the user that is currently assigned to and then add the new user. The user that is removed will need to uninstall the specific Telerik tool from their machine to avoid mis-licensing.

image

If you need any further help on managing your licenses more efficiently, you can always reach us on our contact nos. located across the world. The one in India is located in the New Delhi area (specifically in Gurgaon).

Now that you know how to support your developers better with their queries, here is how to raise that support ticket on Telerik.

Creating RSS Reader App using Telerik Icenium in Three simple steps

Learn more about Icenium here

In this post we will learn to create RSS reader App in Telerik Icenium. While creating this app we will have learning on creating following topics,

  • Kendo DataSource
  • Kendo Template
  • Kendo ListView

In this post we will create RSS Reader of https://telerikhelper.net/. Final output should be as follows,

clip_image001

Step 1: Create DataSource

To start with we will use YML to read RSS feed. Let us configure URL of Yahoo Query and RSS feed of desired site. Below I have configured that for https://telerikhelper.net/.


var url = "https://telerikhelper.net/feed/";
var proxyUrl = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'" + encodeURIComponent(url) +"'";

Next we need to create Kendo DataSource. That can be created using proxyUrl. RSS feed returns XML and we need to configure that while creating DataSource.


var telerikHelperRSSDS = new kendo.data.DataSource({
 transport:{
 read:{
 url: proxyUrl,
 dataType: "xml"
 }
 },
 schema:{
 type:"xml",
 data:"query/results/rss/channel/item",
 model:{
 id:"guid",
 fields:{
 title: "title/text()",
 pubDate: "pubDate/text()",
 story: "description/text()",
 url: "link/text()",
 id: "guid/text()"
 }
 }
 }
});

 

There are couple of points worth discussing about above code snippet,

  • We are creating schema reading title , published date , story and url of the post
  • Id of model is set to guid
  • Setting up data type as xml
  • data is set as query/results/rss/channel/item

 

Step 2: Create Template

Once DataSource is created next we need to create Template. Kendo Template decide how data will be displayed. We are displaying title and publication date of post.

You can see that

</span>

<script id="telerikhelperrsstemplate" type="text/x-kendo-template">

 <p class="titlecs">#=title#</p>
 <p class="datecs">#=pubDate#</p>

 </script>

Step 3: Creating ListView

In last step we need to create ListView. ListView is the Kendo UI Widget in which we will display RSS feeds.

ListView can be created as follows,

 <div data-role="view" id="telerikhelperrssview" data-title="TelerikHelper">
 <ul id="telerikhelperview"
 data-source="telerikHelperRSSDS"
 data-endlessscroll="true"
 data-template="telerikhelperrsstemplate"
 data-role="listview"
 data-style="inset">
 </ul>
 </div>

In ListView we are setting

  • Data source
  • Data template
  • Data style

That’s it. We need to perfrom only these three steps to create RSS Reader App using Telerik Icenium

clip_image001[6]

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

How to send Email using Telerik Everlive from Cross-Platform Mobile Application

Have you ever come across scenario in which you need to send an Email from your app? There are various ways you can do that. Some of them are as follows,

  1. Sending Email using PhoneGap API
  2. Sending Email using HTML5
  3. Delegate Send Email task to a server

In this post we will learn to send Email using Telerik Everlive. Everlive is a cloud based Backend as a Service. It provides you many functionalities using Email Services. You can send Email from your app using Telerik Everlive.

image

There are two components in Everlive Email Service.

  1. Email Template
  2. Send Email

Before sending Email, you need to create Email Template. You can create Email Template in two ways,

  1. Using code in your app
  2. At portal

You need id of Email Template to send Email. Okay so in this post we are going to create Email Template in portal. To create Email Template login to portal and you will get option to create Email Template.

image

As you see there are four default Email Templates already available in Telerik Everlive. To create new template click on Add an item and at right hand side you get option to create new Email Template. After successful creation of new Email Template you can view that in Template List. You need ID of the Email Template at code to send Email from App.

image

Make sure that you have copied API key and Account Key of application. You need this to send Email using code. You can get keys by clicking on API KEYS in left options.

Okay so we have done configuration at portal. We created Email Template. Next we need to send Email from app. We can send Email using REST API.

Very first you need to create recipients. You can create this as JavaScript object. In below code I am setting two Email addresses to send in TO.


var recipients = {
 "Recipients": [
 “Dhananjay.kumar@telerik.com”,
 “debugmode@outlook.com”
 ],
 "Context":{
 "SpecialOffer":"Happy New Year”
 }
 };

Once you have created recipients you need to make a AJAX post to send an Email using Telerik Email. You can send an Email using code below.


$.ajax({
 type: "POST",
 url: 'http://api.everlive.com/v1/Metadata/Applications/PUTYOURAPIKEY/EmailTemplates/PUTYOUREMAILTEMPLATEID/send',
 contentType: "application/json",
 headers: { "Authorization" : "Accountkey PUTYOURACCOUNTKEY" },
 data: JSON.stringify(recipients),
 success: function(data){
 alert("Email successfully sent.");
 },
 error: function(error){
 alert(JSON.stringify(error));
 }
});

Above code is very simple,

  • In URL you need to set API key and ID of Template
  • In headers put account key of application
  • In data set recipients
  • On success you can set a JavaScript function as callback
  • On error you can set a JavaScript function as callback

That’s it. You need to do only this much of work to send an Email using Telerik Everlive from Cross-platform application. I hope you find this post useful. Thanks for reading.

Resources for webinar “Patterns in JavaScript”

On November 7th we conducted a webinar “Patterns in JavaScript”. This is yet another webinar in the ongoing series we here at Telerik India have been doing. You want to know more about these webinar, take a look at the schedule here:

https://telerikhelper.net/2013/10/04/technology-to-keep-you-company-in-the-holiday-season/

Slide Deck

As usual the webinar was demo oriented and we learn to code various patterns of JavaScript. Even though webinar was demo oriented we covered almost everything in slide deck. This slides could be useful to you.

Video Recording

We record all our webinars so that those of you who couldn’t attend the live event or you had some audio issues can come back and view the webinar at your leisure time. Below is the recorded version of this webinar:

Resources

You can find different blog posts on same topic below,

Revealing Module Pattern in JavaScript

Understanding Prototype Pattern in JavaScript: Part # 2

Understanding Prototype Pattern in JavaScript

Invocation patterns in JavaScript

How to setup JavaScript Build in Sublime Text 2

I hope you find this webinar useful. See you in next webinar.

Fresh off the shelf – “Game-changing Features in Visual Studio 2013 for ASP.NET Developers” Free Whitepaper

I started my web programming in 2001 and I have pretty much seen all the versions of Visual Studio over the past 12 years. Microsoft released yet another version of the IDE this October – Visual Studio 2013.

Visualstudio_logo

As with any other release, Visual Studio 2013 brings in a lot of framework and language enhancements for different project types and development environments. But I am more excited with this release than any other for a single reason: there are lots of enhancements for ASP.NET as a platform. Web as a platform is moving very fast and Visual Studio as an IDE needs to catch up. I feel Visual Studio 2013 is now packed with all the things a web developer needs to build a modern web application conforming to all modern standards.

game-changing-features.png

In this Telerik whitepaper, we identify and explore the top 10 features in Visual Studio 2013 we think are valuable for ASP.NET developers. Some of the items we tackle are as follows:

  • One ASP.NET
    No more confusion in creating web applications, there will be only one choice now.
  • Scaffolding for WebForms, MVC, WebAPI, SignalR
    We call it Scaffolding on steroids as we can scaffold pretty much anything in ASP.NET.
  • BrowserLink
    You can now say good bye to design view. BrowserLink makes it possible to do live update to your pages.
  • Bootstrap Templates
    Bootstrap template is the default template for all new ASP.NET projects in VS2013 now.
  • CodeLens
    You now have the spy lens at your disposal called CodeLens. This lets you know how many places a function/class is referenced right above your function/class definitions.
  • And others!

I am super excited about Visual Studio 2013 for all the ASP.NET features & enhancements. My favorite being the One ASP.NET feature. If you are also excited as I am then go ahead, download this whitepaper and get to know the new things in Visual Studio 2013.

Download Today

You can grab a copy of the whitepaper here. We hope you too enjoy the 10 features of Visual Studio 2013 that we mention. As always, we would love to hear your feedback. Is there a feature you like and we haven’t covered it, feel free to write a comment below.

Resources for webinar “What’s New in Visual Studio 2013”

On Oct 31 we conducted a webinar “What’s New in Visual Studio 2013”. This is yet another webinar in the on going series we here at Telerik India have been doing. You want to know more about these webinar, take a look at the schedule here:  https://telerikhelper.net/2013/10/04/technology-to-keep-you-company-in-the-holiday-season/

File:Visualstudio logo.png

Microsoft has released yet another version of Visual Studio and is called as Visual Studio 2013. Through this webinar we took a lap around some of the newest feature that every developer should be aware of. A lot of enhancements have been made in the language as well as the IDE itself. You can know more about Visual Studio 2013 here: http://www.microsoft.com/visualstudio/eng#visual-studio-2013

Slide Deck:

As usual the webinar was demo oriented as I spent most of the time show casing the new features of the new IDE. The slide deck contains just the pointers to my talk. So I suggest you watch the recorded video of the webinar along with the slide deck.

Video Recording:

We record all our webinars so that those of you who couldn’t attend the live event or you had some audio issues can come back and view the webinar at your leisure time. Below is the recorded version of this webinar:

Whats New in Visual Studio 2013

Webinar Giveaway:

If you have attended our webinars you will know that we usually pick 2 attendees from the participants list and they will receive our .NET Ninja T-Shirt shipped. For this webinar we have picked the following 2 attendees who receive the t-shirt:

  • Ravi Tyagi
  • Robin Banga

Congratulations to the winners. We will contact you for your address and will ship the t-shirt. Rest of you don’t feel bad. You can be the next winner and for that you will need to attend out next webinar.

Till next time – Happy Coding.

Codeless File Uploading to Windows Azure Storage using Telerik’s Cloud Upload for ASP.NET AJAX

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

Overview:

Ever wondered if there was a way a file upload could be done in your application without writing a single line of code. As a web programmer for 12 years, I have always wondered this myself. I would like to let a control know where it needs to upload and it should do the rest for me. I am happy to say that today that thought of mine is possible with Telerik’s Cloud Upload for ASP.NET AJAX. In this blog post we will see how you can upload files to your Windows Azure Storage BLOBs without writing a single line of code.

About Cloud Upload for ASP.NET AJAX:

RadCloudUpload is an ASP.NET AJAX control that provides you and your application the ability to upload files directly to your cloud providers. With the 2013 Q3 release, we support – Amazon S3, Azure Blob Storage and Everlive (Telerik’s Backend as a Service). On modern browsers, the control makes use of the File API and falls back to an IFrame upload module on older browsers. Some of the key features of the control are:

  • Multiple File Selection
  • Validation
  • Progress Monitoring
  • Large file uploading
  • Localization
  • Customization etc.

In rest of the sections, we will see how to use RadCloudUpload with a Windows Azure Storage account.

Setting up Windows Storage Account:

In this section, we will see how to set up a storage account on Windows Azure. I am assuming that you have a Windows Azure account, if not you can register for a trial account and follow along.

First thing to do is to log in to your azure management portal at http://manage.windowsazure.com. After logging in, click on the “New” button available at bottom left hand corner of the page.

image

You will be presented with a new item dialog. Select Data Service > Storage > Quick Create. Enter a name for your storage account and select which location you want the account to be created. You can optionally enable the Geo Replication feature. Once you have completed the form, click on Create Storage Account.

image

Azure will go ahead and provision your account.

Once your storage account is created, navigate to the storage account and access the Containers tab. We will create a container to hold our files. I will name my container pictures for this demo. The idea is to upload and save pictures as blobs in my storage container.

image

image

Write down the container name you have assigned, as we will need this to set up the RadCloudControl in our application.

Identifying Azure Storage Account Name and Key:

For the RadCloudUpload control to work – it needs three things. Namely:

  • Storage Account Name
  • Storage Account Key
  • Storage Container Name

Now let us see how to get to the account name and key.

In your azure management portal, navigate to your storage account that we created in the previous section. Bottom of the page you should see a link which says “Manage Access Keys” – click on that link.

image

You will be presented with the Manage Access keys dialog. From this dialog write down the Storage Account Name and Primary Access Key. Secondary Access key is also provided if you want to share the account to your 3rd party associates.

image

Next, we see the RadCloudUpload in action.

Create a Web Application:

I am using Visual Studio 2013 as our RadControls are VS2013 compliant. However, you can also do this with 2012. Fire up a VS and select File > New Project. In web templates select “RadControls Web Application”, give it a name & location and click Ok. Visual Studio will spin up the new project with a default.aspx already added to the project. We will use this page for the demo.

Adding Azure Storage Client Library:

In order for the RadCloudUpload to work with Azure Storage, it needs Azure Storage Client Libraries. You can get those from NuGet. Right click on References node in Solution explorer and select Manage NuGet Packges. In the NuGet Package Manager, search for “WindowsAzure.Storage” and add the package to the application. The package will install 2 dlls – Microsoft.WindowsAzure.StorgaeClient.dll and Microsoft.WindowsAzure.Configuration.dll. For this demo we don’t need the Configuration assembly. Therefore, we can remove its reference.

image

Using the Cloud Upload control:

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

image

<telerik:RadCloudUpload ID="RadCloudUpload1" runat="server"
ProviderType="Azure"
Skin="Metro" />

In Configuration Wizard dialog enter Azure Storage Account Key, Storage Account Name and the Storage Blob Container Name. In this demo the Account Name is clouduploaddemo and container name is pictures.

image

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

When Ensure Container is checked, the control will create a new Container if it does not exist. In the scenario where it is not checked and the Container does not exists – an exception will be thrown.

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

<telerik.web.ui>
<radCloudUpload>
<storageProviders>
<add name="Azure" type="Telerik.Web.UI.AzureProvider" accountKey="<YOUR ACCOUNT KEY>" accountName="clouduploaddemo" blobContainer="pictures" ensureContainer="true" uncommitedFilesExpirationPeriod="1" defaultEndpointsProtocol="" />
</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:

image

Here is the snapshot of file upload being finished:

image

Here is the blob container meta data properties of the file we uploaded:

image

Conclusion:

As you have seen in the post, I did not write even a single line of code. Apart from dragging and dropping the control on to the page, the rest of the things were just settings. Codeless file uploading is a reality with Telerik’s Cloud Upload for ASP.NET AJAX. Check out more demos of Cloud Upload at http://demos.telerik.com/aspnet-ajax/cloud-upload/examples/overview/defaultcs.aspx

How to fetch Data from Telerik Everlive using REST API in a Web Application.

Learn more about Kendo UI here

Learn more about Icenium here

In this post we will take a look on fetching data from Telerik Everlive using REST API and use it in a web application. In web app we will be using Kendo UI DataSource to bind data to Kendo UI web ListView.

We are going to learn following,

  • Fetch data from Telerik Everlive using REST API
  • Create Kendo DataSource from returned data
  • Bind data to Kendo UI ListView

Okay so to keep it simple, I have created a simple Content Type Products in Everlive project as below. Permission of this Products content type is set as Public.

clip_image001

To fetch data from Telerik Everlive using REST API, Simply you can fetch data from Icenium Everlive using a AJAX call. You need to provide

  1. URL of the Everlive project with API key
  2. Content type name should be appended in URL. In this case we have appended Products (name of content type) in URL.
  3. Set type as GET
  4. You need to set two callback function. One Callback function will be called on success and another on error.

So data can be fetched using below code. You may want to notice that you need to replace yourapikey in URL with API key for your Everlive project.


$.ajax({
 url: 'http://api.everlive.com/v1/yourapikey/Products',
 type: "GET",
 headers: {
 "Authorization": "Bearer ${AccessToken}"
 },
 success: function (data) {
 BindDataToListView(data);
 },
 error: function (error) {
 alert(JSON.stringify(error));
 }
})

BindDataToListView is callback function and this function will be called on success fetching of data. In this function you need to create Kendo UI DataSource from returned data. Before we do that let us examine what value we get from Everlive server.

clip_image001[6]

You should get below output in browser console,

clip_image002

You can see that in output you are getting count and data in Result property of the returned Object. So you can create Kendo DataSource as follows,

function BindDataToListView(e)
{
 console.log(e);
 var dsource = new kendo.data.DataSource(
 {
 data: e.Result
 });

}

Again in Console log you can view that Kendo DataSource has been created from returned data.

clip_image001[8]

Next we need to create Kendo Template and Kendo ListView. We are going to create a very simple template as follows,


<script type="text/x-kendo-template" id="producttemplate">
 <div>
 <h2>#:ProductName# <br/>
 <h3>#=UnitInStock# #:UnitPrice#</h3>
 </div>
</script>

And to create Kendo ListView create a HTML div as follows,


<div id="listView"></div>

Again let us go back to callback function BindDataToListView() and convert div to Kendo ListView and bind already datasource

function BindDataToListView(e)
{
 console.log(e);
 var dsource = new kendo.data.DataSource(
 {
 data: e.Result
 });
 console.log(dsource);

$("#listView").kendoListView({
 dataSource: dsource,
 template: kendo.template($("#producttemplate").html())
 });

}

This is it. We are setting datasource and template after converting HTML div as Kendo ListView. When you run this web application you should get output as below,

clip_image002

In this way you can fetch data from Telerik Everlive using REST API and use in Kendo UI Web. I hope you find this post useful. Thanks for reading.