Add new records within RadCombobox

[Robert Jakech]

Hi,

Can someone please help with a code snippet where i can add new records from within RadCombobox?

I have a radcombobox through which i fill it with list of Countries.

I want to be able to add more countries within the combobox.

When i dropdown the country list and a particular country is not there, i want to be able to add it from the RadCombobox WITHOUT navigating to another page.

thanks.

[Princy]

Hi Robert,

Set the AllowCustomText property of RadComboBox to True if you want the user to type new item in the combobox, and retrieve the typed text using "RadComboBox1.Text" property. Then you can add the new item to your db by using SQL query.

Also checkout the following demo which demonstrates how to add new item to RadComboBox.
Add/Remove/Disable Items

Thanks,
Princy.

[Robert Jakech]

Hi Princy,

Thanks for the help.

However, what i want is a scenario where i dropdown the combo, and at the bottom of the combo('after the last record') i could have a button or something, where i can click to bring up a telerik popup/tooltip in which i can add new records.

Take a scenario where i want to add CountryID and CountryName.

Thanks.

[Veronica]

Hello Robert Jakech,

The solution is to add FooterTemplate with a TextBox and Button like this:

<telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="Vista">
            <FooterTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Add Country" OnClick="Button1_Click" />
            </FooterTemplate>
            <Items>
                <telerik:RadComboBoxItem runat="server" Text="Bulgaria" Value="Bulgaria" />
                <telerik:RadComboBoxItem runat="server" Text="USA" Value="USA" />
                <telerik:RadComboBoxItem runat="server" Text="Germany" Value="Germany" />
                <telerik:RadComboBoxItem runat="server" Text="India" Value="India" />
                <telerik:RadComboBoxItem runat="server" Text="Canada" Value="Canada" />
            </Items>
        </telerik:RadComboBox>

Here's the code-behind:

protected void Button1_Click(object sender, EventArgs e)
   {
       TextBox txt = (TextBox)RadComboBox1.Footer.FindControl("TextBox1");
       if ((!String.IsNullOrEmpty(txt.Text))&&(RadComboBox1.FindItemByText(txt.Text) == null))
       {
           RadComboBox1.Items.Insert(0, new RadComboBoxItem(txt.Text));
           RadComboBox1.SelectedIndex = 0;
           txt.Text = String.Empty;
       }
   }

You can use a RequiredFieldValidator to show an appropriate message if the Text of the TextBox is empty and prevent the addition of an already existing item.

Find the full code in the attached .zip file.

Kind regards,
Veronica Milcheva
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.

[Robert Jakech]

Thank you very much Vero.

Yo have no idea how many days of sleepless nights you have chopped...7 days.

7 days.

thanks.

Robert.

[Veronica]

Hi Robert Jakech,

Thanks for the good words Rob.

Feel free to write us each time you have a problem with our products. This will save you from unnecessary headaches in the future.

Regards,

Veronica Milcheva

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.

[Mike]

I have tried using the method you have outlined above Veronica but my RadComboBox is inside a FormTemplate inside a RadGrid and I can't get reference to it at all, What is the correct way to do this as per your code here:

protected void Button1_Click(object sender, EventArgs e)
   {
       TextBox txt = (TextBox)RadComboBox1.Footer.FindControl("TextBox1");
       if ((!String.IsNullOrEmpty(txt.Text))&&(RadComboBox1.FindItemByText(txt.Text) == null))
       {
           RadComboBox1.Items.Insert(0, new RadComboBoxItem(txt.Text));
           RadComboBox1.SelectedIndex = 0;
           txt.Text = String.Empty;
       }
   }

Thanks for any help here

[Mike]

Hi again,

I have been working on this for many days now and am at wits end trying to get the example you provided Veronica to work within a FormTemplate inside a RadGrid. 

I have another thread asking the wider community for any help on this:

Urgent: Help with adding new items to sql server database inside a RadComboBox

I want to enable users to enter a new url into a radcombobox if it doesn't exist in the list already. I have the following markup in my grid <FormTemplate> which pulls its data from a table named tblUrls:

<telerik:RadComboBox ID="UrlComboBox"
                     runat="server"
                     HighlightTemplatedItems="true"
                     AllowCustomText="true"
                     Skin="Windows7"
                     Width="365px"
                     Height="150px"
                     DataSourceID="UrlDataSource"
                     DataTextField="Url"
                     DataValueField="Url"
                     SelectedValue='<%# Bind("Url") %>'
                     AppendDataBoundItems="true">

<Items>
        <telerik:RadComboBoxItem Text="[Not Defined]" Value="" />
    </Items>
    <FooterTemplate>
        <telerik:RadTextBox ID="tbNewUrl" runat="server" Skin="Windows7" EmptyMessage="Add a new Url here..."/>
        <br />
        <asp:Button ID="AddUrlBtn" runat="server" Text="Add Url" OnClick="AddUrlBtn_Click" />
    </FooterTemplate>

</telerik:RadComboBox>

I have tried getting access to the tbNewUrl radtextbox inside the RadComboBox in the c# code behind to no avail. I need the AddUrlBtn_Click to save whatever value is put in by the user to the database when the grid is in insert or edit mode. I have the database INSERT code already worked out but getting access to the RadComboBox and the newly inputted url data is proving to be a real pain.

I have tried:

protected void AddUrlBtn_Click(object sender, EventArgs e)
{
    TextBox Urltxt = (TextBox)UrlComboBox.Footer.FindControl("tbNewUrl");

if ((!String.IsNullOrEmpty(Urltxt.Text))&&(UrlComboBox.FindItemByText(Urltxt.Text) == null))
    {
        UrlComboBox.Items.Insert(0, new RadComboBoxItem(Urltxt.Text));
        UrlComboBox.SelectedIndex = 0;
        Urltxt.Text = String.Empty;
    }
}

I have also tried:

TextBox AddUrlText = (TextBox)this.Page.Master.FindControl("ContentPlaceHolder").FindControl("tbNewUrl");

The grid is ajaxified too but when I click the AddUrlBtn in its current condition the page does a full postback as well whilst in insert/edit mode which is undesirable.

Would you be so kind as to provide a sample project that demonstrates how to get access to the RadTextbox and also how to NOT have a full page postback when a user clicks the AddUrlBtn and the grid is in edit or insert mode. I just need the new url added to the RadComboBox for the user to select from and in the code behind this new value gets added to the table in the sql database.

Any help with this would be greatly appreciated so I can move on with this project.

Thanks in advance for any help :)

[Veronica]

Hi Grant,

You cannot directly access RadComboBox when it is in RadGrid. You need to use the NamingContainer property as in the code below:

protected void AddUrlBtn_Click(object sender, EventArgs e)
    {
        Button butt = sender as Button;
        RadTextBox Urltxt = (RadTextBox)butt.NamingContainer.FindControl("tbNewUrl");
        RadComboBox UrlComboBox = (RadComboBox)butt.NamingContainer.Parent;

        if (!String.IsNullOrEmpty(Urltxt.Text))
        {
            UrlComboBox.Items.Insert(1, new RadComboBoxItem(Urltxt.Text));
            UrlComboBox.SelectedIndex = 0;
            Urltxt.Text = String.Empty;
        }
    }

This will work either when RadComboBox is in EditItemTemplate or in FormTemplate.

I've created a sample project to show you the solution. In my project the RadComboBox is located in an EditItemTemplate.

Find the code in the attached .zip file.

Hope this helps.

Regards,
Veronica Milcheva
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.

[Mike]

Thank you Veronica for your help here. I can now get access to the right controls. However I am getting the following error when adding the URL.

Error Message:Insertion index was out of range. Must be non-negative and less than or equal to size.

Parameter name: index

I have removed the following from the code I provided so there is nothing set as default in the list as I don't want this value stored in the DB, I want it left as NULL if nothing is entered when I update or insert the record back to the DB as this is optional:

<Items>

     <telerik:RadComboBoxItem Text="[Not Defined]" Value="" Selected="True" />

</Items>

When I leave this item there, I don't get an error but also the radcombobox does not update with the newly added url either. I don't understand what is going on here, but as mentioned it is in an ajaxified grid.

How can I fix this error?

I also tried ajaxifying the ComboBox and then I get the following error:

Error Message:Script control 'tbNewurl' is not a registered script control. Script controls must be registered using RegisterScriptControl() before calling RegisterScriptDescriptors().

Parameter name: scriptControl

Many thanks for you assistance

[Mike]

Any ideas here please? Here is my latest code, it has changed a little and all I need is to be able to ajaxify the RadComboBox inside the EditFormTemplate. This is proving to be a real pain. I have managed to get the adding and removing of items from the combo to work in the code behind but it is doing a full page postback whilst in the middle of editing when one of the buttons is clicked, which is not desirable at all.

CODE:

<telerik:RadGrid>

....

<MasterTableView ...>

....

<EditFormSettings EditFormType="Template">

<FormTemplate>

....

<fieldset id="fsSales" style="border: 1px solid #999999; padding-right:5px; padding-bottom:5px; padding-left:5px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; font-weight: bold;">

<legend style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #666666; font-weight: bold">Sales Information</legend><br />

<telerik:RadComboBox ID="SLurlComboBox"

runat="server"

AllowCustomText="true"

AppendDataBoundItems="true"

DataSourceID="SLurlDataSource"

DataTextField="SLurl"

DataValueField="SLurl"

EmptyMessage="Select or Add SLurl here..."

Height="150px"

HighlightTemplatedItems="true"

SelectedValue='<%# Bind("SLurl") %>'

Skin="Windows7"

TabIndex="12"

Width="400px">

<FooterTemplate>

<telerik:RadTextBox ID="tbNewSLurl" runat="server" EmptyMessage="Add a new SLurl here..." Skin="Windows7" Width="380px" />

<br />

<asp:Button ID="AddSLurlBtn" runat="server" Font-Bold="True" Font-Names="Arial,Helvetica,sans-serif" ForeColor="#339933" OnClick="AddSLurlBtn_Click" Text="Add SLurl" />

<asp:Button ID="RemoveSLurlBtn" runat="server" Font-Bold="True" Font-Names="Arial,Helvetica,sans-serif" ForeColor="#CC0000" OnClick="RemoveSLurlBtn_Click" Text="Remove SLurl" />

</FooterTemplate>

</telerik:RadComboBox>

</fieldset>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

<<.cs Code behind>>

protected void AddSLurlBtn_Click(object sender, EventArgs e)

{

Button butt = sender as Button;

RadTextBox SLUrltxt = (RadTextBox)butt.NamingContainer.FindControl("tbNewSLurl");

RadComboBox SLurlComboBox = (RadComboBox)butt.NamingContainer.Parent;

if (!String.IsNullOrEmpty(SLUrltxt.Text))

{

SLurlComboBox.Items.Insert(1, new RadComboBoxItem(SLUrltxt.Text));

// insert/update DB

StringBuilder sb = new StringBuilder();

//sql insert statement

sb.Append("INSERT INTO tblSLurl (UserId, SLurl) VALUES (");

sb.Append(" '" + DataReformatter.FormatStringForDb(this.HelperFunctions1.LoggedInUserId) + "'");

if (SLUrltxt.Text.ToString().Trim() != string.Empty)

{

sb.Append(", '" + DataReformatter.FormatStringForDb(SLUrltxt.Text.ToString()) + "'");

}

sb.Append(")");

IDbAccessor dataAccessor = ApplicationDb.AppDbAccessor();

dataAccessor.UpdateDb(sb.ToString(), "admin");

SLurlComboBox.SelectedIndex = 0;

SLUrltxt.Text = String.Empty;

}

}

protected void RemoveSLurlBtn_Click(object sender, EventArgs e)

{

Button butt = sender as Button;

RadTextBox SLUrltxt = (RadTextBox)butt.NamingContainer.FindControl("tbNewSLurl");

RadComboBox SLurlComboBox = (RadComboBox)butt.NamingContainer.Parent;

if (SLurlComboBox.SelectedItem != null)

{

// insert/update DB

StringBuilder sb = new StringBuilder();

//sql delete statement

WebLogic.DataAccess.IDbAccessor dataAccessor = WebLogic.DataAccess.ApplicationDb.AppDbAccessor();

string sql = "DELETE FROM tblSLurl WHERE SLurl = '" + SLurlComboBox.SelectedItem.Text + "' AND UserId = '" + DataReformatter.FormatStringForDb(this.HelperFunctions1.LoggedInUserId) + "'";

dataAccessor.UpdateDb(sql, "");

SLurlComboBox.SelectedItem.Remove();

}

}

Everytime I try to ajaxify the combo it seems to be doing a partial postback but no loadingpanel is visible e.g. when using this:

<telerik:AjaxSetting AjaxControlID="AddSlurlBtn">

    <UpdatedControls>

          <telerik:AjaxUpdatedControl ControlID="SLurlComboBox" LoadingPanelID="ComboAjaxLoadingPanel" />

     </UpdatedControls>

</telerik:AjaxSetting>

or this...

<telerik:AjaxSetting AjaxControlID="SLurlComboBox">

    <UpdatedControls>

          <telerik:AjaxUpdatedControl ControlID="SLurlComboBox" LoadingPanelID="ComboAjaxLoadingPanel" />

     </UpdatedControls>

</telerik:AjaxSetting>

The ComboAjaxLoadingPanel has a different loading image to the one that the RadGrid has, this is to show the user that they are waiting for the combo and not the whole grid more or less, if that makes sense.

I have tested the ComboAjaxLoadingPanel and it works elsewhere on the page outside of the grid, just not on this combo for some reason.

Again, any help from anyone would be most appreciated as this has taken me too long to figure out.

thank you.

[Veronica]

Hello Grant,

Please accept my appologies for the late response.

You can not set the AjaxSetting declaratively because RadComboBox is located in the RadGrid control. You'll need to subscribe to the OnPreRender event in the RadGrid , find the RadComboBox in the handler and finally to set the AjaxSettings. Here's the code:

protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        foreach (var index in RadGrid1.EditIndexes)
        {
            GridDataItem item = RadGrid1.Items[index.ToString()];
            RadComboBox combo = item.EditFormItem.FindControl("UrlComboBox") as RadComboBox;
            Control addButton = combo.Footer.FindControl("AddUrlBtn");
            Control deleteButton = combo.Footer.FindControl("DeleteUrlBtn");
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(addButton, addButton);
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(addButton, combo, ComboAjaxLoadingPanel);
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(deleteButton, deleteButton);
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(deleteButton, combo, ComboAjaxLoadingPanel);
        }
    }

.aspx

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxLoadingPanel ID="ComboAjaxLoadingPanel" runat="server">
            <div>
                <asp:Image ID="Image1" runat="server" ImageUrl="Img/loading7.gif" AlternateText="loading" />
            </div>
        </telerik:RadAjaxLoadingPanel>

In my example I slept two threads in the OnClick events of the Add and Delete buttons just to slow down and to be able to see the loading image in the ComboAjaxLoadingPanel.
In my example I used EditItemTemplate but the code in the OnPreRender event is working for the FormTemplate too.

You can find the full code in the attached .zip file.

Best wishes,
Veronica Milcheva
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.

[Bill]

Hello Veronica,

I was wondering if you would be able to answer my Telerik post: RadComboBox Add Button in Header AUG-20-2012

Thanks.
Bill

[Avani]

Hi Veronica,

Wondering if we could have the FooterTemplate tag in the wpf also . .

I just want to integrate a button in the footer of the RadComboBox.


Thanks.

[Yana]

Hi Avani,

You should edit the ControlTemplate of RadComboBox for WPF in order to add footer in the dropdown.  I would suggest to use Implicit Styles as this makes such customizations easier.

I would kindly ask you to post any questions/issues related to RadControls for WPF in our WPF Forums.

Kind regards,
Yana
the Telerik team

[Neepa]

Hi Veronica,

Is it possible for you to send me an example where the onclick is done on the client side using JS?