How to add a new item text/value into ItemTemplate, or databind in client side?

4 posts, 0 answers
  1. Andrew Zhao
    Andrew Zhao avatar
    11 posts
    Member since:
    Mar 2010

    Posted 25 May 2010 Link to this post

     

    I have a RadComboBox using ItemTemplate to show list of date range, which has two columns, rangName and from-end dates. In footer template, there are two RadDatePicker to select custom from/end date, onDateSelected in toDatePicker client event, the custom from/end date is to add into RadComboBoxItem. However, after added the item, only Item.Text is shown, Item.value can't be shown next to text in itemtemplate. How to add a new item into ItemTemplate, or databind in client side?

     


        function ToDateSelected(sender, eventArgs) {  
            AddCustomPostDt();  
        }  
     
        function AddCustomPostDt() {  
            var combo = $find("<%=RadComboBoxPostDt.ClientID %>");  
            var picker1 = $find('<%=fromDatePicker.ClientID %>');  
            var picker2 = $find('<%=toDatePicker.ClientID %>');  
             
            var fromDate = picker1.get_selectedDate();  
            var toDate = picker2.get_selectedDate();  
     
            if ( fromDate == null ) {              
                return;  
            }  
     
            if (toDate == null) {              
                return;  
            }  
     
            var isExisted = false;  
            var item;  
     
            if (combo.findItemByText("Custom")) {  
                isExisted = true;  
                item = combo.findItemByText("Custom");              
            }  
            else {  
                item = new Telerik.Web.UI.RadComboBoxItem();  
            }  
     
            var desc = fromDate.format("M/dd/yyyy") + " - " + toDate.format("M/dd/yyyy");  
            item.set_value(desc);  
     
            combo.trackChanges();  
            if (!isExisted) {  
                item.set_text("Custom");  
                combo.get_items().add(item);  
            }  
     
            item.select();  
            combo.commitChanges();  
            combo.hideDropDown;  
     
        } 
    <telerik:RadComboBox  
         ID="RadComboBoxPostDt" 
         MarkFirstMatch="True" 
         runat="server" 
         Height="165px" 
         Width="400px" 
         Skin="Default" 
         AutoPostBack="False" 
         HighlightTemplatedItems="True" 
         ShowToggleImage="True"   
         ZIndex="5000" 
         AppendDataBoundItems="true" 
         OnClientSelectedIndexChanged="PostDtCombo_OnClientSelectedIndexChanged" 
         OnClientDropDownClosing="OnClientDropDownClosing">  
         <ItemTemplate> 
          <table style="border-bottom: 1px dotted #EFEFEF; margin-bottom: 6px; font-size: 11px;" width="98%">  
            <tr> 
              <td width="150px">  
                <%# DataBinder.Eval(Container, "Text") %> 
              </td> 
              <td> 
                <%# DataBinder.Eval(Container, "Value") %> 
              </td> 
            </tr> 
          </table> 
        </ItemTemplate> 
        <HeaderTemplate> 
            <table style="border-bottom: 1px dotted #EFEFEF; margin-bottom: 10px; font-size: 11px;" width="98%">  
            <tr> 
                <td> 
                <asp:Label ID="DateRangeLabel" runat="server"><b>Standard:</b></asp:Label> 
                </td> 
            </tr> 
            </table> 
        </HeaderTemplate> 
        <FooterTemplate> 
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
            <ContentTemplate> 
            <table style="border-bottom: 1px dotted #EFEFEF; margin-bottom: 1px; font-size: 11px;" width="98%">  
            <tr> 
                <td> 
                <asp:Label ID="DateRangeLabel" runat="server"><b>Custom:</b></asp:Label> 
                </td> 
            </tr> 
            <tr> 
                <td> 
                <asp:Label ID="DateRangeFromLabel" runat="server" AssociatedControlID="fromDatePicker">&nbsp;From:&nbsp;</asp:Label> 
                <telerik:RadDatePicker ID="fromDatePicker" runat="server"   
                    Width="120px"   
                    BackColor="White"   
                    BorderWidth="0"                   
                    AutoPostBack="false"   
                    ZIndex="8000"   
                    DateInput-EmptyMessage="MM/DD/YYYY" 
                    OnSelectedDateChanged="RadDatePicker_OnSelectedDateChanged">  
                    <ClientEvents OnDateSelected="FromDateSelected" /> 
                </telerik:RadDatePicker> 
                <asp:Label ID="DateRangeToLabel" runat="server" AssociatedControlID="toDatePicker">&nbsp;To:&nbsp;</asp:Label> 
                <telerik:RadDatePicker ID="toDatePicker" runat="server"   
                    Width="120px"   
                    BackColor="White"   
                    BorderWidth="0"   
                    ZIndex="8000" 
                    AutoPostBack="true" 
                    DateInput-EmptyMessage="MM/DD/YYYY" 
                    Enabled="false" 
                    OnSelectedDateChanged="RadDatePicker_OnSelectedDateChanged">  
                    <ClientEvents OnDateSelected="ToDateSelected" /> 
                </telerik:RadDatePicker> 
                </td> 
            </tr> 
            </table> 
            </ContentTemplate> 
            </asp:UpdatePanel> 
        </FooterTemplate> 
    </telerik:RadComboBox> 
     
  2. Dimitar Milushev
    Admin
    Dimitar Milushev avatar
    555 posts

    Posted 28 May 2010 Link to this post

    Hi Andrew,

    The ItemTemplates of RadComboBox are server-side only. There a various reasons for this (templates can contain server control, complex data-binding logic, etc.) and if you want to use ItemTemplates, you should add the items server-side. You can use RadAjaxManager or a RadAjaxPanel to turn the postbacks into AJAX updates for better performance.

    Best wishes,
    Dimitar Milushev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Andrew Zhao
    Andrew Zhao avatar
    11 posts
    Member since:
    Mar 2010

    Posted 11 Jun 2010 Link to this post

    I tried to add new item when RadDatePicker_OnSelectedDateChanged, and then call DataBind. The new item is created in combo list, however, it does not take the ItemTemplate format, instead, only show the Item.Text. I want to show new item's text/value in the format of ItemTemplate. Please advise how to bind new item with ItemTemplate.
            protected void RadDatePicker_OnSelectedDateChanged( object sender, EventArgs e )  
            {  
                RadDatePicker fromDate = ( RadDatePicker )RadComboBoxPostDt.Footer.FindControl( "fromDatePicker" );  
                RadDatePicker toDate = ( RadDatePicker )RadComboBoxPostDt.Footer.FindControl( "toDatePicker" );  
     
                if ( fromDate.SelectedDate != null && toDate.SelectedDate != null )  
                {  
                    UpdateCustomPostDtRange( ( DateTime )fromDate.SelectedDate, ( DateTime ) toDate.SelectedDate );  
                }  
            }  
            private void UpdateCustomPostDtRange( DateTime fromDate, DateTime toDate )  
            {  
                CriteriaToken<DateTime> customDt = null;  
                bool hasCustom = StandarDateRanges.ContainsKey( "Custom" );  
                if ( hasCustom == true )  
                {  
                    customDt = (CriteriaToken<DateTime>) StandarDateRanges["Custom"];  
                    if ( customDt == null )  
                    {  
                        customDt = new CriteriaToken<DateTime>();  
                        customDt.FieldName = "PostDt";  
                        customDt.Operator = "Between";  
                    }  
     
                    if ( fromDate != null )  
                    {  
                        customDt.Value = fromDate;  
                    }  
     
                    if ( toDate != null )  
                    {  
                        customDt.ToValue = toDate;  
                    }  
     
                    m_standardDateRanges[ "Custom" ] = customDt;  
                }  
                else  
                {  
                    if ( fromDate != null && toDate != null )  
                    {  
                        //Add custom into ranges  
                        customDt = new CriteriaToken<DateTime>( "PostDt", "Between", fromDate, toDate );  
                        m_standardDateRanges.Add( "Custom", customDt );  
                    }  
                }  
     
                StandarDateRanges = m_standardDateRanges;  
     
                //Add custom into dropdown list  
                string itemValue = fromDate.ToShortDateString() + " - " + toDate.ToShortDateString();  
                RadComboBoxItem item = new RadComboBoxItem( "Custom", itemValue );  
                RadComboBoxPostDt.Items.Add( item );  
     
                PostDateToken = customDt;  
                BindPostDtData();  
            }  
            private void BindPostDtData()  
            {  
                //Bind data to RadComboBox  
                for ( int i = 0; i < RadComboBoxPostDt.Items.Count; i++ )  
                {  
                    RadComboBoxPostDt.Items[ i ].DataBind();  
                }             
            } 
  4. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 17 Jun 2010 Link to this post

    Hello Andrew Zhao,

    I tried to use the code snippets that you provided to create a sample page and replicate the issue on our side but unfortunately without success.

    However I created a basic sample to illustrate the approach of adding RadComboBoxItems server-side and make it easier for you to implement similar logic at your application.
    If the issue persists - could you please provide us the full code of your page?

    Feel free to contact us if you have additional questions.

    All the best,
    Kalina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top