Close Radcombox listitem?

4 posts, 0 answers
  1. Guillaume
    Guillaume avatar
    3 posts
    Member since:
    Jun 2011

    Posted 16 Jun 2011 Link to this post

    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

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Jun 2011 Link to this post

    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.
  3. Guillaume
    Guillaume avatar
    3 posts
    Member since:
    Jun 2011

    Posted 22 Jun 2011 Link to this post

    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
  4. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 25 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top