This is a migrated thread and some comments may be shown as answers.

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

3 Answers 123 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Andrew Zhao
Top achievements
Rank 1
Andrew Zhao asked on 25 May 2010, 07:48 PM

 

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> 
 

3 Answers, 1 is accepted

Sort by
0
Dimitar Milushev
Telerik team
answered on 28 May 2010, 12:22 PM
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.
0
Andrew Zhao
Top achievements
Rank 1
answered on 11 Jun 2010, 10:35 PM
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();  
            }             
        } 
0
Kalina
Telerik team
answered on 17 Jun 2010, 02:49 PM
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
Tags
ComboBox
Asked by
Andrew Zhao
Top achievements
Rank 1
Answers by
Dimitar Milushev
Telerik team
Andrew Zhao
Top achievements
Rank 1
Kalina
Telerik team
Share this question
or