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

[Andrew Zhao]

 

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>

[Dimitar Milushev]

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.

[Andrew Zhao]

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();
            }
        }

[Kalina]

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