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

3 posts, 0 answers
  1. Razak
    Razak avatar
    20 posts
    Member since:
    Oct 2011

    Posted 11 Dec 2012 Link to this post

    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!

  2. Razak
    Razak avatar
    20 posts
    Member since:
    Oct 2011

    Posted 13 Dec 2012 Link to this post

    Any experts please share your thought...

  3. Nencho
    Admin
    Nencho avatar
    1864 posts

    Posted 14 Dec 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top