The C1LinearGaugeExtender control supports horizontal (default) and vertical orientation. In this example you'll add a drop-down box that will enable user to change the orientation of the gauge at run time.

Complete the following steps:

1. Create a new ASP.NET Web application.
2. In the Solution Explorer, right-click the project and choose Add Reference. Locate and add a reference to the C1.Web.Wijmo.Extenders assembly.
3. Switch to Source view, and add the following markup at the top of the page to register the assembly:

<%@ Register Assembly="C1.Web.Wijmo.Extenders.4" Namespace="C1.Web.Wijmo.Extenders.C1Gauge" TagPrefix="Gauge" %>

Note that you may need to edit the above depending on the assembly you are using.

Add the following markup within the main <div> tag to add a Panel with content and set the linear gauge extender:

<asp:Panel ID="linearGauge" runat="server" Width="310" Height="70">

</asp:Panel>

<Gauge:C1LinearGaugeExtender runat="server" ID="LinearGaugeExtender1" TargetControlID="linearGauge" Value="50">

    <TickMajor Position="Inside" Factor="3">

    </TickMajor>

    <TickMinor Visible="true">

    </TickMinor>

</Gauge:C1LinearGaugeExtender>

This will add a styled gauge to the page.

Add the following markup just below the gauge markup to add a drop-down box and initialize it:

<p>

    <select id="orientation">

        <option>horizontal</option>

        <option>vertical</option>

    </select>

</p>

<script type="text/javascript">

    $(document).ready(function () {

        var gaugeEle = $("#<%= linearGauge.ClientID %>"),

        width = gaugeEle.width(),

        height = gaugeEle.height();

    $("#orientation").change(function () {

        var orientation = $(this).val();

    gaugeEle.wijlineargauge("option", "orientation", orientation);

    if (orientation === "vertical") {

        gaugeEle.width(height);

        gaugeEle.height(width);

    }

    else {

        gaugeEle.width(width);

        gaugeEle.height(height);

    }

    });

    });

</script>

What You've Accomplished

Press F5 to run your application,  notice that the gauge appears horizontal. Choose vertical from the drop-down box to change the gauge's orientation.