Wizard - Adaptive Behavior

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Telerik ASP.NET Wizard comes with built-in adaptive behavior. When accessed via a mobile device, the control changes to create a user experience tailored to the device screen size. In this mode, RadWizard is mobile-friendly and its touch zones are bigger and easier to select.

Mobile vs Auto render modes
You can enable the mobile layout of the control by setting the RenderMode property of the Wizard to Mobile.
To cover the rendering of both mobile and desktop devices, you could set the RenderMode property to "Auto" . This option will automatically decide how to render the control on a smartphone, tablet or PC.
For more accurate device detection, you could reference the Device Detection Framework, which ensures that the control is rendered with appropriate UI according to the device screen size.

Viewport adjustment
For fine-tuning of the viewport you could add the following meta tag in the head section of the page:

< meta name = "viewport" content = "width=device-width, initial-scale=1" />

For optimal experience on mobile devices, we suggest that you use Telerik controls together with the Page Layout Framework, which will add responsive capabilities to your layout.

See more mobile-optimized demos of Telerik controls in this responsive sample app.

  • DefaultCS.aspx
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin no-bg">
        <qsf:QrCode ID="QrCode1" runat="server" NavigateUrl="http://tlrk.it/1IXudWU"></qsf:QrCode>


Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?