RadCombo will not load in updatepanel unless user type in a searcch string

3 posts, 0 answers
  1. Quynh
    Quynh avatar
    12 posts
    Member since:
    Sep 2011

    Posted 13 Sep 2011 Link to this post

    Hi, I have this Radcombo with checkbox itemtemplate,  without any update panel it works perfectly as I wanted.
    But if I add the update pannels in it won't load anymore unless user type in something on the radcombox box
    Is there anyway to work around this. I need it to load without have to wait for user to type in a search string
    and I also need the loadondemand because it is a huge amount of data to load to the radcombo
    Thanks,
    Quynh
    Default.aspx
    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeBehind="Default.aspx.cs" Inherits="RadCombo._Default" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
        <style type="text/css">
            table
            {
                border-collapse: collapse;
            }
            table tr, td
            {
                padding: 3px;
            }
        </style>
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <asp:ObjectDataSource ID="PatientDS" runat="server" SelectMethod="GetPatient" 
            TypeName="RadCombo.DB"  >
                                    <SelectParameters>
                                        <asp:ControlParameter Name="Study" ControlID="ddlStudy" Type="String" DefaultValue="%" />
                                        <asp:ControlParameter Name="Site" ControlID="ddlSite" Type="String" DefaultValue="%" />
                                    </SelectParameters>
                                </asp:ObjectDataSource>
          
        <div>
              
              
            <table>
                <tr>
                    <td>
                        Study
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlStudy" runat="server" Width="500px" AutoPostBack="true"
                            OnSelectedIndexChanged="ddlStudy_SelectedIndexChanged">
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>
                        Site
                    </td>
                    <td>
                        <asp:UpdatePanel ID="updatePanel1" runat="server">
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="ddlStudy" EventName="SelectedIndexChanged" />
                            </Triggers>
                            <ContentTemplate>
                                <asp:DropDownList ID="ddlSite" runat="server" Width="500px" AutoPostBack="true"
                                    >
                                </asp:DropDownList>
                                  
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </td>
                </tr>
                <tr>
                    <td style="height: 130px;" valign="top">
                        Patient<br />
                        <asp:CheckBox ID="cbPatientAll" runat="server" Text="Check All" />
                    </td>
                    <td valign="top">
                        <asp:UpdatePanel ID="updatePanel2" runat="server">
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="ddlStudy" EventName="SelectedIndexChanged" />
                                <asp:AsyncPostBackTrigger ControlID="ddlSite" EventName="SelectedIndexChanged" />
                            </Triggers>
                            <ContentTemplate>
                                <telerik:RadComboBox ID="cblPatient" runat="server" Skin="Office2007" DataSourceID="PatientDS"
                                    EmptyMessage="All Patients" DataTextField="TEXT" DataValueField="VALUE" ShowMoreResultsBox="true"
                                    ItemsPerRequest="250" LoadingMessage="Retrieving Patients" EnableAutomaticLoadOnDemand="true"
                                    Filter="Contains" MaxHeight="100px" Height="100px" AllowCustomText="false" OnItemDataBound="CB1_ItemDataBound"
                                    HighlightTemplatedItems="False" Width="300px" OpenDropDownOnLoad="true" OnClientDropDownClosing="onDropDownClosing"
                                    OnDataBound="CB1_DataBound">
                                    <ItemTemplate>
                                        <div onclick="StopPropagation(event)">
                                            <asp:CheckBox runat="server" ID="chk1" />
                                            <asp:Label runat="server" ID="label1" AssociatedControlID="chk1"><%# DataBinder.Eval(Container, "Text") %></asp:Label>
                                        </div>
                                    </ItemTemplate>
                                    <CollapseAnimation Duration="200" Type="OutQuint" />
                                      
                                </telerik:RadComboBox>
                                  
                                <asp:HiddenField ID="HV1" runat="server" />
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </td>
                </tr>
            </table>
        </div>
        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
        <script type="text/javascript">
            // NOTE - these two functions can be moved to the page
            function StopPropagation(e) {
                //cancel bubbling 
                e.cancelBubble = true;
                if (e.stopPropagation) {
                    e.stopPropagation();
                }
            }
      
            function onDropDownClosing(sender, eventArgs) {
                eventArgs.set_cancel(true);
            }
            function allchecked(box) {
                var combo = $find(box);
                var items = combo.get_items();
                for (var i = 0; i < items.get_count(); i++) {
                    var item = items.getItem(i);
                    var chk1 = $get(combo.get_id() + '_i' + i + '_chk1');
                    if (!chk1.checked) return false;
                }
                return true;
            }
            function onCheckBoxClick(me) {
                var cb = $("#<%=cbPatientAll.ClientID%>");
                cb.attr('checked', allchecked('<%=cblPatient.ClientID%>'));
      
                var chk1 = $get(me.id);
                var i = me.id.replace("<%=cblPatient.ClientID%>", "").replace("_chk1", "").replace("_i", "");
                //alert(i);
                var combo = $find('<%=cblPatient.ClientID%>');
                var items = combo.get_items();
                var item = items.getItem(i);
                var keepValue = $("#<%=HV1.ClientID %>").val();
                if (chk1.checked) {
                    keepValue += item.get_value() + ',';
      
                }
                else {
                    keepValue = keepValue.replace(item.get_value() + ',', '');
                }
                $("#<%=HV1.ClientID %>").val(keepValue);
            }
            $(document).ready(function () {
                $("#<%= cbPatientAll.ClientID %>").click(function (event) {
                    var keepValue = "";
                    var combo = $find('<%=cblPatient.ClientID%>');
                    var items = combo.get_items();
                    for (var i = 0; i < items.get_count(); i++) {
                        var item = items.getItem(i);
                        var chk1 = $get(combo.get_id() + '_i' + i + '_chk1');
                        chk1.checked = $('#' + this.id).is(':checked');
                        if ($('#' + this.id).is(':checked')) {
                            keepValue += item.get_value() + ',';
                        }
                    }
                    $("#<%=HV1.ClientID %>").val(keepValue);
      
                });
      
            });
            function pageLoad(sender, args) {
                $("#<%= ddlSite.ClientID %>").change(function () {
                    //var combo = $find('<%=cblPatient.ClientID%>');
                    //combo.clearItems();
                    //combo.requestItems(' ', false);
      
                });
      
            }
              
      
      
        </script>
    </asp:Content>
      
    Default.aspx.cs
    using System;
    using System.Text;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    namespace RadCombo
    {
        public partial class _Default : System.Web.UI.Page
        {
            private string Delimiter = ",";
            private DB myDBProc = new DB(); //DBProcessing Class Library
             
            protected void Page_Load(object sender, EventArgs e)
            {
      
                if (!this.IsPostBack)
                {
      
                    myDBProc.GetStudy(ddlStudy);
                }
      
      
            }
            protected void CB1_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
            {
                (e.Item.FindControl("chk1") as CheckBox).Attributes["onclick"] = "onCheckBoxClick(this)";
                if (HV1.Value.Contains(e.Item.Value)) (e.Item.FindControl("chk1") as CheckBox).Checked = true;
            }
            protected void CB1_DataBound(object sender, EventArgs e)
            {
                HV1.Value = "";
                StringBuilder sbValues = new StringBuilder();
                foreach (Telerik.Web.UI.RadComboBoxItem rcbItem in cblPatient.Items)
                {
                    //If the box is checked return a value
                    CheckBox cb = (CheckBox)rcbItem.FindControl("chk1");
                    if (null != cb && cb.Checked)
                    {
                        sbValues.Append(rcbItem.Value);
                        sbValues.Append(Delimiter);
                    }
                }
      
                HV1.Value = sbValues.ToString();
      
            }
      
            protected void btnExecute_Click(object sender, EventArgs e)
            {
                string test = HV1.Value;
            }
            protected void ddlStudy_SelectedIndexChanged(object sender, EventArgs e)
            {
                myDBProc.GetSite(ddlSite, ddlStudy.SelectedValue);
            }
        }
    }
      
    DB.cs
    sing System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Data;
    using System.Web.UI.WebControls;
    namespace RadCombo
    {
        public class DB
        {
            public void GetStudy( DropDownList list)
            {
      
                DataTable dt = new DataTable();
                dt.Columns.Add( new DataColumn("VALUE", typeof(int)));
                dt.Columns.Add(new DataColumn("TEXT", typeof(string)));
                DataRow dr = dt.NewRow();
                dr["Value"] = 1;
                dr["TEXT"] = "One";
                dt.Rows.Add(dr);
                list.DataValueField = dt.Columns["VALUE"].ColumnName;
                list.DataTextField = dt.Columns["TEXT"].ColumnName;
                list.DataSource = dt;
                list.DataBind();
                list.Items.Insert(0, new ListItem("Select a Study", ""));
            }
            public void GetSite( DropDownList list, string Study)
            {
                  
                if (string.IsNullOrEmpty(Study) || Study == "%")
                {
                    list.Items.Clear();
                    return;
                }
      
                DataTable dt = new DataTable();
                dt.Columns.Add(new DataColumn("VALUE", typeof(int)));
                dt.Columns.Add(new DataColumn("TEXT", typeof(string)));
                DataRow dr = dt.NewRow();
                dr["Value"] = 11;
                dr["TEXT"] = "Eleven";
                dt.Rows.Add(dr);
                list.DataValueField = dt.Columns["VALUE"].ColumnName;
                list.DataTextField = dt.Columns["TEXT"].ColumnName;
                list.DataSource = dt;
                list.DataBind();
                list.Items.Insert(0, new ListItem("All Sites", "%"));
                list.Items.Insert(0, new ListItem("Select a Site", ""));
            }
            public DataTable GetPatient(string Study, string Site)
            {
      
                if (string.IsNullOrEmpty(Study) || Study == "%" || string.IsNullOrEmpty(Site))
                {
      
                     
                    return new DataTable();
                }
                DataTable dt = new DataTable();
                dt.Columns.Add(new DataColumn("VALUE", typeof(int)));
                dt.Columns.Add(new DataColumn("TEXT", typeof(string)));
                DataRow dr = dt.NewRow();
                dr["Value"] = 100;
                dr["TEXT"] = "One Hundred";
                dt.Rows.Add(dr);
                dr = dt.NewRow();
                dr["Value"] = 101;
                dr["TEXT"] = "One Hundred And One";
                dt.Rows.Add(dr);
                dr = dt.NewRow();
                dr["Value"] = 102;
                dr["TEXT"] = "One Hundred And Two";
                dt.Rows.Add(dr);
      
                 
                return dt;
            }
        }
          
      
    }
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 14 Sep 2011 Link to this post

    Hello Quynh,

    I've already answered to your support ticket regarding this issue, so lets continue the discussion there.

    Best wishes,
    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
  3. Quynh
    Quynh avatar
    12 posts
    Member since:
    Sep 2011

    Posted 16 Sep 2011 Link to this post

    hi, to whom interested in this post. the solution they gave me is on the telerik comnobox add OnClientLoad="OnClientLoad"
    and on client javascript add

    function OnClientLoad(sender) {

     

        setTimeout(function () { sender.requestItems(""); }, 0);

       }


    It will try to requestItems on every load, but it seems the way for now

    Regards,
    Quynh
Back to Top