RadComboBox lost data after postback (combo filled by javascript)

[Brijendra Kumar]

        

RadComboBox data lost on postback.

<telerik:RadComboBox ID="cmbCustOfficeCountry" runat="server" Width="153px" TabIndex="13"

                    AutoPostBack="false" OnClientSelectedIndexChanged="FillOfficeState" EnableViewState="true">

                </telerik:RadComboBox>

//javascript code to fill combobox.(By JSON Method)

function LoadCountry(countryId, countryName, countryDDL) {

    try {

        countryControl = countryDDL;

  //call web service method to get all country list from database.

        GetData.GetCountry(countryId, countryName, OnCountryLoaded);

    }

    catch (e) {

        radalert("Error :- on Method:- 'LoadCountry' Description:- " + e.description);

        return false;

    }

}

function OnCountryLoaded(result) {

    try {       

        countryControl.get_items().clear();

        countryControl.commitChanges();

 

        comboItem = new Telerik.Web.UI.RadComboBoxItem();

        comboItem.set_text("Select");

        comboItem.set_value("0");

        countryControl.get_items().add(comboItem);

       

        for (var rowIndex = 0; rowIndex < result.rows.length; rowIndex++) {

            var rows = result.rows[rowIndex];

 

 

               comboItem = new Telerik.Web.UI.RadComboBoxItem();

                comboItem.set_text(rows.CountryName);

                comboItem.set_value(rows.CountryID);

               

                countryControl.trackChanges();

                countryControl.get_items().add(comboItem);

           

        }

        var item = countryControl.findItemByText("Select");

        if (item) {

            item.select();

        }

    }

    catch (e) {

        radalert("Error :- on Method:- 'OnCountryLoaded' Description:- " + e.description);

        return false;

    }

}

 

When ever page goes to postback all radcombo is clear with blank value. I mean the radcombo lost all the data.

Note:  I am using webusercontrol, I mean My radcombobox is on my user control not on page.

So, Could you please give me solution to overcome this problem as soon as possible.

 

[Paul]

Hello Brijendra,

Please refer to this example for detailso nthe matter.

Regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Brijendra Kumar]

Hi Paul,

I have already visited the link given by you, but it does not solve my problem.

My Problem is , I am filling radcombo at client side with the help of web service using JSON mehotd. But when I click on any button or server control and as soon as page goes to postback my radcombo lost all value as well as selected value.
I do not want to use ajaxmanager of rad.

I am using ScriptManager or UpdatePanel.

So, If you understand my problem, Please give me perfect solution, not temporary.

[Rajiv]

HI,

I'm also having same issue now, please help me its urgent.

Thanks in advance,
Rajiv

[Kate]

Hello Rajiv,

Can you please provide more details on your scenario since the first post is a very old one? For example providing the markup code of the RadComboBox that you are using would be very useful? Thus we can test the issue from our side as well and assist you in the most efficient way. Can you also clarify the exact version of the RadControls that you have and the exact steps for replication the behavior that you get?

Regards,
Kate
Telerik

[Rajiv]

HI Kate,

Thanks for your response , i'm using telerik version 13.1 , below are code details.

Here iam using listbox with checkbox items, if i select any item that item should automatically added to combobox

<telerik:RadListBox ID="rlstApplicableSizes" runat="server" CheckBoxes="true" Height="100px" OnClientItemChecked="OnClientItemChecked"  Width="200px"></telerik:RadListBox>

<telerik:RadComboBox ID="rcmbDefaultSize" runat="server" Width="200px" >
</telerik:RadComboBox>


function OnClientItemChecked(sender, eventArgs) {
            var item = eventArgs.get_item();
            var rcmbDefaultSize = $find("<%= rcmbDefaultSize.ClientID %>");
            var allItems = rcmbDefaultSize.get_items();
            var comboItem = new Telerik.Web.UI.RadComboBoxItem();
            comboItem.set_text(item.get_text());
            comboItem.set_value(item.get_value());
            rcmbDefaultSize.requestItems(comboItem.get_value(), true);
            if (item.get_checked())
                rcmbDefaultSize.get_items().add(comboItem);
            else {
                allItems.remove(rcmbDefaultSize.findItemByValue(item.get_value()));
            }
            rcmbDefaultSize.get_items().toArray()[0].select();
        }

My Problem is , I am filling radcombobox at client side but in postback (any button click), the combo items are automatically cleared in any postback. please help me...

Thanks in Advance
Rajiv

[Shinu]

Hi Rajiv,

By default, changes made in client-side code do not persist over a post-back to the server. To preserve changes, you must use the trackChanges and commitChanges methods. Please have a look at the following code I tried which works fine at my end.

ASPX:

<telerik:RadListBox ID="rlstApplicableSizes" runat="server" CheckBoxes="true" OnClientItemChecked="OnClientItemChecked">
    <Items>
        <telerik:RadListBoxItem runat="server" Text="Item 1" Value="1" />
        <telerik:RadListBoxItem runat="server" Text="Item 2" Value="2" />
        <telerik:RadListBoxItem runat="server" Text="Item 3" Value="3" />
    </Items>
</telerik:RadListBox>
<br />
<telerik:RadComboBox ID="rcmbDefaultSize" runat="server" Width="200px">
</telerik:RadComboBox>
<br />
<telerik:RadButton ID="RadButton1" runat="server" Text="PostBack">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function OnClientItemChecked(sender, eventArgs) {
        var item = eventArgs.get_item();
        var rcmbDefaultSize = $find("<%= rcmbDefaultSize.ClientID %>");
        var allItems = rcmbDefaultSize.get_items();
        var comboItem = new Telerik.Web.UI.RadComboBoxItem();
        comboItem.set_text(item.get_text());
        comboItem.set_value(item.get_value());
        rcmbDefaultSize.requestItems(comboItem.get_value(), true);
        rcmbDefaultSize.trackChanges();
        if (item.get_checked())
            rcmbDefaultSize.get_items().add(comboItem);
        else {
            allItems.remove(rcmbDefaultSize.findItemByValue(item.get_value()));
        }
        rcmbDefaultSize.commitChanges();
        if (rcmbDefaultSize.get_items().get_count() > 0) {
            rcmbDefaultSize.get_items().toArray()[0].select();
        }
    }
</script>

Thanks,
Shinu.

[Rajiv]

 Thanks Shinu,
its working but duplicates are added in to combobox.
I'm added the two items in to combobox then clicked on button again iam trying to add another item but duplicates are added in to combobox.

please help me

Thanks & Regards,
Rajiv

[Ilan]

Did you find a solution for this?

[Peter Milchev]

Hello Ilan,

The problem with the duplicate items comes from the unnecessary invocation of the .requestItems method in the JavaScript part provided by Shinu. Removing that solves the duplication problem.

So the final version of the JavaScript should look like this: 

<script type="text/javascript">
    function OnClientItemChecked(sender, eventArgs) {
        var item = eventArgs.get_item();
        var rcmbDefaultSize = $find("<%= rcmbDefaultSize.ClientID %>");
        var allItems = rcmbDefaultSize.get_items();

        var comboItem = new Telerik.Web.UI.RadComboBoxItem();
        comboItem.set_text(item.get_text());
        comboItem.set_value(item.get_value());

        rcmbDefaultSize.trackChanges();

        if (item.get_checked()) {
            rcmbDefaultSize.get_items().add(comboItem);
        } else {
            var itemToDelete = rcmbDefaultSize.findItemByValue(item.get_value());
            rcmbDefaultSize.get_items().remove(itemToDelete);
        }

        rcmbDefaultSize.commitChanges();

        if (rcmbDefaultSize.get_items().get_count() > 0) {
            rcmbDefaultSize.get_items().toArray()[0].select();
        }
    }
</script>

The following article lists the most important client-side methods of the RadComboBox object.

If you have any further questions please specify the controls version you are using, provide more information on the issue you are experiencing and sample code or open a new thread.

Regards,
Peter Milchev
Telerik