Close Radcombox listitem?

[Guillaume]

I use a Radcombobox integrated in a RadListView. (Made from Example Binary image / FirstLook (http://demos.telerik.com/aspnet-ajax/binaryimage/examples/default/defaultcs.aspx)

I tried to use javascript to close the list, but an error occurs when I search the component ID.

JavaScript code:
 function OnClientNodeClickedHandler (sender, e) {
var comboBox = $ find ("<%= ReportsListItems.ClientID %>");
var node = e.get_node ();
if (! node.get_enabled ()) return;
comboBox.set_text (node.get_text ());
comboBox.trackChanges ();
comboBox.get_items (). getItem (0). set_value (node.get_value ());
comboBox.commitChanges ();
comboBox.hideDropDown ();
}

The error message:
Compiler Error Message: BC30451: 'ReportsListItems' is not declared. It may be inaccessible due to its protection level.
I understand that each control must have a unique ID, but then!
How do I manage the closure of the list after selecting an item?

Preview Code:
 

<%

 

@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="general.master" CodeBehind="reportsList.aspx.vb" Inherits=".ReportsList" uiCulture="Auto" Culture="Auto" %>

<%

 

@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<

 

 

asp:Content ID="Content1" ContentPlaceHolderID="Content2" runat="Server">

</

 

 

asp:Content>

<

 

 

asp:Content ID="Content2" ContentPlaceHolderID="OEEDirectContent" runat="server">

 

<script type="text/javascript">

 

function showingMenu(sender, args) {

 

//Disable the menu on the category image

 

if (args.get_targetElement().id == "RadListView1") {

args.set_cancel(

 

true);

}

}

 

function OnClientNodeClickedHandler(sender, e) {

 

var comboBox = $find("<%= ReportsListItems.ClientID %>");

 

var node = e.get_node();

 

if (!node.get_enabled()) return;

comboBox.set_text(node.get_text());

comboBox.trackChanges();

comboBox.get_items().getItem(0).set_value(node.get_value());

comboBox.commitChanges();

comboBox.hideDropDown();

}

 

</script>

 

<div>

 

<div class="Contents">

 

<telerik:RadFormDecorator runat="server" id="radFormDecorator" DecoratedControls="All" />

 

<telerik:RadListView id="RadListView1" runat="server" datasourceid="SqlDataSource1"

 

ItemPlaceholderID="ListViewContainer" >

 

<LayoutTemplate>

 

<asp:PlaceHolder runat="server" id="ListViewContainer" />

 

</LayoutTemplate>

 

<ItemTemplate>

 

<fieldset id="fieldset" style="float: left; width: 230px; height: 150px; border-style:solid; border-width:1px; border-color:#008080; ">

 

<legend>

 

<b><font size="3"><%# Eval("category")%></font></b></legend>

 

<div class="details">

 

<asp:HiddenField ID="HideF" runat="server" Value= '<%# Eval("id_category")%>'/>

 

<div class="photo-container">

 

<telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%#Eval("image_value") %>'

 

AutoAdjustImageControlSize="false" Width="55px" Height="55px"

 

AlternateText='<%#Eval("category", "Categorie {0}") %>' />

 

</div>

 

<div class="data-container">

 

<div class="data_leftitem" title="<%# Eval("descript")%>">

 

<label>Description:</label><br><%# Eval("descript")%>

 

</div>

 

<div class="data_bottomitem">

 

<label><strong>Rapports </strong><note>(<%# Eval("nbReports")%>):</note></label>

 

<telerik:RadComboBox

 

runat="server"

 

ID= "ReportsListItems"

 

OnClientNodeClicked="OnClientNodeClickedHandler"

 

AllowCustomText="false"

 

skin="Windows7"

 

AutoPostBack="True"

 

datafieldvalue="id_Report" datatextfield="Reporttitle"

 

DataSourceID="SqlDataSource2"

 

Width="215px"

 

ImageUrl="images/report.png"

 

EmptyMessage="">

 

<ItemTemplate>

 

<div>

 

<asp:Image runat="server" ImageUrl="images/report2.png" Width="18" Height="18" />

 

<asp:Label runat="server" ID="Label1">

 

<asp:HyperLink id="hyperlink1"

 

DataNavigateUrlFields="id_Report"

 

DataNavigateUrlFormatString="viewreports.aspx?id={0}"

 

NavigateUrl='<%#"viewreport.aspx?ID=" + EVAL("id_Report").tostring %>'

 

Text='<%# Eval("Reporttitle") %>'

 

Target="_blank"

 

runat="server"/>

 

</asp:Label>

 

</div>

 

</ItemTemplate>

 

</telerik:RadComboBox>

 

<br />

 

<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:TF5100ConnectionString %>"

 

SelectCommand="SELECT Reporttitle, id_Report FROM report where id_category=@param and isReport =1">

 

<selectparameters>

 

<asp:controlparameter name="param" controlid="HideF" PropertyName="Value"/>

 

</selectparameters>

 

</asp:SqlDataSource>

 

</div>

 

</div>

 

</div>

 

</fieldset>

 

</ItemTemplate>

 

</telerik:RadListView>

 

</div>

 

<div style="clear: both;">

 

</div>

 

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TF5100ConnectionString %>"

 

SelectCommand="SELECT * FROM (SELECT DISTINCT rc.id_category, rc.category, rc.descript, rc.image_value, (Select ri.num_order from ReportCategory ri where id_category = rc.id_category ) as num, (SELECT COUNT(id_category) FROM Report WHERE id_category = rc.id_category AND isReport= 1) as nbReports FROM ReportCategory rc INNER JOIN Report ON rc.id_category = Report.id_category WHERE (rc.category <> '')) as tbl WHERE nbReports >0 ORDER BY num ">

 

</asp:SqlDataSource>

 

</div>

</

 

 

asp:Content>

Thank you for your help

[Shinu]

Hello Guillaume,

Since the ReportsListItems is in side the RadListBox ItemTemplate, It is not directly available on the page. For accessing the the the control you need to access the ListView first and then the control.

Hope this helps.

Thanks,
Shinu.

[Guillaume]

hello Shinu!

As you said to me, I tried to gain control ReportsListItems located in the template.
So I changed the javascript function as follows

function OnClientNodeClickedHandler(sender, args) {
    var rlist= $find("<%= RadListView1.ClientID %>");
    var comboBox = rlist.get_items().getItem(0).findControl("ReportsListItems");
    var node = args.get_node()
    comboBox.set_text(node.get_text());
    comboBox.trackChanges();
    comboBox.get_items().getItem(0).set_text(node.get_text());
    comboBox.commitChanges();
    comboBox.hideDropDown();
}

But no results! (Even just putting the code alert ("click") in the function)

Maybe I do not use the right event?

In my case I use this one:
OnClientNodeClicked = "OnClientNodeClickedHandler"

Thank you for the info anyway!    
I continue to seek
G

[Dimitar Terziev]

Hello Guillaume,

The reason for the problem you are experiencing is due to the fact that the RadComboBox doesn't have "OnClientNodeClicked" client-side event.

If you want to close the drop-down of the RadCombobox after an item is selected you should subscribe on the client-side OnClientSelectedIndexChanged event and use the following implementation of the event handler function:

function OnClientSelectedIndexChanged(sender, args) {

    sender.set_text(args.get_item().get_text());
    sender.trackChanges();
    sender.get_items().getItem(0).set_text(args.get_item().get_text());
    sender.commitChanges();
    sender.hideDropDown();
}

Greetings,
Dimitar Terziev
the Telerik team