WebDropDown Lazy Loading : Additional Approaches

Craig Shoemaker / Thursday, December 10, 2009

Back in April I posted a video to the Community Site that demonstrates how to Lazy Load the WebDropDown control. After working with customers who encountered some problems using the DropDownOpened client event, I wanted to cover some alternative approaches to for lazy loading.

There are a number of ways you might choose to implement the deferred loading and in this post I outline two common ways you may want to consider. If your drop down simply needs to only load data once the user begins to interact with the control, consider using the client Focus event to request data for the control. However, if you expect users to begin to type values into the control in an attempt to filter what is in the control, then using the ValueChanged event is a better option.

The following sample implements both approaches:

Markup

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function getItems(id)
        {
            var wdd = $find(id);

            if (wdd.get_items().get_length() == 0)
            {
                wdd.loadItems();
            }
        }
        
        function onFocus()
        {
            getItems("<%= wddFocus.ClientID %>");
        }

        function onValueChanged()
        {
            getItems("<%= wddFiltered.ClientID %>");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" />

    <ig:WebDropDown ID="wddFocus" runat="server" 
        onitemsrequested="wddFocus_ItemsRequested" Width="200px" 
        TextField="FirstName" ValueField="Id">
        <ClientEvents Focus="onFocus" />
        <DropDownItemBinding TextField="FirstName" ValueField="Id" />
    </ig:WebDropDown>

    <p>&nbsp;</p>

    <div>Start typing 'Ja'. Jack is at the end of the list 
    and will auto-select the last item for you after loading.</div>

    <ig:WebDropDown ID="wddFiltered" runat="server" Width="200px" 
        TextField="FirstName" ValueField="Id" 
        onitemsrequested="wddFiltered_ItemsRequested">
        <ClientEvents ValueChanged="onValueChanged" />
        <DropDownItemBinding TextField="FirstName" ValueField="Id" />
    </ig:WebDropDown>

    </form>
</body>
</html>

Code Behind

using System;
using System.Collections.Generic;
using Infragistics.Web.UI.ListControls;

public partial class Demos_WebDropDown_LazyLoad_test_Default : 
        System.Web.UI.Page
{
    private IList<Person> _people = new List<Person>();

    protected void Page_Load(object sender, EventArgs e)
    {
        _people.Add(new Person { FirstName = "Craig" });
        _people.Add(new Person { FirstName = "Scott" });
        _people.Add(new Person { FirstName = "Kevin" });
        _people.Add(new Person { FirstName = "Jack" });
    }

    protected void wddFocus_ItemsRequested(object sender, DropDownItemsRequestedEventArgs e)
    {
        this.wddFocus.DataSource = this._people;
        this.wddFocus.DataBind();
    }

    protected void wddFiltered_ItemsRequested(object sender, DropDownItemsRequestedEventArgs e)
    {
        this.wddFiltered.DataSource = this._people;
        this.wddFiltered.DataBind();
    }
}