Using Telerik RadProgressArea

Hi there, So I would like to show you guys quite a simple way of making a progress bar using Telerik's UI for ASP.NET AJAX, I've been using their tools for a while now and find them easy to implement.

 So this blog post will focus on using the RadProgressArea. Just take note I'm using an older version of what is currently available.To be specific I'm on 2011.2.915.40. Also I'll be implementing this using a .NET web application.

 Step1
After we've created the new web application your page should look like this

 Step2
We'll add the necessary Telerik .dll's.

 Step3
Add the following line to your .aspx page.
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

 Step4
We add the telerik control in the .aspx page. Any control has the telerik: prefix attached in the front.

 Step4.5
When trying to run your application like this you'll maybe get the following error
This means we need to configure the web.config file. See the needed amendments underneath:

     <httpHandlers>
      <add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false"/>
      <add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false"/>
      <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false"/>
    </httpHandlers>

   <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <validation validateIntegratedModeConfiguration="false"/>
    <handlers>
      <add name="Telerik_Web_UI_DialogHandler_aspx" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler"/>
      <add name="Telerik_Web_UI_SpellCheckHandler_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler"/>
      <add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource"/>
    </handlers>
  </system.webServer>

 Step5
On the following screenshot we've added the RadProgressManager and the RadProgressArea. Configure RadProgressArea to your specifications. The ProgressIndicators property you can use to specifiy how much detail you would want in your progress area. I've opted to go with the bare minimum. It's usually all you need.

 A button is also added just to trigger the RadProgressArea to run.

 Step6
In the code behind remember to add namepsace Telerik.Web.UI and Telerik.Web.Design. Underneath is the logic to have your progress area run. Most of it is self-explanatory. The Thead.Sleep(100) is only there to simulate a process running. This should be taken out if used in a live scenario.

 Step7
Lastly you can go for a test run and see if it works. The result should look something like this:
That is about it. Not too technical. Hope I kept it simple enough.

Comments

Post a Comment

Popular posts from this blog

Connecting to UniObjects via .NET using UODOTNET

Image
This tutorial assumes you've installed UniDK and have access to the  UODOTNET.dll. The dll should be available from C:\IBM\UniDK\uonet\bin. This tutorial will use Visual Studio to connect to a UniVerse database. Start by opening Visual Studio and creating a new Windows Forms Appicaltion. Next you can choose to add a button to connect and one to disconnect. I'm also adding a Label in order to tell us whether the connection is active or deactivated. Now go and view your Form1 code (F7). Next add the UODOTNET.dll into your References. Right-click References > Add Reference > Browse... > C:\IBM\UniDK\uonet\bin > Select UODOTNET.dll > Click OK. Your References should now include the UODOTNET.dll Next picture shows you the a sample of how to connect. You'll need 5 parameters to send the UniObjects class OpenSession() method. You can also specify a port if needed. Server / Hostname - The name or network address of the instance of U2 Database to whi...
Read more

Dates in UniVerse Basic

So dates we tend to use them quite often, especially in financial or accounting transactions. Having sound knowledge of how to format or display them will make life easier. I'll go through an example of how dates operate in this environment. Internally in UniVerse Basic a date is a numeric character of 5 digits long. So if I took today's date which is 13/02/2017 it would be equivalent of 17942 as an internal format. To get the internal format you'd have a function like this: INTERNAL.DTE = ICONV(13/02/2017, 'D4/DMY[2,2,4]') Variable internal date will have the value 17942 . Note that there are two parameters in the function. The first one is the date and the second the format. Let's break down that format to make it a bit more clear. D4/ - The 'D' tells us we're working with a date. The numeric '4' tells us the number of digits for the year input. Now the slash character tells us which separator we're using. DMY[2,2,4] -  ...
Read more