[Solved] Exclude the item ('SELECT ITEM') from the radcombo when MarkFirstMatch is set to true

[Poornima S]

Hi,

I have radcombo box inside a radgrid as,

<rad:PageView ...

<rad:RadGrid ...

<MasterTableView ...

<rad:GridTemplateColumn..

<ItemTemplate>... </ItemTemplate>

<EditItemTemplate>

<rad:RadComboBox ... AllowCustomText="true" MarkFirstMatch="true">

This combobox has a first item as 'SELECT ITEM'. When i type 'S' in the combo box this item is getting selected or shown in the combobox. 

I would like to exclude this item. How to achive this functionality?

Thanks,

Poornima

[Shinu]

Hello Poornima,

Try attaching OnClientItemRequested client-side function to RadComboBox in order to highlight the item explicitly instead of setting the property MarkFirstMatch to True.

ASPX:

<telerik:RadComboBox ID="RadComboBox1" EnableLoadOnDemand="true" runat="server" AllowCustomText="True"
    OnClientDropDownClosing="onDropDownClosing" EmptyMessage="Select" OnClientItemsRequested="onItemsRequested">
    <Items>
        <telerik:RadComboBoxItem runat="server" Text="SELECT ITEM" Value="SELECT ITEM">
        </telerik:RadComboBoxItem>
        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" Value="RadComboBoxItem2">
        </telerik:RadComboBoxItem>
        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" Value="RadComboBoxItem3">
        </telerik:RadComboBoxItem>
    </Items>
</telerik:RadComboBox>

JavaScript:

<script type="text/javascript">
function onItemsRequested(sender, eventArgs)
{
    markFirstMatch(sender, function(item) { if (item) item.highlight(); });
}
function onDropDownClosing(sender, eventArgs)
{
    markFirstMatch(sender, function(item) { if (item) item.select(); });
}
function markFirstMatch(comboBox, action)
{
    action(findFirstMatch(comboBox));
}
function findFirstMatch(comboBox)
{
    var text = comboBox.get_text();
    if (!text) return null;
    var items = comboBox.get_items();
    for (var i = 0, length = items.get_count(); i < length; i++) {
        var item = items.getItem(i);
        if (item.get_text().toLowerCase().indexOf(text) == 0 && item.get_text()!="SELECT ITEM" ) // Checking text of Item
            return item;
    }
}
</script>

Note: Set the EnableLoadOnDemand property to True in order to fire OnItemRequested event.

-Shinu.