Setting initial value to multicolumn combobox with webservice load-on-demand

[Razak]

I have been searching for the solution to the above scenario but couldn't find one. The details of what I need to do is as below:-

I have a RadComboBox which loads items on demand. The items are supplied by a webservice. The dropdownlist items are displayed in 2-column: the ID and Name, using ClientItemTemplate:

<telerik:RadComboBox ID="cboVendor" runat="server" EnableLoadOnDemand="true" ShowMoreResultsBox="true"
    EnableVirtualScrolling="true" Width="474px" HighlightTemplatedItems="True" EnableItemCaching="true">
    <WebServiceSettings Method="GetVendors" Path="~/services/Vendors.asmx" />
    <HeaderTemplate>
        <ul class="vendorlist">
            <li>Vendor Code</li>
            <li>Vendor Name</li>
        </ul>
    </HeaderTemplate>
    <ClientItemTemplate>
        <ul class="vendorlist">
            <li>#= Value #</li>
            <li>#= Text #</li>
        </ul>
    </ClientItemTemplate>
</telerik:RadComboBox>

While this works pretty flawless when the page is opened for inserting records (where the combobox is blank initially), I found that it is a hassle when in editing mode, where I need to set it's value initially along with all other fields on the page.

However, I have got it to work after hours of pulling hair. Not pretty but works. This is what I did :-

Set ViewState values of the item's value and text in code behind:

ViewState("VendorName") = dt.Rows(0)!vendor_name.ToString()
ViewState("VendorCode") = dt.Rows(0)!vendor.ToString()

Javascript to add the item to the ComboBox:

var vendorSet;

function pageLoad() {
    if (!vendorSet) {
        var text = '<%=ViewState("VendorName")%>';
        var value = '<%=ViewState("VendorCode")%>';

        if (value != '') addItem(text, value);
        vendorSet = true;
    }
}

function addItem(itemText, itemValue) {
    var item = new Telerik.Web.UI.RadComboBoxItem();
    item.set_text(itemText);
    item.set_value(itemValue);

    var combo = $find('<%=cboVendor.ClientID%>');
    var items = combo.get_items();
    items.add(item);

    item.select();
    item.bindTemplate();
}

The reason I  need the vendorSet flag is because the addItem needs to be called from pageLoad() event, and I found out that the pageLoad() event is triggered everytime during AJAX called anywhere on the page!

The reason I call the addItem() func from pageLoad() event is because there is the only point where $find('<%=cboVendor.ClientID%>') will work.

So my question is, Is there prettier and simpler ways of doing this? 

I hope I have explained the situation clear enough for you guys to reproduce and test and hopefully come up with better way of doing this. Thanks a bunch in advance!

[Razak]

Any experts please share your thought...

[Nencho]

Hello Abdul,

Actually, the approach you attempt to implement is the correct one. When the items are loaded with the LoadOnDemand feature, the correct approach of adding a selected value of the RadComboBox is to do it in the pageLoad event. In addition, please refer to this forum thread, where this topic is discussed in details.

Kind regards,
Nencho
the Telerik team