OnSelect client function

The code...

This page is a little special. This Asxp page also provides the mechanism for the images to be delivered to the browser. I've included all of the code for completeness, but you can skip the code in the Page_Load function if you are not interested.

The first part simply constructs a table to hold the elements in, the DbCombo tag and the image tag. Note that to start with the image tag is hidden.

<p>
    <table>
        <tr>
            <td valign="top">
                <DbCombo:DbCombo 
                    runat="server" 
                    ID="Combo1" 
                    ServerMethod="DbComboEmployees" 
                    ClientOnSelectFunction="OnSelectEmployee" />
            </td>
            <td valign="top">
                <img style="display:none;
                    border:solid 2px #000000;
                    filter: progid:DXImageTransform.Microsoft.dropShadow
                    (color=#cccccc, offX=3, offY=3);
                    margin-bottom:4px;" id="employee"><br>
                <b id=picCaption></b>
            </td>
            <td id="DbComboOnSelectEvent" valign="top">
            </td>
        </tr>
    </table>
</p>

Next is our javascript function, which takes three values - Value, Text and SelectionType. Text is set to whatever is in the visible part of the DbCombo drop-down. If we are selecting an item from DbCombo, Value is set to the hidden value property that is supplied by our DbComboValue SQL column. If we are de-selecting an element this function is called with the Text property still set to the current textbox contents, but Value is set to an empty string. SelectionType gives us more information about the source event.

<script language="javascript">
    function OnSelectEmployee(Value, Text, SelectionType)
    {
        if (Value=="")
        {
            document.all["employee"].style.display="none";
            document.all["picCaption"].innerHTML="";
        }
        else
        {   
            document.all["picCaption"].innerHTML=Text;
            document.all["employee"].style.display="";
            document.images.employee.src = 
                "demoonselect.aspx?EmployeeID="+Value;
        }
        UpdateSelectionType(SelectionType);
    }
    function UpdateSelectionType(SelectionType){
        var a="";
        switch (SelectionType)
        {
            case 1:
                a="The user is scrolling down the list "
                    + "ClinetOnSelectFunction fires each "
                    + "time a new item is selected.";
                break;
            case 2:
                a="The user has pressed enter when an "
                    + "item is selected. The results disappear, "
                    + "and the item is selected.";
                break;
            case 3:
                a="The user has clicked on an item. The "
                    + "results disappear, and the item is selected.";
                break;
            case 4:
                a="The user has entered more text into the "
                    + "textbox. Another query will be run, 
                    + "and the selection is cleared. Nothing "
                    + "is selected.";
                break;
            case 5:
                a="The user has scrolled off the bottom or top "
                    + "of the drop-down, and cleared the current "
                    + "selection. Nothing is selected.";
                break;
            case 6:
                a="The user has pressed escape to clear the "
                    + "DbCombo, and hide the results. Nothing 
                    + " is selected.";
                break;
            case 7:
                a="DbCombo has evaluated the client state function, "
                    + "and found it to have changed. The current "
                    + "selection is cleared. Nothing is selected.";
                break;
            default:
                break;
        }
        document.all["DbComboOnSelectEvent"].innerHTML=
            "Last event was: \n"+a;
    }
</script>

Here is our ServerMethod. It's very simple, and selects the Employee ID and name. Note we concatenate two columns together (first name and last name).

<script runat="server">
    [Cambro.Web.DbCombo.ResultsMethod(true)]
    public static object DbComboEmployees(
        Cambro.Web.DbCombo.ServerMethodArgs args)
    {
        DataSet dataset=new DataSet();
        SqlConnection conn = new SqlConnection(@"your-data-source");
        SqlDataAdapter adapter = new SqlDataAdapter();
        adapter.SelectCommand = new SqlCommand(@"
            SELECT TOP "+args.Top+@" 
            LastName+', '+FirstName AS DbComboText, 
            EmployeeID AS DbComboValue 
            FROM Employees 
            WHERE LastName+', '+FirstName LIKE @Query 
            ORDER BY LastName, FirstName", conn);
        adapter.SelectCommand.Parameters.Add("@Query", args.Query+"%");
        adapter.Fill(dataset);
        conn.Close();
        return dataset;
    }
</script>

The following functions cause the page to emit the images. You don't need to know how this works to understand the DbCombo OnSelect feature.

<script runat="server">    
    private void Page_Load(object sender, System.EventArgs e)
    {
        // Put user code to initialize the page here
        if (!Page.IsPostBack)
        {
            if (Request["EmployeeID"]!=null)
            {
                SqlConnection conn = new SqlConnection(@"your-data-source");
                
                string cmdText = @"
                    SELECT Photo 
                    FROM Employees 
                    WHERE EmployeeID=" + 
                        int.Parse(
                            Request["EmployeeID"]
                        ).ToString();

                SqlCommand cmd = new SqlCommand(cmdText, conn);

                MemoryStream ms = new MemoryStream();

                // 78 is the size of the OLE header 
                // for Northwind images.
                // There's no header in PUBS as PUBS 
                // just contains the raw image bits.
                int offset = 78; 

                conn.Open();
                byte [] img = (byte[]) cmd.ExecuteScalar();
                ms.Write(img, offset, img.Length-offset);
                conn.Close();

                Bitmap bmp = null;
                bmp = new Bitmap(ms);
                int data=0;
                Bitmap bmp1 = (Bitmap)bmp.GetThumbnailImage(
                    bmp.Width/2, 
                    bmp.Height/2,
                    new System.Drawing.Image.GetThumbnailImageAbort(
                        OnThumbNailAbort),
                    new IntPtr(data)
                );

                EncoderParameters eps = new EncoderParameters(1);
                eps.Param[0] = new EncoderParameter( 
                    System.Drawing.Imaging.Encoder.Quality,(long)25);
                ImageCodecInfo ici = GetEncoderInfo("image/jpeg");
                Response.Clear();
                Response.Expires=-1;
                Response.ContentType = "image/jpeg";
                bmp1.Save( Response.OutputStream, ici, eps );
                ms.Close();
            }
        }
    }

    private static ImageCodecInfo GetEncoderInfo(String mimeType)
    {
        int j;
        ImageCodecInfo[] encoders;
        encoders = ImageCodecInfo.GetImageEncoders();
        for(j = 0; j < encoders.Length; ++j)
        {
            if(encoders[j].MimeType == mimeType)
                return encoders[j];
        } return null;
    }
            
    protected bool OnThumbNailAbort()
    {
        return true;
    }
    
</script>