New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Integration with RadSlider

1
I find it easy to introduce myself to other people.
2
I am tolerant of time pressure and strict deadlines.
PERSONALITY TEST RESULTS
Your Personality Type:
Mind:
Tactics:

You can data bind RadSlider items on the client to a RadClientDataSource control since Q2 2014. This functionality is provided out of the box through the server-side ClientDataSourceID property which also has its client-side counterpart - the set_clientDataSourceID() method.

Client-side data binding means fewer postbacks, easier integration with various data services and a more flexible client-side development.

To define the data binding options of the slider, use the ItemBinding composite property, just like when data binding it on the server:

  • TextField—defines the data source field name which will be shown as the item text.
  • ToolTipField—defines the data source field name which will be shown as the item tooltip.
  • ValueField—defines the data source field name which will be used for the item's Value property.

In the simplest setup, you only need to provide an array of JSON literals to the RadSlider and define the corresponding data source field names in the ItemBinding composite property. You can find examples and read more details in the RadSlider client-side data binding help article.

In this demo you will see how to create a sample personality test by:

  • data binding two sliders to a RadClientDataSource control.
  • using their client-side events to change the page according to the data from the selected slider item.
  • DefaultCS.aspx
  • scripts.js
  • styles.css
  • RadSliderDataSource.json
<%@ Page Title="" Language="C#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="scripts.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
            <DataSource>
                <WebServiceDataSourceSettings ServiceType="Default">
                    <Select Url="RadSliderDataSource.json" DataType="JSON" />
                </WebServiceDataSourceSettings>
            </DataSource>
        </telerik:RadClientDataSource>
        <div class="questionSection">
            <div class="inline-block quenstionIndex">
                1
            </div>
            <div class="inline-block question">
                I find it easy to introduce myself to other people.
            </div>
            <div class="sliderWrapper">
                <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSliderXAxis" Width="675px" Height="52px" ItemType="Item" Skin="Silk"
                    ClientDataSourceID="RadClientDataSource1"
                    OnClientDataBound="demo.sliderClientDataBound"
                    OnClientValueChanged="demo.sliderClientXAxisChanged">
                    <ItemBinding TextField="Answer" ToolTipField="Answer" ValueField="PointCoordinate"></ItemBinding>
                </telerik:RadSlider>
            </div>
        </div>
        <div class="questionSection">
            <div class="inline-block quenstionIndex">
                2
            </div>
            <div class="inline-block question">
                I am tolerant of time pressure and strict deadlines.
            </div>
            <div class="sliderWrapper">
                <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSliderYAxis" Width="675px" Height="52px" ItemType="Item" Skin="Silk"
                    ClientDataSourceID="RadClientDataSource1"
                    OnClientDataBound="demo.sliderClientDataBound"
                    OnClientValueChanged="demo.sliderClientYAxisChanged">
                    <ItemBinding TextField="Answer" ToolTipField="Answer" ValueField="PointCoordinate"></ItemBinding>
                </telerik:RadSlider>
            </div>
        </div>
        <div id="chartResultsWrapper">
            <div id="chartWrapper" class="inline-block">
                <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="300px" Height="250px" Skin="Silk">
                    <ClientEvents OnLoad="demo.htmlChartLoad" />
                    <PlotArea>
                        <Series>
                            <telerik:ScatterSeries>
                                <LabelsAppearance Visible="false"></LabelsAppearance>
                                <TooltipsAppearance>
                                    <ClientTemplate>
                                        #=demo.labelResult(demo.valueToLabel(value.x, \'xAxis\'), value.x)#
                                        <br />
                                        #=demo.labelResult(demo.valueToLabel(value.y, \'yAxis\'), value.y)#
                                    </ClientTemplate>
                                </TooltipsAppearance>
                                <MarkersAppearance Size="30" BorderWidth="6" />
                                <SeriesItems>
                                    <telerik:ScatterSeriesItem X="0" Y="0" />
                                </SeriesItems>
                            </telerik:ScatterSeries>
                        </Series>
                        <YAxis MinValue="-2.6" MaxValue="2.6" Step="0.1" MajorTickType="None">
                            <LabelsAppearance>
                                <TextStyle Margin="0 -32 0 0" />
                            </LabelsAppearance>
                            <MinorGridLines Visible="false" />
                            <MajorGridLines Visible="false" />
                        </YAxis>
                        <XAxis MinValue="-3.1" MaxValue="3.1" Step="0.1" MajorTickType="None">
                            <LabelsAppearance>
                                <TextStyle Margin="-13 0 0 0" />
                            </LabelsAppearance>
                            <MinorGridLines Visible="false" />
                            <MajorGridLines Visible="false" />
                        </XAxis>
                    </PlotArea>
                </telerik:RadHtmlChart>
            </div>
            <div id="resultsWrapper" class="inline-block">
                <div class="resultsTitle">
                    PERSONALITY TEST RESULTS
                </div>
                <div class="inline-block resultsList">
                    <div class="resultsListTitle">Your Personality Type:</div>
                    <div id="xAxisLabel"><span class="propertyName">Mind: </span><span class="propertyValue"></span></div>
                    <div id="yAxisLabel"><span class="propertyName">Tactics: </span><span class="propertyValue"></span></div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance