Introduction:

Telerik provides a ultimate toolbox for developers which includes Web UI Controls, Desktop UI Controls, Mobile UI Controls, VisualStudio Productivity Tools HTML5/JavaScript widgets, Data tools, Functional testing and Unit Testing. In this blog I am explaining about one of the WEB UI Control Toolkit i.e ASP.NET AJAX.

ASP.NET AJAX development toolset supports ASP.NET 3.5 and later versions. It includes more than 70 highly optimized controls for rapid component-based UI development. Web applications using RadControls enhance user experience without losing performance. Developers can control the appearence the RadControls more quickly.

RadControls integrate into Visual Studio Toolbox. Controls can be used by drag-and-drop. Design time wizard helps to configure the features. RadControls comes with 20 professionally designed skins including a skin for mobile browsers. You can build your own themes without being a CSS wizard with the help of Visual Style Builder. RadControls provides touch support for Mobile devices which is built-in. Cross browser support is provided. They work flawlessly across all major browsers. To use RadControls the pre-requisite is to install the ASP.NET AJAX.

Steps to add RadControls to Visual Studio 2010 toolbox:

follow the below steps to deploy the RadControls on WebForms in design mode,

1. Open Visual Studio 2010.

2. Expand the Toolbox.

3. In General Section, right click and select Add Tab option from the context menu and enter the name.

4. Right-click on the newly created tab and click on Choose Items.

5. On the newly created tab, click Browse.

6. Browse to the Telerik RadControls installation folder, open the bin40 folder and select the Telerik.Web.UI.dll.

Steps to add RadControls to the page:

1. Set up an ASP.NET website.

2. We can write the control tag manually (If you write the control tag manually fallow the below steps)

• Copy Telerik.Web.UI.dll to bin folder of the website.
• In aspx file add the Register directive at the top

<%@ Register TagPrefix=”telerik” Namespace=”Telerik.Web.UI” Assembly=”Telerik.Web.UI” %>

•    In the web.cofig file add the following lines

3. OR Drag the control from Toolbox and drop it on the page in design mode

Example:

1. Create new website and name it as ‘Website1’

2. In the design mode of Default.aspx page drag and drop the ‘RadGrid’ contolcfrom toolbox.

3. Use smart tag to add RadStylesheetManager, RadScriptManager and RadAjaxManager.

• RadScriptManager runs a faster than ScriptManager
• RadAjaxManager is more flexible than the UpdatePanel.
• RadStyleSheetManager speeds up downloading stylesheets.
• RadScriptBlock and RadCodeBlock controls solve some problems when inserting server-side control references into client-side code.

4. After Adding you can see ‘RadStylesheetManager’ and ‘RadScriptManager’ on the aspx page.

5. Using smart tag, choose the data source and check all the general features checkboxes and also check Auto-generate columns a run time, Auto-generate edit column at run time and Auto-generate delete column at run time.

6. Build solution and start debugging.

Advantages of using RadConrols

• UI can be developed rapidly.
• Minimizes the java script and loads only what is required.
• Memory usage is minimized.
• Data transferred between browser and server is less.
• Reduces the post backs so the application becomes fast.
• Developer friendly: Integrated into Visual Studio Toolbox for quick drag & drop usage.
• Configure the features using Design-time Wizards.
• HTML and CSS is minimal.
• Increase productivity.
• Helps to build sharepoint solutions more quickly.

References

• http://www.telerik.com/help/aspnet-ajax
• http://demos.telerik.com/aspnet-ajax