Text highlight in multi-column combobox

6 posts, 1 answers
  1. Chuck
    Chuck avatar
    7 posts
    Member since:
    Jan 2013

    Posted 29 Jan 2013 Link to this post

    Hi there

    I have two perfectly working RadComboBoxes - one is single column, the other is a multi-column (using itemtemplate).  Both use LoadOnDemand (ItemsRequested event).

    I noticed that the single column combobox highlights text as the user types, but the same does not happen for the multi-column combobox.  I've set HighlightTemplatedItems="true" but this of course only affects the highlighting of the row, not individual letters.

    I checked the Q3 2010 demos on my system and they replicate the issue I am having.

    But then I noticed that the demo on this site has a working version, but you have not posted the code for it on the page.  For example, type in "ca" in the product combobox and the "Ca" highlights on the two matching items.
    http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx

    Are you able to post the code for the example on the page above so I can see what I may be missing? Cheers :)

    The code i use is as follows.

    Markup

    <!-- Multi-column RadComboBox -->
    <!-- HighlightTemplatedItems property highlights the item row (created by itemtemplate) on mouse hover -->
    <!-- OnClientKeyPressing event opens combobox drop down when text is being typed -->
    <telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="true" Height="170px"
        Width="580px" HighlightTemplatedItems="true" EnableLoadOnDemand="True" Filter="Contains"
        NoWrap="True" ShowMoreResultsBox="True" OnItemsRequested="RadComboBox1_ItemsRequested"
        OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged" OnClientKeyPressing="(function(sender, e) { if (!sender.get_dropDownVisible()) sender.showDropDown(); })">
        <HeaderTemplate>
            <ul>
                <li class="col1">Text Property</li>
                <li class="col2">Value Property</li>
                <li class="col3">InstNumber Attribute</li>
            </ul>
        </HeaderTemplate>
        <ItemTemplate>
            <ul>
                <li class="col1">
                    <%# DataBinder.Eval(Container, "Text")%></li>
                <li class="col2">
                    <%# DataBinder.Eval(Container, "Value")%></li>
                <li class="col3">
                    <%# DataBinder.Eval(Container, "Attributes['InstNumber']")%></li>
            </ul>
        </ItemTemplate>
    </telerik:RadComboBox>

    C#

    protected void RadComboBox1_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
    {
        int recordCount = 0;
        int itemsPerRequest = 100;  // how many items to list in combobox
        int itemOffset = e.NumberOfItems;
        int endOffset = itemOffset + itemsPerRequest;
        string searchValue = e.Text;
      
        // prevent filtering on whitespace
        if (String.IsNullOrWhiteSpace(searchValue))
            searchValue = null;
      
        // get data from database
        InstitutesData records = new InstitutesData();
        records = records.ReadRecordsComboBox(searchValue);
      
        // if there are records
        if (records != null)
        {
            // get count
            recordCount = records.Count;
      
            // add INST_NO to front of INST_NAME (custom functionality)
            for (int i = 0; i < recordCount; i++)
            {
                records[i].INST_NAME = records[i].INST_NO.ToString() + " - " + records[i].INST_NAME;
            }
        }
      
        // ensure offset isnt greater than the number of records available
        if (endOffset > recordCount)
            endOffset = recordCount;
      
        // bind data to combobox
        RadComboBox1.DataTextField = "INST_NAME";    // "123 - Number One School"
        RadComboBox1.DataValueField = "INST_NO";     // 123
        RadComboBox1.DataSource = records;
        RadComboBox1.DataBind();
      
        // populate combobox with items within offsets
        RadComboBox1.Items.Clear();
        for (int i = itemOffset; i < endOffset; i++)
        {
            RadComboBoxItem item = new RadComboBoxItem();
      
            item.Text = records[i].INST_NAME;
            item.Value = records[i].INST_NO.ToString();
            item.Attributes.Add("InstNumber", records[i].INST_NO.ToString());
      
            RadComboBox1.Items.Add(item);
      
            item.DataBind();
        }
      
        // display record count information in results box
        if (recordCount > 0)
        {
            e.Message = String.Format("Items <b>0</b>-<b>{0}</b> out of <b>{1}</b>", endOffset, recordCount);
        }
      
        else
        {
            // display 'no data in database' message
            if (String.IsNullOrEmpty(searchValue))
                e.Message = "No data";
      
            // display 'no matches in database' message
            else
                e.Message = "No matches";
        }
    }
      
    protected void RadComboBox1_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
    {
        // do something when the selected index is changed
        string selectedValue = e.Value;
    }

     

  2. Chuck
    Chuck avatar
    7 posts
    Member since:
    Jan 2013

    Posted 30 Jan 2013 Link to this post

    Hi there

    I have two perfectly working RadComboBoxes - one is single column, the other is a multi-column (using itemtemplate).  Both use LoadOnDemand (ItemsRequested event).

    I noticed that the single column combobox highlights text as the user types, but the same does not happen for the multi-column combobox.  I've set HighlightTemplatedItems="true" but this of course only affects the highlighting of the row, not individual letters.

    I checked the Q3 2010 demos on my system and the replicate this issue.

    But then I noticed that the demo your site has a working version, but you have not posted the code for it on the page.  For example, type in "ca" in the product combobox and the "Ca" highlights on the two matching items.
    http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx

    Are you able to post the code for the demo example on the page above below so I can see what I may be missing?  Cheers :)

    The code below is my current implementation, that works perfectly but does not highlight any letters as you type.


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example_RadComboBoxMultiColumn.aspx.cs"
        Inherits="Mita.Webform.Example_RadComboBoxMultiColumn" %>
      
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .rcbHeader ul, .rcbFooter ul, .rcbItem ul, .rcbHovered ul, .rcbDisabled ul
            {
                width: 100%;
                display: inline-block;
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            .col1, .col2, .col3
            {
                float: left;
                width: 170px;
                margin: 0;
                padding: 0 5px 0 0;
                line-height: 14px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <!-- Multi-column RadComboBox -->
            <!-- HighlightTemplatedItems property highlights the item row (created by itemtemplate) on mouse hover -->
            <!-- OnClientKeyPressing event opens combobox drop down when text is being typed -->
            <telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="true" Height="170px"
                Width="580px" HighlightTemplatedItems="true" EnableLoadOnDemand="True" Filter="Contains"
                NoWrap="True" ShowMoreResultsBox="True" OnItemsRequested="RadComboBox1_ItemsRequested"
                OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged" OnClientKeyPressing="(function(sender, e) { if (!sender.get_dropDownVisible()) sender.showDropDown(); })">
                <HeaderTemplate>
                    <ul>
                        <li class="col1">Text Property</li>
                        <li class="col2">Value Property</li>
                        <li class="col3">InstNumber Attribute</li>
                    </ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <ul>
                        <li class="col1">
                            <%# DataBinder.Eval(Container, "Text")%></li>
                        <li class="col2">
                            <%# DataBinder.Eval(Container, "Value")%></li>
                        <li class="col3">
                            <%# DataBinder.Eval(Container, "Attributes['InstNumber']")%></li>
                    </ul>
                </ItemTemplate>
            </telerik:RadComboBox>
        </div>
        </form>
    </body>
    </html>


    using System;
    using Mita.DAL;
    using Telerik.Web.UI;
      
    namespace Mita.Webform
    {
        public partial class Example_RadComboBoxMultiColumn : System.Web.UI.Page
        {
            protected void RadComboBox1_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
            {
                int recordCount = 0;
                int itemsPerRequest = 100;  // how many items to list in combobox
                int itemOffset = e.NumberOfItems;
                int endOffset = itemOffset + itemsPerRequest;
                string searchValue = e.Text;
      
                // prevent filtering on whitespace
                if (String.IsNullOrWhiteSpace(searchValue))
                    searchValue = null;
      
                // get data from database
                InstitutesData records = new InstitutesData();
                records = records.ReadRecordsComboBox(searchValue);
      
                // if there are records
                if (records != null)
                {
                    // get count
                    recordCount = records.Count;
      
                    // add INST_NO to front of INST_NAME (custom functionality)
                    for (int i = 0; i < recordCount; i++)
                    {
                        records[i].INST_NAME = records[i].INST_NO.ToString() + " - " + records[i].INST_NAME;
                    }
                }
      
                // ensure offset isnt greater than the number of records available
                if (endOffset > recordCount)
                    endOffset = recordCount;
      
                // bind data to combobox
                RadComboBox1.DataTextField = "INST_NAME";    // "123 - Number One School"
                RadComboBox1.DataValueField = "INST_NO";     // 123
                RadComboBox1.DataSource = records;
                RadComboBox1.DataBind();
      
                // populate combobox with items within offsets
                RadComboBox1.Items.Clear();
                for (int i = itemOffset; i < endOffset; i++)
                {
                    RadComboBoxItem item = new RadComboBoxItem();
      
                    item.Text = records[i].INST_NAME;
                    item.Value = records[i].INST_NO.ToString();
                    item.Attributes.Add("InstNumber", records[i].INST_NO.ToString());
      
                    RadComboBox1.Items.Add(item);
      
                    item.DataBind();
                }
      
                // display record count information in results box
                if (recordCount > 0)
                {
                    e.Message = String.Format("Items <b>0</b>-<b>{0}</b> out of <b>{1}</b>", endOffset, recordCount);
                }
      
                else
                {
                    // display 'no data in database' message
                    if (String.IsNullOrEmpty(searchValue))
                        e.Message = "No data";
      
                    // display 'no matches in database' message
                    else
                        e.Message = "No matches";
                }
            }
      
            protected void RadComboBox1_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
            {
                // do something when the selected index is changed
                string selectedValue = e.Value;
            }
        }
    }

  3. Chuck
    Chuck avatar
    7 posts
    Member since:
    Jan 2013

    Posted 31 Jan 2013 Link to this post

    Note: I have edited the topic post with updated code.  Please suggest a solution or post the full code for your demo page.

    Cheers
    Chuck
  4. Chuck
    Chuck avatar
    7 posts
    Member since:
    Jan 2013

    Posted 31 Jan 2013 Link to this post

    Sorry, I never saw the "View Source" at the top right of the outer page.
    http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx

    I'll take a look and post my findings (good or bad). :)
  5. Chuck
    Chuck avatar
    7 posts
    Member since:
    Jan 2013

    Posted 31 Jan 2013 Link to this post

    I've implemented the demo code in my own project but the text does still not highlight in the multi-column combobox, as seen on the live demo.  Can anyone confirm that the demo code works with a DLL newer than Q3 2010?  I believe our team are planning to upgrade but it would be nice to confirm that my code is not at fault but rather it's a fix/feature that was added after Q3 2010.
  6. Answer
    Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 01 Feb 2013 Link to this post

    Hi Chuck,

    This highlighting was introduced for the first time in Q1 2011 and it is not applicable in Q3 2010 or earlier versions. The demo you are looking uses the latest assemblies.

    All the best,
    Hristo Valyavicharski
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top