Telerik UI for ASP.NET

Richest Toolset for ASP.NET Developers

Let's talk ASP.NET first ..

Robust Modern Web Development Platform

• Rich ecosystem

• Developer familiarity

• Easy to build - WebForms or MVC

• Managed .NET code comfort

But a debate rages on ..

Server-side Vs Client-side

Modern browsers are powerful .. they said

Let's do everything client-side with JavaScript 

Being Realistic

Server-side is actually pretty awesome

• Intuitive state management

• Business logic is best kept server-side

• Enterprises thrive on ASP.NET applications

• C# rocks for code-behind logic 

• Server controls can render clean HTML

Let's keep rocking ASP.NET

ASP.NET WebForms:

- Rock solid

- Easy to start

- Server-side comforts

And no one is moving your cheese ..

Build the Next-Gen of amazing Web apps

Let's get you some SuperPowers

Elevate your ASP.NET Development Stack

http://www.telerik.com/products/aspnet-ajax.aspx

Why Telerik UI for ASP.NET

Rich, Fast & Complete Toolset

80 + ASP.NET Ajax Controls

Robust performance with HTML 5 

Mobile support & Responsiveness

LOB Controls + Framework

Telerik UI for ASP.NET Ajax

Where it goes Above & Beyond

Seamless UX across browsers/devices

Polished UI + Rich Data Visualization

Consistent Programming Interface

Robust Ajaxification & Web Optimization

You'll see RAD pretty often

All UI Control names start with RAD

- Rapid Application Development

Yep, we believe in that. 

RadAjaxPanel

Ajax-enabling Container .. no more Page refreshes

Simply place any ASP.NET controls that you want Ajax-enabled into a RadAjaxPanel and Telerik RadAjax takes care of the rest.

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="500px" >
    <asp:DropDownList ID="GameDropDownList" runat="server" AutoPostBack="true" 
         OnSelectedIndexChanged="GameDropDownList_SelectedIndexChanged">
        <asp:ListItem> </asp:ListItem>
        <asp:ListItem>Rock</asp:ListItem>
        <asp:ListItem>Paper</asp:ListItem>
        <asp:ListItem>Scisors</asp:ListItem>
    </asp:DropDownList>

    <p>You chose: <asp:Label ID="ChoiceLabel" runat="server"></asp:Label></p>
</telerik:RadAjaxPanel>

protected void GameDropDownList_SelectedIndexChanged(object sender, EventArgs e)
{
     ChoiceLabel.Text = GameDropDownList.SelectedValue;
}

RadAjaxManager

For fine-grained control over Ajaxification

Settings in Ajax manager tells the page what to update and when. 

RadAjaxManager

Oh, and you can do this visually in design-time

RadAjaxLoadingPanel

Visual indication as Ajax content loads

 <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" />

You can customize the loading indicator.

Remember, Ajax is not a panacea

If you Ajaxify every control on your web page ..

Performance will be the same

as in full Page PostBack

So, be smart & optimize.

Polished Input controls

User Data Entry - on steroids

1. RadTextBox

2. RadNumericTextBox

3. RadDateInput

4. RadMaskedTextBox

5. RadAutoCompleteBox

RadMaskedTextBox

Guide users for a positive UX

Support for most commonly used masks & fully customizable.

// IP Address
RadMaskedTextBox1.Mask = "<0..255>.<0..255>.<0..255>.<0..255>";

// Credit Card
RadMaskedTextBox1.Mask = "#### #### #### ####";

// Phone Number
RadMaskedTextBox1.Mask = "(###) ###-####-####";

// SSN
RadMaskedTextBox1.Mask = "###-##-####";

Data controls

Your UI should never be the bottleneck

1. RadGrid

2. RadScheduler

3. RadListBox

4. RadListView

5. RadPivotGrid

6. RadCalendar

7. RadGantt

RadGrid

Time to get some serious work done..

1. Rich design time wizard

2. Bind to any data source

3. Desktop like UX & performance

4. Sort, Page, Filter , Group & more

5. Export to PDF, Word, Excel & CSV

6. CRUD from various Edit modes

7. Mobile support

Some have called it Father of all grids ..

RadGrid

Let the grid do the heavy lifting

Just supply the data when it's needed..lots of event triggers.

RadGrid

Easy Data Binding with rich functionality..

<telerik:RadGrid runat="server" ID="RadGrid1" 
    DataSourceID="SqlDataSource1" PageSize="20"
    AllowPaging="True" AllowFilteringByColumn="True"
    AllowSorting="true" ShowGroupPanel="True">
</telerik:RadGrid>

Features  - Paging | Sorting | Filtering | Grouping | Selections

All simple settings - Out of the Box

Performance - Scrolling | Virtualization

RadGrid

Time for some easy CRUD operations..

Just enable AllowAutomaticInserts | Updates | Deletes

RadGrid

CRUD supported through various modes..

<telerik:RadGrid ID="RadGrid1"...
    <MasterTableView EditMode="PopUp"...

RadGrid

Back on the Filtering feature..

Built-in intuitive & type smart UX

RadGrid

Export your data with ease..

<telerik:RadGrid ID="RadGrid1"...>
    <MasterTableView CommandItemDisplay="Top" ...>
        <CommandItemSettings 
            ShowExportToExcelButton="True" 
            ShowExportToWordButton="True" 
            ShowExportToPdfButton="True" 
            ShowExportToCsvButton="True">
        </CommandItemSettings>

It's as simple as enabling the feature

RadScheduler

Here's a peek at the smart Scheduler ..

What's Built-in?

- Easy DataBinding

- View Modes & Export

- Templates & Editing

- Adaptive Rendering

Easy Picker controls

Allow the user to pick from options

1. RadColorPicker

2. RadDropDownList

3. RadComboBox

4. RadDropDownTree

5. RadMenu

6. RadSlider

RadDropDownList

This is not your ordinary drop down list

1. Robust data binding

2. Keyboard support

3. Mobile support

4. Virtual scrolling

5. Client templates

6. Server templates

RadDropDownList

Bind to various data sources

Server-side: Object | SQL | Entity | XML datasources

Client-side: Most standard protocols

RadDropDownList

As simple as setting properties..

<telerik:RadDropDownList ID="RadDropDownList4" 
    runat="server" 
    DataSourceID="EntityDataSource1"
    DataTextField="ContactName" 
    DefaultMessage="Select Customer">
</telerik:RadDropDownList>

<asp:EntityDataSource ID="EntityDataSource1"
    runat="server" 
    ConnectionString="name=NorthwindReadWriteEntities"
    DefaultContainerName="NorthwindReadWriteEntities"
    EntitySetName="Customers" 
    Select="it.[ContactName], it.[City], it.[ContactTitle]"
    AutoPage="true" 
    OrderBy="it.[ContactName]">
</asp:EntityDataSource>

Navigation controls

Helping users find their way..

1. RadMenu

2. RadPanelBar

3. RadRibbonBar

4. RadSearchBox

5. RadSiteMap

6. RadTabStrip

7. RadToolBar

8. RadTreeView

RadMenu 

Configurable, Flexible, Accessible.. 

• Design time experience

• Rich data binding

• Use any flat or hierarchical data source

• Vertical & Horizontal configurations

• Customize through templates and rich API

• Accessable: Section 508 compliant

RadMenu 

Build it at design time..

Add, Rearrange & Configure Menu items.

RadMenu

Define your own templates..

<telerik:RadMenuItem runat="server" Text="Calendar Preferences">
    <ContentTemplate>
        <div class="custom-menu-item">
            <asp:CheckBox ID="CheckBox1" runat="server" Text="Holidays" />
            <asp:CheckBox ID="CheckBox2" runat="server" Text="Birthdays" />
            <asp:CheckBox ID="CheckBox4" runat="server" Text="Office" />
            <asp:CheckBox ID="CheckBox3" runat="server" Text="Home" />
        </div>
    </ContentTemplate>
</telerik:RadMenuItem>

Embed HTML, Server Controls, and more..

RadMenu

Let's go mobile!

Adaptive / Responsive

Touch Friendly

Multi-level menu support 

Light-weight rendering with HTML / CSS3

Layout controls

Organization is the key

1. RadDock

2. RadMultiView

3. RadSpiltter

4. RadWizard

5. RadWindow

6. RadToolTip

RadWizard

Create step-by-step forms, in a snap..

• Quickly create stepped interfaces

• Built in validation

• Mobile Support & Adaptive Behavior

RadWizard

Here's how to create step-by-step forms

<telerik:RadWizard runat="server" ID="RadWizard1" Width="600px" 
        Height="330px" RenderedSteps="Active" 
        OnActiveStepChanged="RadWizard1_ActiveStepChanged">
    <WizardSteps>
        <telerik:RadWizardStep ID="RadWizardStep1" Title="Name" 
            StepType="Start">
            <telerik:RadTextBox runat="server" ID="RadTextBox1" 
                Label="First Name" LabelWidth="100px" Width="400px" />
            <telerik:RadTextBox runat="server" ID="RadTextBox2" 
                Label="Middle Name" LabelWidth="100px" Width="400px" />
            <telerik:RadTextBox runat="server" ID="RadTextBox3" 
                Label="Last Name" LabelWidth="100px" Width="400px" />
        </telerik:RadWizardStep>
            <telerik:RadWizardStep ID="RadWizardStep2" Title="Address">
            <!-- More steps ... -->
    </WizardSteps>
</telerik:RadWizard>

It's just a container, but with smartness.

RadWizard

Take it with you?

Just Set the RenderMode to "Auto"

- RadWizard automatically adapts to Smartphone, Tablet or Desktop. 

Enabling Responsiveness

We do all the heavy lifting

1. Adaptive UI controls - out of the box

2. Full Touch support

3. RadPageLayout

4. Device Detection Framework

Adaptive Controls

User experience tailored to the device..

Telerik UI controls are responsive .. Out of the Box!

• Same functionality
• Bigger touch areas
• A better UX per device
• One easy setting

<appSettings>
    <!-- Use automatic rendering application wide -->
    <add key="Telerik.Web.UI.RenderMode" value="Auto" />
</appSettings>

RadPageLayout

All the features of Bootstrap's grid

Server-side setup, with client-side responsiveness!

Do responsive the WebForms way..

RadPageLayout

Let's break down the features..

• 12 Column nest-able grid
• Adjustable per device size
• Preset break points [xs, sm, md, lg, xl]
• Client side visibility settings [show/hide on size] 
• Offset columns
• Push / Pull functionality

RadPageLayout

Let's see some code..

    <telerik:RadPageLayout ID="RadPageLayout1" runat="server" ShowGrid="True" 
        GridType="Fluid">
        <Rows>
            <telerik:LayoutRow>
                <Columns>
                    <telerik:LayoutColumn Span="4" SpanSm="12" SpanXs="12" CssClass="demo">
                        <asp:Panel ID="FirstPanel" runat="server">
                            <asp:Label runat="server" Text="First"></asp:Label>
                        </asp:Panel>
                    </telerik:LayoutColumn>
                    <telerik:LayoutColumn Span="8" SpanSm="12" SpanXs="12" CssClass="demo">
                        <asp:Panel ID="LastPanel" runat="server">
                            <asp:Label runat="server" Text="Last"></asp:Label>
                        </asp:Panel>
                    </telerik:LayoutColumn>
                </Columns>
            </telerik:LayoutRow>
        </Rows>
    </telerik:RadPageLayout>

Rows & Columns in a fluid layout | 'Spans' control overflow

Device Detection Framework

Get the clients' screen size, server side..

Determine the Screen Resolution of variety of device form factors

Get exact dimensions

Get the size

using Telerik.Web.Device.Detection;
...
var screenSize = Detector.GetScreenSize(Request.UserAgent); 
// DeviceScreenSize.Large

using Telerik.Web.Device.Detection;
...
var screenDimensions = Detector.GetScreenDimensions(Request.UserAgent);
var screenWidth = screenDimensions.Width; // = 480
var screenHeight = screenDimensions.Height; // = 600

Device Detection

Serve optimized content to each device..

protected void Page_Load(object sender, EventArgs e)
{
    var screenSize = Detector.GetScreenSize(Request.UserAgent);
    
    var isMediumOrSmaller = screenSize == DeviceScreenSize.Medium 
                            || screenSize == DeviceScreenSize.Small;
    var isLargeOrLarger = screenSize == DeviceScreenSize.Large 
                            || screenSize == DeviceScreenSize.ExtraLarge;
    
    LargeBannerImage.Visible = isLargeOrLarger;
    SmallBannerImage.Visible = isMediumOrSmaller;            
}

Highly Visual controls

Visual Guidance > Words

1. RadBarCode

2. RadBinaryImage

3. RadDiagram

4. RadGauge

5. RadMap

6. RadOrgChart

7. RadRotator

8. RadTreeList

RadDiagram

Let's talk fully functional diagram tool..

• Built-in essential shapes
• Predefined layouts
• Client-side and server-side data binding 
• Re-size, Rotate, Align and more
• Cut, Copy, Paste, Delete, Undo, Redo
• Drag and Drop support
• Zoom and Pan
• Export and Import JSON

With the right UI controls

The browser becomes your VM..

RadOrgChart

RadRotator

RadBarCode

Charting controls

Bring life to your data

1. All essential Chart types

2. Easy Data Binding

3. Intuitive Markup & APIs

4. Extreme performance tuned

5. All user interactions built-in

6. Print & Export

Bar | Pie | Donut | Line | Area Radar | Scatter | Funnel

CandleStick | Waterfall | Polar | Bubble | Many more ..

Interactive Charts

The possibility are limitless..

Zoom & Scroll | Drill-Down | Print

Charts that do More

While being developer friendly..

Multiple Series | Combination charts | Multiple Axes

Vast DataBinding support - client or server side

Fine Tuning controls

Squeeze the last bit of performance

1. RadCompression

2. RadScriptManager

3. RadSkinManager

4. RadStyleSheetManager

5. RadZipLibrary

RadCompression

Automatic AJAX compression and more..

<httpmodules>
    ...
    <add name="RadCompression" type="Telerik.Web.UI.RadCompression" />
</httpmodules>

Compress what IIS missed:

• ViewState 

• AJAX Web Services

• ADO.NET Data Services

• UpdatePanels

So much goodness

Everything you need for modern ASP.NET apps

1. Extensive theming

2. 20+ built-in Skins

3. Social UI controls

4. SharePoint Web Parts

5. Rich Media handling

6. Standards compliance

7. Accessibility built-in

Telerik UI for ASP.NET Ajax

Tooling that really helps

Interactive Demos

Real-world Sample Apps

Performance Tuning

Visual StyleBuilder to customize Skins

Telerik UI for ASP.NET Ajax

Feel your SuperPowers?

You're a .NET Ninja

Your ASP.NET Development Stack - Elevated!

http://www.telerik.com/products/aspnet-ajax.aspx