This is a migrated thread and some comments may be shown as answers.

Text highlight in multi-column combobox

5 Answers 228 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Chuck
Top achievements
Rank 1
Chuck asked on 30 Jan 2013, 03:45 AM

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;
}

 

5 Answers, 1 is accepted

Sort by
0
Chuck
Top achievements
Rank 1
answered on 30 Jan 2013, 10:32 PM
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;
        }
    }
}

0
Chuck
Top achievements
Rank 1
answered on 31 Jan 2013, 08:37 PM
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
0
Chuck
Top achievements
Rank 1
answered on 31 Jan 2013, 08:53 PM
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). :)
0
Chuck
Top achievements
Rank 1
answered on 31 Jan 2013, 09:55 PM
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.
0
Accepted
Hristo Valyavicharski
Telerik team
answered on 01 Feb 2013, 03:04 PM
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.
Tags
ComboBox
Asked by
Chuck
Top achievements
Rank 1
Answers by
Chuck
Top achievements
Rank 1
Hristo Valyavicharski
Telerik team
Share this question
or