Decrease Font Size
Increase Font Size
   BLOG

ASP-NET AJAX MultiHandleSliderExtender - Slide by Year and Month

by bryian 6. March 2010 18:27

ASP.NET How to use MultiHandleSliderExtender|

multi handle slider extender|

MultiHandleSlider Control|

MultiHandleSliderExtender|

Ajax MultiHandleSliderExtender|

ASP.NET Charts storage mode |

AJAX Control Toolkit|

OnClientDrag, OnClientDragEnd, RaiseChangeOnlyOnMouseUp

Last updated - 03/09/2010

Replaced the PageMethods with client-side JavaScript Array. I received a feedback from the CodeProject member quoted "Here is the problem the dragging is sending many requests to the server and the last one gets executed but then that means the database has to work that extra bit and also the IIS." I thinks he has a point, so I decided to store the year and month data for each RowNumber on the client-side JavaScript array. This will allow the sliders' range label be updated through the client-side. See New Update 1 section.

Introduction

In this tutorial, I will demonstrate how to use MultiHandleSlider extender to choose or display year and month in a range. This control eliminates the need to use four DropDownlist controls to hold the range values and validation control for validating user selection. Then we will use the Column Chart to display number of cars on Sesame Street based on the selected range values. This chart allows the user to drill down into details for the selected car brands. See figure 1.

Figure 1
MultiHandleSlider results

Getting Started

  1. Download AJAX Control Toolkit Release Notes - May 2009 Release
  2. Download Samples Environment for Chart Controls
  3. Displayed below is the snapshot of the project solution explorer. You are welcome to download this demo.

Figure 2

Project Structure

Back-end database

First, add a new column to the table, name it YearMonth and populate it with the concatenation of the Year and Month data. See figure 3. The original table is on the left. With this setup, we can easily select data within the desired year and month range from the table.

Figure 3
Add column to table

Use ROW_NUMBER function to generate row number for each row of the result set. Then we can use the row number to populate the slider range of values. The query shown below return sixty two rows and this means that the slider range of values goes from one to sixty two. In other words we can set the minimum and maximum properties of the slider to one and sixty two respectively.

Figure 4
Create Row Number

Putting everything together

For simplification's sake, I use XML as Data Source in this tutorial. There are two XML file in the App_Data folder namely CarsList.xml and SliderRange.xml. The former file contains all the data in the table that is shown in figure 3. The latter xml file hold the result set shown in figure 4. Create two custom entity classes named CarsList and Range to hold the public properties. See listing 1.

Listing 1

public class CarsList
{
    public CarsList(){}
    public int CarCount { get; set; }
    public int YearMonth { get; set; }
    public string CarBrand { get; set; }
    public string Date { get; set; }
}
public class Range
{
    public Range(){}
    public string Year { get; set; }
    public string Month { get; set; }
    public int RowNumber { get; set; }
}

Let start by adding a Script Manager on to the page and set the EnablePageMethods and EnablePartialRendering properties to true. By setting the EnablePageMethods property to true, the client script can access the static page methods in an ASP.NET page. The EnablePartialRendering property allows us to specify only the region of the page to be refreshed. Next, drag a TextBox, MultiHandleSliderExtender, four HiddenField and two Label controls on to the page and wrap it inside an UpdatePanel. Set the TargetControlID of the MultiHandleSliderExtender control to the ID of the TextBox control. Add two handles to the control and set its ControlID to rangeStart and rangeEnd respectively. See listing 2. The purpose of the Label controls is to display the selected range values. The HiddenField controls are used to hold the handles' values. Initialize the MultiHandleSliderExtender with the setting shown below.

  • OnClientDrag= Drag, The event raised when the user drags the handle.
  • OnClientDragEnd = DragEnd, The event raised when the user stops dragging the handle.
  • Increment = 1, determines the number of points to increment or decrement the slider values.
  • RaiseChangeOnlyOnMouseUp = true, fires the change event on the extended TextBox only when the left mouse button is released.
  • EnableRailClick = false

Listing 2

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true" /> 
    <div>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table>
    <tr><td colspan="2">
       <asp:TextBox ID="txtSlider" runat="server"></asp:TextBox>  
    
    <cc1:MultiHandleSliderExtender ID="MultiHandleSliderExtender1" runat="server" ShowHandleDragStyle="true"
    BehaviorID="mhSlider" TargetControlID="txtSlider" Length="500" ShowInnerRail="true"
        EnableMouseWheel="false" Increment="1" 
        RaiseChangeOnlyOnMouseUp="true" EnableRailClick="false"
       OnClientDragEnd="DragEnd" OnClientDrag="Drag" 
        ShowHandleHoverStyle="true" Maximum="222" Minimum="1">
        <MultiHandleSliderTargets>
         <cc1:MultiHandleSliderTarget ControlID="rangeStart" />
            <cc1:MultiHandleSliderTarget ControlID="rangeEnd" />
        </MultiHandleSliderTargets>  
   </cc1:MultiHandleSliderExtender>
   <br />
   </td></tr>
   <tr>
   <td><asp:Label ID="lblStartRange" runat="server" Text=""></asp:Label></td>
   <td><asp:Label ID="lblEndRange" runat="server" Text=""></asp:Label> </td>
   </tr>  
    <tr><td>
    <asp:HiddenField ID="rangeEnd" Value="10" runat="server" />
    <asp:HiddenField ID="rangeStart" Value="1" runat="server" />
     <asp:HiddenField ID="hdfTrackRangeStart" runat="server" Value="0" />
 <asp:HiddenField ID="hdfTrackRangeEnd" runat="server" Value="0" />
    </td></tr>
</table>
</ContentTemplate>            
</asp:UpdatePanel>
</div>

Shown below is the client-side code. Dragging the handle will trigger the ASP.NET page method SliderRange to update the lblStartRange and lblEndRange value. Once the users release the handle, the DragEnd function will be executed.

Listing 3

<script type="text/javascript">
    var isDragging = false;
    function Drag(sender, args) {
        GetSliderRange($get("rangeStart").value, $get("rangeEnd").value);
    }

    function DragEnd(sender, args) {
        //prevent postback on slider click
        if ($get("hdfTrackRangeStart").value !== $get("rangeStart").value) {
             __doPostBack("btnLoadChart", "");
        }
        if ($get("hdfTrackRangeEnd").value !== $get("rangeEnd").value && $get("hdfTrackRangeEnd").value !== '0') {
             __doPostBack("btnLoadChart", "");
        }
    }

    function GetSliderRange(startV, endV) {
        PageMethods.SliderRange(startV, endV, this.callback);
    }

    function callback(result) {
        var arrResult = result.split("--");
        $get("lblStartRange").innerHTML = arrResult[0];
        $get("lblEndRange").innerHTML = arrResult[1];
    }
</script>

Create a generic List<T> of Range objects in the code behind and mark it as static so that is accessible from the client script or other static method. Shown below are the contents in the Page_Load event. The PopulateSlider() method read the contents in the SliderRange.xml file and store it in the lstSliderRange. Initialize the MultiHandleSliderExtender minimum and maximum value to 1 and biggest RowNumber in lstSliderRange respectively. See listing 4.

Listing 4

protected static List<Range> lstSliderRange = null;
protected void Page_Load(object sender, EventArgs e)
    {
	  Chart1.Click += new ImageMapEventHandler(Chart1_Click);
        PopulateSlider();

        if (!Page.IsPostBack)
        {
            //slider min and max value
            MultiHandleSliderExtender1.Minimum = 1;
            MultiHandleSliderExtender1.Maximum = 
			int.Parse(lstSliderRange.Max(r => r.RowNumber).ToString());

            //hidden field
            rangeEnd.Value = MultiHandleSliderExtender1.Maximum.ToString();
            rangeStart.Value = MultiHandleSliderExtender1.Minimum.ToString();

		PopulateChart(int.Parse(rangeStart.Value), int.Parse(rangeEnd.Value));
        }
        SetLabel();
    }

Displayed below is the implementation of PopulateSlider() method. The lstSliderRange object is cached to increase performance and its contents are fetched again when the file contents changes. Depending on how often we update the data source, we can cache it based on the changes in the database, folder, file or time based expiration. Read more about ASP.NET Caching technique from here.

Listing 5

//get slider range
    void PopulateSlider()
    {
        //Cache the frequently used data
        if (Cache["Cache_lstSliderRange"] == null)
        {
            XDocument xmlDoc = XDocument.Load(Server.MapPath(Utilities.Instance.SliderRangeXMLPath));
            lstSliderRange = (from c in xmlDoc.Descendants("Range")
                              select new Range
                              {
                                  Month = (string)c.Attribute("Month"),
                                  Year = (string)c.Attribute("Year"),
                                  RowNumber = (int)c.Attribute("RowNumber")
                              }).ToList();

            Cache.Insert("Cache_lstSliderRange", lstSliderRange,
                new System.Web.Caching.CacheDependency(Server.MapPath(Utilities.Instance.SliderRangeXMLPath)));
        }
        else
        {
            lstSliderRange = Cache["Cache_lstSliderRange"] as List<Range>;
        }
    }

The SetLabel() method display the MultiHandleSliderExtender start and end range values in the lblStartRange and lblStartEnd Label controls. The SliderRange method is decorated with [System.Web.Services.WebMethod] making the method accessible from client-side JavaScript. The GetSliderText method accept two parameters, the first parameter refer to the row number and the second parameter refers to the left or right handle. For instance, calling SliderRange(2, 10) will yield "From Year: 2005 Month:02--To Year: 2005 Month:10". First, it will query the lstSliderRange object and retrieve the Year and Month from the result set. If the pos==s, set the text to From and To if pos==e. See listing 6.

Listing 6

//set the slider start and end label
    void SetLabel()
    {
        string[] arrLabel = SliderRange(rangeStart.Value, rangeEnd.Value).Split("--".ToCharArray());
        lblStartRange.Text = arrLabel[0];
        lblEndRange.Text = arrLabel[2];
    }

    [System.Web.Services.WebMethod]
    public static string SliderRange(string start, string end)
    {
        if (lstSliderRange != null)
        {
            return GetSliderText(start, "s") + "--" + GetSliderText(end, "e");
        }
        else
        {
            return "";
        }
    }

    protected static string GetSliderText(string rn, string pos)
    {
        string strRangeText = string.Empty;
        IEnumerable<Range> rangeText;

        rangeText = lstSliderRange.Where(r => r.RowNumber == int.Parse(rn))
            .Select(r => new Range
            {
                Year = r.Year,
                Month = r.Month
            });

        if (pos == "s")
        {
            strRangeText = "<b>From</b> Year: " + rangeText.First().Year + " Month: " + rangeText.First().Month;
            return strRangeText;
        }
        else
        {
            strRangeText = "<b>To</b> Year: " + rangeText.First().Year + " Month: " + rangeText.First().Month;
            return strRangeText;
        }
    }

At this point, you should see something like below on the browser.

Figure 5
Check point

Chart Control

Make sure to download the Microsoft Chart Controls for Microsoft .NET Framework 3.5 because the Chart controls required System.Web.DataVisualization.Design.dll and System.Web.DataVisualization.dll. I also included both the dlls in the sample code. Some of the codes in this section are from Samples Environment for Chart Controls. First, let create a method to bind the data source to the Column Chart. This method accepts two parameters, start and end range values. Then use LINQ to query the CarsList.xml data source and find all the records where YearMonth between start and end range values. Group the result by car brands, stores it in lstCarsnTotal and bind it to the chart. See listing 7.

Listing 7

void PopulateChart(int start, int end)
    {
        List<CarsList> lstCarsnTotal = new List<CarsList>();

        XDocument xmlDoc = XDocument.Load(Server.MapPath(Utilities.Instance.CarsListXMLPath));
        lstCarsnTotal = (from c in xmlDoc.Descendants("Car")
                         where (int)c.Attribute("YearMonth") >= GetRange(start) && (int)c.Attribute("YearMonth") <= GetRange(end)
                         group c by (string)c.Attribute("CarBrand") into g

                         select new CarsList
                         {
                             CarCount = g.Sum(c => (int)c.Attribute("Count")),
                             CarBrand = g.Key
                         }).ToList();
	  Chart1.Series["Default"].ChartType = SeriesChartType.Column;
        Chart1.Series["Default"].Points.DataBindXY(lstCarsnTotal, "CarBrand", lstCarsnTotal, "CarCount"); 
}

//return YearMonth
    protected static int GetRange(int rn)
    {
        IEnumerable<Range> rangeText;

        rangeText = lstSliderRange.Where(r => r.RowNumber == rn)
            .Select(r => new Range
            {
                Year = r.Year,
                Month = r.Month
            });

        return int.Parse(rangeText.First().Year + rangeText.First().Month);
    }

Now, when the user click on the column chart, a GridView will appears next to it. The PopulateGrid method takes the car brand as an argument. Then use LINQ to query the SliderRange.xml data source where YearMonth between the selected range values and CarBrand equal to the selected car brand. See listing 8.

Listing 8

protected void Chart1_Click(object sender, ImageMapEventArgs e)
    {
        if (!GridView1.Visible)
        {
            GridView1.Visible = true;
        }
        //kept track of selected car type
        ChartPostBackValue.Value = e.PostBackValue;
        lblCarBrand.Text = "Car Brand: " + e.PostBackValue;

        PopulateGrid(e.PostBackValue);
        PopulateChart(int.Parse(rangeStart.Value), int.Parse(rangeEnd.Value));
    }

    void PopulateGrid(string strPostBavkVal)
    {
        List<CarsList> lstCarsnTotal = new List<CarsList>();

        XDocument xmlDoc = XDocument.Load(Server.MapPath(Utilities.Instance.CarsListXMLPath));
        lstCarsnTotal = (from c in xmlDoc.Descendants("Car")
                         where (int)c.Attribute("YearMonth") >= GetRange(int.Parse(rangeStart.Value))
                         && (int)c.Attribute("YearMonth") <= GetRange(int.Parse(rangeEnd.Value)) && (string)c.Attribute("CarBrand") == strPostBavkVal
                         select new CarsList
                         {
                             CarCount = (int)c.Attribute("Count"),
                             CarBrand = (string)c.Attribute("CarBrand"),
                             Date = (string)c.Attribute("Date")
                         }).ToList();

        GridView1.DataSource = lstCarsnTotal;
        GridView1.DataBind();
    }

Known Issue

On design time, we will see the error "MultiHandleSliderExtender could not be set on property MultiHandleSliderTargets" but code work fine at run time. I have downloaded the example and latest version of Ajax Control Toolkit from CodePlex but didn't solve the problem. A workaround is adding the TagPrefix next to the MultiHandleSliderTargets tag during design time and remove it at run time. Hopefully someone can shed some light on this.

Points of Interest

The Default2.aspx in the sample code includes a master page. If you use a master page, make sure to use the Control.ClientID. For some reason the client __doPostBack function do not work with master page, the work around was to call the button click event. See listing 9. Hopefully someone can shed some light on this too.

Listing 9

<script type="text/javascript">
    var isDragging = false;
    function Drag(sender, args) {
        GetSliderRange($get("<%= rangeStart.ClientID %>").value, $get("<%= rangeEnd.ClientID%>").value);
    }
    function DragEnd(sender, args) {
        //prevent postback on slider click
        if ($get("<%= hdfTrackRangeStart.ClientID %>").value !== $get("<%= rangeStart.ClientID %>").value) {
            $get("<%= btnLoadChart.ClientID %>").click();
            //__doPostBack("<%= btnLoadChart.ClientID %>", "");
        }
        if ($get("<%= hdfTrackRangeEnd.ClientID %>").value !== $get("<%= rangeEnd.ClientID %>").value && $get("<%= hdfTrackRangeEnd.ClientID %>").value !== '0') {
            $get("<%= btnLoadChart.ClientID %>").click();
            //__doPostBack("<%= btnLoadChart.ClientID %>", "");
        }
    }

    function GetSliderRange(startV, endV) {
        PageMethods.SliderRange(startV, endV, this.callback);
    }

    function callback(result) {

        var arrResult = result.split("--");

        $get("<%= lblStartRange.ClientID %>").innerHTML = arrResult[0];
        $get("<%= lblEndRange.ClientID %>").innerHTML = arrResult[1];

    }
    </script>

I have noticed that, clicking on the handle will trigger the DragEnd function and cause unnecessary post back. To remedy this problem, compare the old selected range value and the current selected range value, if they are not equal then permit the call of client-side __doPostBack function. See listing 10.

Listing 10

function DragEnd(sender, args) {
        //prevent postback on slider click
        if ($get("hdfTrackRangeStart").value !== $get("rangeStart").value) {
             __doPostBack("btnLoadChart", "");
        }
        if ($get("hdfTrackRangeEnd").value !== $get("rangeEnd").value && $get("hdfTrackRangeEnd").value !== '0') {
             __doPostBack("btnLoadChart", "");
        }
    }

The chart displayed correctly on my local machine but it displayed a sequence of strange characters in the hosting environment. After doing some research, I discovered that I didn't set appropriate permissions on the storage folder and EnableSessionState on the page directive was set to false. The list of ASP.NET Charts storage mode is available here.

New Update 1

Create a client-side Array object named arrRange, loop through each rows in the lstSliderRange object and add the values year and month to it. Place this method inside the !Page.IsPostBack block. See listing 11.

Listing 11

void CreateArray()
    {
        foreach (Range r in lstSliderRange)
        {
            Page.ClientScript.RegisterArrayDeclaration("arrRange", "'"+r.Year +"--" + r.Month+"'");
        }
    }

Instead of using the PageMethods to lookup the RowNumber text, call the client-side GetSliderText function. See listing 12.

Listing 12

function GetSliderRange(startV, endV) {
        $get("<%= lblStartRange.ClientID %>").innerHTML = GetSliderText(arrRange[startV - 1], 's');
        $get("<%= lblEndRange.ClientID %>").innerHTML = GetSliderText(arrRange[endV - 1], 'e');
        // alert(arrRange[startV - 1]);
        // PageMethods.SliderRange(startV, endV, this.callback);
    }

    function GetSliderText(r, p) {
        var arrResult = r.split("--");
        var strText = '';
        if (p === 's') {
            strText = "<b>From</b> Year: " + arrResult[0] + " Month: " + arrResult[1];

        }
        else {
            strText = "<b>To</b> Year: " + arrResult[0] + " Month: " + arrResult[1];
        }
        return strText;
    }

Conclusion

If you find any bugs or disagree with the contents, please drop me a line and I'll work with you to correct it. I would suggest downloading the demo and explore it in order to grasp the full concept of it because I might left out some useful information.

IE, Firefox, Google Chrome, Safari

Resources

ASP.NET Charts - Storage Mode
MultiHandleSlider Demonstration
ScriptManager..::.EnablePageMethods Property
Using Microsoft's Chart Controls In An ASP.NET Application: Rendering the Chart
Working with Client-Side Script

Watch this script in action

Demo

Downloads

Download

Comments (23) -

1/28/2010 1:16:57 AM #

Answering Service

You prefabricated large great ideas here. I through a search on the person and learnt most peoples testament hold with your journal.





Regards
Rodriguez

Answering Service United States

2/3/2010 10:27:19 AM #

Car Mats

We the thing that these applications are the innovative thing.

Car Mats India

2/3/2010 10:01:18 PM #

foam

This article has helped me a lot. I bookmarked it in case I need to visit your site again for fresh articles.

foam United States

2/3/2010 10:02:12 PM #

Employee Rights

Hi! I thought your post was cool and will visit often.

Employee Rights United States

2/8/2010 1:35:32 PM #

Francine

Today was a good day for research but I was surprised to find this info so easy to grasp.

Francine Kuwait

2/10/2010 9:10:39 PM #

BillN

Great blog, keeping me from working

BillN Poland

2/26/2010 1:24:45 PM #

Second Chance Checking

This is a really nice article. I am sure it will help me in the future. Thanks for sharing!

Second Chance Checking United States

2/26/2010 10:53:06 PM #

OREN

This is interesting, post more often! However, some of the comments people have made above are questionable, will think a little bit more in depth and get back later

OREN Iceland

2/27/2010 9:05:49 PM #

Zoom H2 Handy

With this setup, we can easily select data within the desired year and month range from the table.

Zoom H2 Handy United States

3/3/2010 4:21:36 AM #

BEULAH

Interesting blog, not like the others! This is the kind of information people expect from all blogs

BEULAH Brunei Darussalam

3/3/2010 6:03:26 AM #

How to make your boobs bigger

Thanks for taking the time to write this post

How to make your boobs bigger Egypt

3/7/2010 1:32:04 AM #

Jamie

Great blog, keeping me from working

Jamie U.A.E.

3/16/2010 2:25:36 AM #

Stanley

I love this blog

Stanley Paraguay

3/20/2010 10:15:29 PM #

Dave

a very clear discussion, and detailed, I will try this. very helpful. thanks.

Dave United States

4/2/2010 3:43:40 PM #

lola faltano

incredible stuff thanx Smile

lola faltano Korea

4/2/2010 10:18:23 PM #

Naruto Toys

I always have problems with AJAX and JS.. Guess I just need to learn more about what makes them tick. Anyways, great tutorial.

Naruto Toys United States

5/1/2010 8:22:38 AM #

potencx

I just read this post and was amazed at how much new info I got.

potencx Paraguay

5/3/2010 6:33:22 PM #

mark

This is my second visit to your site!  I really enjoy your article and I believe I'll become a frequent visitor to your site! I enjoy your in depth posts about asp.net how to use multihandlesliderextender and I enjoy the fact you are so knowledgeable about asp.net how to use multihandlesliderextender.  Thanks for your time Smile

mark Principality of Monaco

6/14/2010 11:24:38 AM #

t&#232; cho yung

Amazed post!

thanks for share this information.

good work

tè cho yung Italy

6/14/2010 1:42:48 PM #

mark

Thanks for the information, can I use the information on my blog? I'll provide a back link to your site Smile

mark Germany

8/11/2010 11:20:18 AM #

Annuaire

Nice post. I'll translate it to french and post a link in my blog.

Annuaire Belgium

12/5/2010 11:21:36 PM #

Bill Smith

Thanks for sharing this info!

Bill Smith United States

1/25/2011 1:13:22 PM #

eloan mortgage

good post i love this Smile

eloan mortgage Honduras

Pingbacks and trackbacks (5)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading