Click here to Skip to main content
15,867,834 members
Articles / Web Development / ASP.NET
Article

Telerik Delivers Next Generation ASP.NET UI Components

12 Mar 2008CPOL6 min read 39.7K   7   3
To build next generation websites, you need UI components that give you the power and flexibility to harness the speed of Ajax and rich experience of client-side programming. Telerik is delivering the UI component suite that meets all of these requirements with its RadControls for ASP.NET AJAX.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Rad Controls for ASP.NET AJAX Redefine Industry Standard

We live in a world of constant motion. Ideas, aided by the Internet revolution, rapidly transform from concept to reality and drive the wheels of progress forward. Stand still for too long and you’re outdated, dull, and losing to a new competitor that is riding the “2.0” wave. Nowhere is this reality clearer than in web development, where the oft hyped “Web 2.0” has become the mythical measuring stick by which all websites are deemed hot or not. If your website isn’t deemed “Web 2.0,” it’s already considered old fashioned.

Catching the “Web 2.0” wave, though, isn’t always easy. Most UI components claim they can help you find your “Web 2.0” Zen, but few actually deliver on those promises. They entice you with “Ajax-enabled controls” and components that do everything under the sun, but as you begin to examine the controls you find they force you to use “heavy” Ajax callbacks and proprietary- often inconsistent- APIs.

How can you build “Web 2.0” sites with “Web 1.0” UI components? You can’t.

To build truly next generation websites, you need UI components that give you the power and flexibility to harness the speed of Ajax and rich experience of client-side programming- all without requiring you to write any JavaScript. Telerik is delivering the UI component suite that meets all of these requirements with its next generation RadControls for ASP.NET AJAX.

Built for the Future of ASP.NET

Over a year ago, Microsoft released the “official” Ajax framework for ASP.NET with the ASP.NET AJAX Extensions for ASP.NET. The new cross-browser Ajax and client-side programming library finally provides ASP.NET developers with a Microsoft designed and supported framework that they can depend on to implement projects of all sizes.

Telerik recognized early in ASP.NET AJAX’s development that it represented the future of ASP.NET development. Not only does the new framework standardize the API for Ajax programming in .NET, it also provides a radically simplified way to write client-side code. By integrating the ASP.NET AJAX core in to UI components, Telerik realized that it could deliver client features and performance previously very difficult to achieve.

Telerik’s new RadControls for ASP.NET AJAX, formerly RadControls for ASP.NET “Prometheus”, is the culmination of over a year’s worth of work to build the most comprehensive ASP.NET UI suite directly on Microsoft’s ASP.NET AJAX. The suite delivers incredible performance gains over previous Telerik UI suites for ASP.NET and it adds many new controls to developers’ ASP.NET toolboxes.

Among the new controls and features in the RadControls for ASP.NET AJAX are:

  • RadScheduler: By combining the proven usability of Outlook® with the innovative input mechanisms of Google Calendars in a flexible and easy to configure component, RadScheduler makes it easy to add a rich scheduling UI to any ASP.NET application.
  • RadAjax for ASP.NET AJAX: Building on the simplicity of Telerik’s RadAjax for “classic” ASP.NET, RadAjax for ASP.NET AJAX gives you the tools you need to quickly and effortlessly add ASP.NET AJAX to your website. Stop wasting time with UpdatePanels and Triggers and let RadAjax do all of the ASP.NET AJAX configuration for you.
  • Rendering on the client: Many of the components in the RadControls for ASP.NET AJAX suite are now capable of rendering on the client. That means the controls can use JavaScript to render their UI in the browser, reducing trips to the server and speeding-up your application’s performance.

image002.jpg

Ajax on a Diet

Most UI components that provide out of the box Ajax support, including Telerik’s “classic” ASP.NET UI components, do not enable you to realize the maximum performance Ajax can provide. That’s because most ASP.NET Ajax frameworks, even ASP.NET AJAX by default, execute the full ASP.NET page lifecycle with every asynchronous Ajax callback. While that makes the transition from PostBack to Ajax programming easy, it also negatively impacts the efficiency of Ajax callbacks because “heavy” data fields like ViewState travel back and forth with every async request.

To truly get the most of out of Ajax, you need to execute asynchronous calls that are devoid of ViewState data and that don’t labor through the entire ASP.NET page lifecycle. The solution is Ajax calls to web services. Even though the solution is obvious, it is often avoided because it normally requires a lot of tricky JavaScript programming to initiate the web service call, parse the returned JSON data, and then update the page.

High-speed Ajax is Easy with the RadControls for ASP.NET AJAX

Telerik’s new RadControls for ASP.NET AJAX make the process of using “high-speed Ajax” as easy as setting a couple of properties. By telling controls like RadMenu and RadTreeview where your web service is located and the name of the method to call, the controls will automatically bind to your web service and begin delivering incredibly high performance Ajax operations. No JavaScript required. No ViewState sent back and forth. Just efficient, compact, optimized Ajax updates.

Performance. Performance. Performance.

All of the features in the world can’t make-up for ASP.NET UI components that perform slowly. In fact, components that deliver “all of the features in the world” are usually the worst performers. Telerik has changed that equation with the RadControls for ASP.NET AJAX by leveraging innovative new load-as-needed script resource handlers and optimizing client-side and server-side code. Telerik’s RadControls for ASP.NET AJAX deliver some of the highest performing controls for ASP.NET without sacrificing the features you need to be productive.

For example, the new RadEditor for ASP.NET AJAX loads up to 4 times faster than the previous non-ASP.NET AJAX versions. That means you can deliver the industry leading WYSIWYG browser-based editor without taking a hit in your page’s performance metrics. Meanwhile, RadGrid will soon receive a brand new data binding engine in ASP.NET AJAX that effortlessly handles sorting, filtering, and paging hundreds of thousands of records in mere milliseconds. In side-by-side performance comparisons to other leading ASP.NET grids, Telerik’s new RadGrid for ASP.NET AJAX performs at the top.

image003.jpg

Finally, new utility controls like RadScriptManager and RadStyleSheetManager maximize your page optimization by combining all RadControl script files and stylesheets in to single link references on your page.

Keep it Clean

One area where Telerik continues to lead the industry with its RadControls for ASP.NET AJAX is clean, semantic HTML rendering. This has long been a staple of Telerik’s ASP.NET controls and the dedication to light weight, standards compliant HTML rendering continues with the new controls. Many UI components for ASP.NET make excessive use of tables and inline styles when they render, producing bulky HTML that slows down your page. Telerik’s controls, on the other hand, use the least amount of HTML possible when rendered and rely on modern, cacheable CSS style sheets to provide control styling.

Don’t Compromise

If you’re tired of working with UI component suites for ASP.NET that get in your way, perform slowly, and don’t provide you with all of the tools you need for your applications, a clear solution to your problems has arrived. With the RadControls for ASP.NET AJAX, you can create high performance ASP.NET applications with rich user interfaces that pass today’s “Web 2.0” standards. From rich scheduling components to simple color pickers to innovative Ajax management components, Telerik’s RadControls for ASP.NET AJAX has everything you need to make your next project a success.

Think this is just marketing hype?
Try the controls for yourself at:

http://www.telerik.com/aspnetajax

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Other Telerik
United States United States
Todd Anglin is Chief Technical Evangelist at Telerik, President of the North Houston .NET User Group, and an active speaker in the .NET community.

Comments and Discussions

 
Questionwhy telerik? Pin
dsmportal13-Mar-08 15:22
dsmportal13-Mar-08 15:22 
GeneralGreat Controls When Used As Designed Pin
monstarmike13-Mar-08 1:11
monstarmike13-Mar-08 1:11 
Telerik controls are wonderful controls. They look great right out of the box. If you don't like their default skin telerik makes it pretty easy to change to several styles with provided skins. Their AJAX and data communicating technologies are the best of any control suite that I've ever used. There are a lot of things these controls can do right from the box that would be extremely difficult to do or require much of a developer's time to do.

After that praise let me say this about telerik controls: even though they provide wonderful solutions to being the ideal controls that should have been included in ASP.NET they have some sizable short comings. After working with these controls for two years I have had to do more customizations to the internal JavaScript so that these controls will provide our developers with a more complete solution. Recent examples of what customizations I've had to do involves even using their controls with each other.

For example, their date/time picker (date input and time view) control along with their balloon/window control make for perfectly fine controls when separate (not getting into the idiosyncrasies of the balloon control and how I've had to build a wrapper for that control). However, when you place a date/time picker in the radwindow control you are forced to realize that when the calendar or time icon is clicked the popup for either of these functions will overflow the radwindow container. In other words, the date/time picker does not respect the internal bounds of this window. Also, for every one of these date/time pickers placed on a page the amount of generated HTML and JavaScript is doubled (tripled, etc. for every one on the page). To combat these problems I used a master page solution which has a hidden date/time control and then created my own "proxy" date/time control. When my proxy object is drawn it uses the same two images and a masked input (a nice telerik control!). It then differs all date/time calls back to the hidden date/time control on the master page. Using some fancy JavaScript I am able to place the calendar or time view where I need it on any level; at the master page or in the balloon, it does not overflow the page.

This is only one example that I feel I can go into without make a novel. The RadGrid control is also a nice solution to the lack of a fully featured grid control in .NET. This control works great when a datasource is given, and properties are slightly tweaked to a developer's liking. However, again, I have noticed problems with sorting and paging, both involving large hits on the database. The RadComboBox control fits in similar to the RadGrid, it is a wonderfully featured control that makes up of the lacking of an HTML select box. When on the client, this control shows its limitations. I cannot add items to the control via JavaScript as well as I cannot tell the object to select a specific index like I can with a HTML select element.

[EDIT]
One thing else to mention is their spotty documentation. As much as I do like their controls, I hate their documentation. It is sufficient at best. Their docs mainly are marketing papers converted over to contain technical details. These details though, are not complete. Looking for a complete rundown of every method and property on that date/time picker? There are basic methods for the DateInput control, but there is no listing of the API for their wrapper called RadDateTime. This is similar across all their controls. It has gotten better over the last year or so, but still there is missing parts and gaps in others. Their forums are also hard to navigate and sometimes difficult to search for any prior issues that you may deal with. One of the best things a developer can do is to pop a debugger into every client event method that one of their controls fires and go through the locals and the arguments array. Figure out what is being passed in and in which context that method is operating in. Debugging and looking at the client object is really the only way to see what properties and methods are on a particular control.
[/EDIT]

Overall I say these controls are awesome. No other suite out there has done so much with their product than telerik. Even though I have wrapped the RadWindow, RadDateTime, and "hacked" how several other of their controls worked, I believe that they are closest to the "complete solution." I put my recommendation with this suite with the one note that you must be prepared to manhandle these controls into what you want them to do. You WILL run into CSS and JavaScript situations that will not lend themselves to how these controls were designed to be used. You can either change you design and work what we call the "telerik way" or you can try to override the JavaScript or wrap their controls with your own server control. The above quirks are being solved in their Prometheus release but they still contain issues such as Tabs being the highest thing on the page, no matter what their parent zIndex is at!
GeneralRe: Great Controls When Used As Designed Pin
Bohicette29-Apr-08 10:18
Bohicette29-Apr-08 10:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.