AJAX combobox adding new items without autopostback="true"

Buenos nachos, to be brief, my question is: is it possible to allow users to add new items to a combobox at runtime without having the autopostback property set to true? I understand it needs to postback if a new item is added, but I do not want the box to postback if the user simply selects a different value!

The tag I currently have is below. Without having the autopostback="true", the comboxbox doesn't allow the user to add开发者_运维百科 new items to the box >_<' Any thoughts?

<ajx:ComboBox ID="cbCompany" runat="server" Width="226px" DropDownStyle="DropDown"
  OnItemInserted="addCompany" AutoCompleteMode="SuggestAppend">
</ajx:ComboBox>

I know I could add a few more controls and do an easy workaround, just wondering if it is possible to do it this way.

---

You don't need to round-trip to the server for each single change in well designed components, the client should be able to handle most situations except those when the server must validate the data immediately.

That anti-pattern of everything needs postback or using .NET's lazy version of ajax (when the server deals with the tiny bits like, for example, adding items to a combo) is not good at all and JavaScript is there to do those simple tasks.

I downloaded the source code for ajaxcontroltoolkit's ComboBox and unfortunatelly I does not provide a good JavaScript interface.

You could try disabling postback and using something like:

<script type="text/javascript">
function addItemToDumbComboBox(cb, text)
{
        /* Based upon Combobox.pre method initializeOptionList() */

        // create the new list item
        var child = document.createElement('li');
        child.innerHTML = text;
        cb.get_optionListControl().appendChild(liItem);

        // add the item to the internal collection
        var item = { text: text.trim(); };
        Array.add(cb._optionListItems, item);

        // style the ListItem with default skin
        cb.initializeOptionListItem(child);
}

addItemToDumbComboBox(document.getElementById("cbCompany"), "new item #1");
addItemToDumbComboBox(document.getElementById("cbCompany"), "new item #2");
addItemToDumbComboBox(document.getElementById("cbCompany"), "new item #3");
</script>

... and see what happens. Note I didn't actually test this code, it's just an example.

BTW, I recomend you to switch to a combobox implementation with a decent JavaScript interface.

Having the server do all the job is like buying a toaster and every breakfast mailing it to the factory, along with the 2 slices of bread, to have them do the toasting and return it to you with your toasts... it's that dumb, but don't blame yourself, that's a common ASP.NET anti-pattern.

Hope that helps, and god bless!

---

Disable autopostback for the combobox and try placing something like the folling code near the end of your page.

<script type="text/javascript">
function subclassComboBox(cb)
{
    cb._old__onTextBoxBlur = cb._onTextBoxBlur;
    cb._onTextBoxBlur = function(e) {
        var saveAutoPostBack = cb.get_autoPostBack();
        cb.set_autoPostBack(false);

        cb._old_textBoxBlurHandler(e); 

        if (cb.get_selectedIndex() == -2) {
            /* -2 means that a custom value was typed. only in this case do postback */
            cb._doingPostBack = true;
            __doPostBack(cb.get_element().id, '');
        }

        cb.set_autoPostBack(saveAutoPostBack);
    };
    cb._old_textBoxBlurHandler = cb._textBoxBlurHandler;
    cb._textBoxBlurHandler = Function.createDelegate(cb, cb._onTextBoxBlur);

    $clearHandlers(cb.get_textBoxControl());
    $addHandlers(cb.get_textBoxControl(),
    {
        "click": cb._textBoxClickHandler,
        "focus": cb._textBoxFocusHandler,
        "blur": cb._textBoxBlurHandler,
        "keypress": cb._textBoxKeyPressHandler
    }, cb);
}

subclassComboBox(document.getElementById("cbCompany"));
</script>

I haven't tested this code, but the idea is to make the combo do a postback only when a new value is entered (even if autopostback is false). If this works you'll no longer need that button ;)