Setting values in AutoComplete Box

[Vipul]

I am facing a couple of issues:

1. How do I assign values to the autocomplete box?
   Here is how I was doing to the normal text box:
   txtIssTitle.Text = ds.Tables[0].Rows[0]["ISSUE TITLE"].ToString();
   
   I have now replaced the text box with the autocomplete box. The text I want to display in the autocomplete box upon user click of a Retrieve button will already be part of the entries in the autocomplete box. I just can't figure out how to set and display it in the box.
2. How do I Left align the text in the box? Right now it's all center aligned.

Though I have opened a support ticket for this but it is kind of urgent for me to find a solution for this since I have to show it to the users asap.

Thanks!

[Princy]

Hi Vipul,

1) Try the following code snippet to add default entries to the RadAutoCompleteBox.

C#:

RadAutoCompleteBox1.Entries.Add(new AutoCompleteBoxEntry(ds.Tables[0].Rows[0]["ISSUE TITLE"].ToString(), ds.Tables[0].Rows[0]["ISSUE TITLE"].ToString() ));

2) Try overriding the default CSS as follows to left align the text in the RadAutoCompleteBox.

CSS:

<style type="text/css">
    .RadAutoCompleteBox .racTextToken
    {
        padding-left: 0px !important;
        float: left !important;
    }
</style>

Hope this helps.

Regards,
Princy.

[Vipul]

Thanks! Solution for 1st one works great.
But for the left alignment of text in RadAutoCompleteBox, I did override the CSS but even then the text shows up in the center. Anything that I might have missed?

[Princy]

Hi,

I was not able to replicate the issue that you are facing. Following is the complete code that I tried to achieve your scenario. Attached is the screenshot.

CSS:

<style type="text/css">
    .RadAutoCompleteBox .racTextToken
    {
        padding-left: 0px !important;
        float: left !important;
    }
</style>

ASPX:

<telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" InputType="Text" ... >
</telerik:RadAutoCompleteBox>

Please elaborate your scenario with full code if it doesn't helps.

Regards,
Princy.

[Vipul]

I tried adding another AutoCompleteBox to the page. As soon as I set the 'Allow Custom Entry' property to True, the text display aligns to Center instead of Left. Then if I remove that property, it aligns to Left.

[Princy]

Hi Vipul,

Try the following CSS to achieve your scenario.

CSS:

<style type="text/css">
    .RadAutoCompleteBox .racInput
    {
        text-indent: 0px !important;
    }
</style>

Hope this helps.

Regards,
Princy.

[GACA]

I am using Right to Left direction.

I tried 

<style type="text/css">    .RadAutoCompleteBox .racTextToken    {        padding-right: 0px !important;        float: right!important;    }</style>

But it doesnot change still on the left side only. Please check the attached screenshot. 

[Princy]

Hi,

Try below CSS which works fine at my end. Please take a look into the attached screenshot also.

CSS:

.RadAutoCompleteBox .racToken
{
    float:right !important;
}

Thanks,
Princy.

[GACA]

Excellent works fine. ***** (5 stars) to Telerik support. Really appreciated for quick response.

[zznbilly]

1.Analyzing overriding CSS, how can I change (per example) the bordercolor of a ​RadAutoCompleteBox using code-behind?

2.Speaking about values is there a way to add online values into the list that the RadAutoCompleteBox refers?

Thnx in advance :)

[zznbilly]

"Add online values" means to update the datasource of RadAutoCompleteBox adding the typed new value in it. Is it possible?

[Ivan Danchev]

Hello,

1. You can set the border color from code-behind by setting a CSS class to the RadAutoCompleteBox. For instance if you have the following CSS rule with the custom class "customAutoCompleteBox" added to the selector:

html .customAutoCompleteBox .racTokenList {
    border-color: red;
}

You can set that class to the RadAutoCompleteBox CssClass property:

RadAutoCompleteBox1.CssClass = "customAutoCompleteBox";

2. You can add the typed text to the data source in the RadAutoCompleteBox OnTextChanged event handler. In the handler e.Text would hold the typed text, so for instance if your source is an Sql database you can add a new record with an Insert statement passing the value of e.Text.

Regards,
Ivan Danchev
the Telerik team

 

 

[zznbilly]

Ivan, first checked. Works fine. Thnx a lot. Second one still to come :)

[Ivan Danchev]

Hello,

I am glad it works as expected. Let us know if you need further assistance with the database insertion of the typed text.


Regards,
Ivan Danchev
Telerik

[zznbilly]

I tried e.text but the postback is really annoying. I tried a popup-form from javascript and worked fine after a hard effort :)