Crafting Survey with KendoUI and BootStrap in Rollbase

In the first part of Blog post, we covered drag and drop Portal survey creation in Rollbase. In this post, we will cover custom Survey Page using BootStrap and KendUI  which is supported by RollBase Platform. We’ll cover two scenarios of building the same Survey : using BootStrap and KendoUI

  • Let’s navigate to our application and choose the portal option to enable Bootstrap and Kendo.
  • Choose Survey Demo App and Navigate to Objects and Portals.

Continue reading

Telerik Report Designer

How To: Use SQLite with Telerik Reporting Standalone Report Designer

Couple of years ago, I created a video where I showcased how to use Telerik Reporting with WPF (Windows Presentation Foundation). WPF is a windows application development framework on Microsoft .NET stack. Telerik Reporting is a reporting solution which can be embedded in your ASP.NET/WinForms/WPF applications. You design reports, host it in your app and render within your apps. One of the question I got recently on that video was – “How to use Telerik Reporting with SQLite ?“. That’s an interesting question and probably one of the common scenarios you may face. In this post I will take a step by step approach on how to work with SQLite using Telerik Reporting Standalone Report Designer. Lets get started. Continue reading

RadHtmlChart

How To: Create HTML5 Chart through code in your ASP.NET AJAX Applications

Almost 4 years ago just when i started working for Telerik or now Progress Software, i had written a blog post titled “Step by Step Guide to work with RadHtmlChart for ASP.NET AJAX”. The idea behind that blog post was to give you a step by step instruction on how to use the HTML5 Chart controls in our UI for ASP.NET AJAX suite. Couple of days ago i had a comment on that blog post where the user asked me “How to create the same chart from code behind i.e.entirely through code”. A common scenario if you ask me. So i thought of doing a step by step instruction  on how to create HTML5 chart entirely through code and this blog post will outline that. Continue reading

RadMap rendering OpenSTreetMap map

How To: Use RadMap in your ASP.NET AJAX Web Applications

In this blog post i will take a lap around on of the interesting controls we have in our Portfolio. UI for ASP.NET AJAX is one of the popular control suites in our portfolio. As part of the suite we have “RadMap” – an Server Control which renders HTML5 based map on your web page. Rest of this blog post will focus on how to getting started with RadMap. If you want to quickly jump to the demos we have and take a sneak peek – well head over here. Continue reading

Kendo UI Grid

Video: How to add custom Date filter column in Kendo UI Grid using ASP.NET MVC Wrapper

Recently i wrote a blog post showcasing how to add a custom Date filter column in Kendo UI Grid using our Telerik  UI for ASP.NET MVC wrappers. You can find the blog here. In this blog post i will be providing a screen case i have recorded where i give you step by step instruction on how to create a custom Date filter column. If you have read the blog post – now you get to see it in action. Continue reading

Kendo UI Grid

How To: Custom Date Filter Column in Kendo UI Grid using ASP.NET MVC Wrapper

In one of my previous blog post, i had written about how to have a custom date filter column in Kendo UI grid but the JavaScript way. You can read about it here. Video version of that blog post is available here. In this blog post i will showcase how to achieve the same scenario but using ASP.NET MVC Wrapper. Continue reading

Kendo UI Grid

Video: How to Scaffold Kendo UI Grid in ASP.NET MVC Applications

Kendo UI is one of our popular controls set when it comes to HTML5 based app development. Kendo UI is client side UI framework and you work with Kendo UI using JavaScript. But if you are coming from ASP.NET MVC background you may be familiar with the concepts of HTML helper. Helpers are nothing but a shorthand to otherwise writing lengthy HTML code. With our UI for ASP.NET MVC product we provide what we call as “Kendo UI Wrappers for ASP.NET MVC” a.k.a Kendo UI helpers in ASP.NET MVC.

Grid control or widget as we call it – is one of the most widely used widget in Kendo UI. When you install our UI for ASP.NET MVC we also install Kendo UI Scaffolder. Scaffolding is a handy productivity feature in Visual Studio where the Scaffolder generates all the boiler plate code necessary. Our Kendo UI Scaffolder can scaffold Grid code for you – without you writing a single line of code.

In the below video i have tried to capture the steps required to perform a Kendo UI Grid Scaffolding in your ASP.NET MVC applications. The video is like a Step by Step instruction for you to follow:

Hope this video gives you a jump start if you are planning to use Kendo UI Grid in your ASP.NET MVC applications.

Till next time – Happy Coding !

Video: Building Enterprise Dashboards in Minutes using ASP.NET MVC

In my previous blogs post here, i talked about our Telerik UI for ASP.NET MVC and Dashboard Project Template that we provide for Visual Studio. In this blog post i have a screen cast created which shows how to use the Dashboard Project Template. In the screen cast i go over the process of using the Dashboard Project Template in a step by step manner. Continue reading

UI for ASP.NET MVC

Get Up & Running with Telerik UI for ASP.NET MVC Project Templates

As a team working on a project one of the key aspects of development is productivity. You want to get up & running with your project as fast as you can. You don’t want to spend time on some mundane things, rather you want to leapfrog your development. That’s almost every project teams #1 priority and wish. Today, in this blog post i will be talking about how our product known as “UI for ASP.NET MVC” can help you jump start your ASP.NET MVC (3 to 5) projects. Let’s get things rolling now. Continue reading

Telerik Reporting

Video: Telerik Reporting with Visual Studio 2013 in WPF Applications

Recently, i was talking to a customer who was evaluating Telerik Reporting. They were on Visual Studio 2013 and wanted to use Telerik Reports in WPF application. But they were having difficulty getting started with our Reporting. In order to make things easier, i have recorded a getting started video for Telerik Reporting using Visual Studio 2013 and consuming the report in WPF application.

Here is the video:

Hope this helps anybody who is working on our Reporting software & WPF platform.

Till next time, Happy Coding.

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

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