CODEWITHSUNDEEP
javascriptasp.netcallbackupdatepanelviewstate
Dan Cundy
Dan Cundy

Reputation: 2849

Combobox enabled state reset after partial postback

Background

I have a search feature that allows the end user to search for items in a database. This search feature has a textbox, two comboboxes and a button.

When one of the combobox items is selected the other's value changes and it's set to be disabled. This is done by Javascript and works.

All of the controls are within an updatepanel.

Problem

After the callback made by the updatepanel is completed the combobox that was disabled is being reset, rendering it as enabled.

My Guess

The changes made by the Javascript aren't being saved to the viewstate and sent back in the initial request.

Can anyone shine some light on this problem?

Code

ASP

<asp:UpdatePanel runat="server" ID="UPJobDetailSearch" ChildrenAsTriggers="true">
            <ContentTemplate>
              <div id="searchbox" class="searchbox">
                    <dx:ASPxTextBox ID="TxtSearchTerm" runat="server" CssClass="searchbox" name="searchbox" NullText="Search for.." SkinID="None" />
                </div>
                <div id="searchcombo">
                     <dx:ASPxComboBox ID="CbSearchCriteria" ClientInstanceName="CbSearchCriteria" Width="150" CssClass="combobox" AutoPostBack="false" NullText="Choose Criteria" runat="server" SelectedIndex="-1" SkinID="None">
                    <dx:ASPxComboBox ID="CbSearchCriteria" ClientInstanceName="CbSearchCriteria" Width="150" CssClass="combobox" AutoPostBack="false" NullText="Choose Criteria" runat="server" SelectedIndex="-1" SkinID="None">
                        <Items>
                            <dx:ListEditItem Text="Id" Value="ID" />
                            <dx:ListEditItem Text="Num" Value="NUM" />
                        </Items>
                    </dx:ASPxComboBox>
                </div>
                <div id="searchLocationcombo">
                    <dx:ASPxComboBox ID="CbSearchLocationCriteria" ClientInstanceName="CbSearchLocationCriteria" CssClass="combobox" AutoPostBack="false" runat="server" NullText="Location" SelectedIndex="-1" SkinID="None"
                        ClientSideEvents-SelectedIndexChanged="function(s,e){ ChangeSearchCriteriaItem(s,e); }">
                        <Items>
                            <dx:ListEditItem Text="Jobs" Value="Jobs" />
                            <dx:ListEditItem Text="Comms" Value="Comms" />
                        </Items>
                    </dx:ASPxComboBox>
                </div>
                <div id="SearchBtn" class="searchbtn">
                    <dx:ASPxButton ID="BtnSearch" CssClass="BtnSearch" runat="server" Text="Search" OnClick="BtnSearch_Click" ClientSideEvents-Click="function(){ ShowSearching(); }" />
                </div>
        </ContentTemplate>
 </asp:UpdatePanel>

NB. My controls are DevExpress aspx controls. (I wouldn't imagine this would matter though)

Javascript 

 function ChangeSearchCriteriaItem(s, e) {
            debugger;

            var cmbLocationCriteria = ASPxClientControl.GetControlCollection().GetByName("CbSearchLocationCriteria")
            var selecteditem = cmbLocationCriteria.GetSelectedItem();
            var cmbSearchCriteria = ASPxClientControl.GetControlCollection().GetByName("CbSearchCriteria");

            if (selecteditem.text == "Comms Log") {

                cmbSearchCriteria.SetValue("JobId");
                cmbSearchCriteria.SetEnabled(false);
            }
            else {
                cmbSearchCriteria.SetEnabled(true);
            }
        }

Upvotes: 0

Views: 491

Answers (1)

titech
titech

Reputation: 197

This is a common problem in WebForms. And yes, your guess is right. The enabled state isn't saved in the ViewState.

The best way would be to use the pageLoad function:

<script> 
   ///<summary>
   ///  This will fire on initial page load, 
   ///  and all subsequent partial page updates made 
   ///  by any update panel on the page
   ///</summary>
   function pageLoad(){ alert('page loaded!') }  
</script>

In the pageLoad function you can reset the enabled state if necessary.

Second option

You could also try to register a ClientScript in your CodeBehind on the postback event, the third argument would be your JavaScript function and would be called after the postback has finished. In this example you would set the enabled state in the function 'javascriptFunctionName':

ClientScriptManager.RegisterStartupScript(
       typeof(page1), 
       "CssFix", 
       "javascriptFunctionName()", 
        true);

Upvotes: 1

Related Questions