ComboBox $find returns null

12 posts, 0 answers
  1. BC
    BC avatar
    24 posts
    Member since:
    Nov 2009

    Posted 11 Jul 2011 Link to this post

    Hi,
    I have a rad combobox in Ajax update panel inside an ascx control. I need to show a confirm box every time the combo box is changed based on a condition. If the user chooses not to go with the change, I need to set the combo box value to the previous one.
    I was able to use ScriptManager.RegisterStartupScript to show the confirm box from the SelectedIndexChanged event. But I'm not able to set the combo box value to previous one. I keep getting null for $find on the combo box. Please find the related code below. Any help is greatly helpful as I need to resolve this ASAP.

    ASCX code:
    <telerik:RadCodeBlock ID="rcbCodeBlock" runat="server">

        <script type="text/javascript">
            function ShowConfirmOrgCode(oldValue, combo) {
                if (!confirm('Do you want to continue...?')) {
                    var orgcombo = $find(combo);
                    if (orgcombo != null) {
                        alert(orgcombo.get_selectedIndex());
                        orgcombo .findItemByValue(oldValue).select();
                    }
                }
            }
        </script>

    </telerik:RadCodeBlock>

               <asp:UpdatePanel ID="updatePanelOrgCode" runat="server">
                    <ContentTemplate>
                     <telerik:RadComboBox ID="ddlOrgCode" Width="300px" runat="server" AutoPostBack="true" Height="100px"
                    DropDownWidth="570px" MarkFirstMatch="true" EnableLoadOnDemand="false" />
                <asp:RequiredFieldValidator ID="ddlOrgCodereqval" Enabled="true" runat="server" ControlToValidate="ddlOrgCode"
                    Display="None" InitialValue="<<- Select Organization Code ->>" ErrorMessage="Organization code is required."
                    ValidationGroup="Group1"></asp:RequiredFieldValidator>
                <asp:HiddenField ID="hiddenOrgCode" runat="server" />
                <asp:HiddenField ID="hiddenHasAccess" runat="server" />
                    </ContentTemplate>
                </asp:UpdatePanel>


    Code Behind:

            protected void ddlOrgCode_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
            {
                if (ddlOrgCode.SelectedIndex != -1)
                {
                    OrganizationCodeCollection ogc = base.CurrentPDCreator.GetAssignedOrganizationCodes();
                    int selectedOrgCode = Convert.ToInt32(ddlOrgCode.SelectedValue);
                    string oldValue = hiddenOrgCode.Value;
                    bool hasAccess = ogc.Contains(selectedOrgCode);
                    string sorg = ddlOrgCode.ClientID;
                    if (!hasAccess)
                    {
                        hiddenHasAccess.Value = hasAccess.ToString();
                        string strScript = "setTimeout(ShowConfirmOrgCode('" + oldValue + "', '" + sorg + "'), 500);";
                        ScriptManager.RegisterStartupScript(updatePanelOrgCode, GetType(), "OrgCodePopup", strScript, true);
                    }
                    else
                    {
                        hiddenOrgCode.Value = selectedOrgCode.ToString();
                    }
                }
            }
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Jul 2011 Link to this post

    Hello BC,

    Inorder to access a RadControl from client side you need to to use the $find method with ClientID property.

    Javascript:
    <script type="text/javascript">
    function ShowConfirmOrgCode(oldValue, combo)
        if (!confirm('Do you want to continue...?'))
            {     
               var orgcombo = $find("<%= combo.ClientID %>");
               if (orgcombo != null)
                 {
                   alert(orgcombo.get_selectedIndex());
                   orgcombo.findItemByValue(oldValue).select();
     
                 }
            }
    }
    </script>
    Thanks,
    Shinu.
  3. BC
    BC avatar
    24 posts
    Member since:
    Nov 2009

    Posted 12 Jul 2011 Link to this post

    Hi Shinu,
    I'm passing the combo.ClientID from code behind to this JS function. Also, I tried to do it in the JS initially, which didn't work at all and returned null and then I tried passing the clientID from code behind and no luck.
    From one of your posts, I saw placing code in pageLoad and also tried it. In that function SelectedIndex of the ComboBox returns value but then findItemByValue or findItemByText returns null again.
    Could you please let me know how I can work around this. As you can see in the code behing, I'm adding a timout already for JS code to let RADcontrols load.
    Thanks,
    BC.
  4. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 14 Jul 2011 Link to this post

    Hi Bc,

    Could please try to modify you event handle function as following:
    protected void ddlOrgCode_SelectedIndexChanged(object combo, RadComboBoxSelectedIndexChangedEventArgs e)
        {
     
            if (ddlOrgCode.SelectedIndex != -1)
            {
                OrganizationCodeCollection ogc = base.CurrentPDCreator.GetAssignedOrganizationCodes();
                int selectedOrgCode = Convert.ToInt32(ddlOrgCode.SelectedValue);
                string oldValue = hiddenOrgCode.Value;
                bool hasAccess = ogc.Contains(selectedOrgCode);
                string sorg = ddlOrgCode.ClientID;
                if (!hasAccess)
                {
                    hiddenHasAccess.Value = hasAccess.ToString();
                    string strScript = "Sys.Application.add_load(function() { ShowConfirmOrgCode('" + oldValue + "', '" + sorg + "') });";
                    ScriptManager.RegisterStartupScript(updatePanelOrgCode, GetType(), "OrgCodePopup", strScript, true);
                }
                else
                {
                    hiddenOrgCode.Value = selectedOrgCode.ToString();
                }
            }
        }

    With the current implementation you will insure that the js function will be called when the controls are properly initialized after the ajax request.

    Greetings,
    Dimitar Terziev
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  5. BC
    BC avatar
    24 posts
    Member since:
    Nov 2009

    Posted 14 Jul 2011 Link to this post

    Hi Dimitar,
    Thanks for your reply. Your solution worked great and I'm able to the combo box instance.
    However, I have a different issue now. If the user cancels the change, I select the old value in the combobox in JS which is raising the SelectedIndexChanged event again and it falls into a loop.
    How can I prevent this?
    Thanks,
    BC.
  6. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 18 Jul 2011 Link to this post

    Hi Bc,

    In order to deal with this looping problem, my suggestion is to subscribe on the client-side OnClientSelectedIndexChanging and cancel it the second time when you return the old value.

    Best wishes,
    Dimitar Terziev
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  7. BC
    BC avatar
    24 posts
    Member since:
    Nov 2009

    Posted 18 Jul 2011 Link to this post

    Hi Dimitar,
    The whole reason I'm doing it in code behind is that I want to show the confirm window on a conditional basis and not at all times. That is something I can't do clientside. Is there any other way of preventing the loop?
    Thanks,
    BC.
  8. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 21 Jul 2011 Link to this post

    Hello Bc,

    I'm aware of your requirements, but unless you cancel the client-side event you could not break the loop. If you cancel the client-side event, the server-side one won't be fired as well and thus you won't get looping behavior. You just have to set some control parameter, when you switch to the old value and if this parameter is set to "true" for instance, you will cancel the client-side event and you should be able to break the loop.

    Greetings,
    Dimitar Terziev
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  9. BC
    BC avatar
    24 posts
    Member since:
    Nov 2009

    Posted 21 Jul 2011 Link to this post

    Hi Dimitar,
    I tried your solution and it seems to cancel the event and come out of the loop. However, the combo box is not set to previous value since the client event is SelectedIndexChanging instead of Changed. How would I select the combo box to old value and cancel further events.
    Please advise.
    Thanks,
    BC.
  10. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 27 Jul 2011 Link to this post

    Hi Bc,

    I've made a sample page with the desired functionality implemented. Please note that now the RadCombobox has AutoPostBack property set to false, and a post-back is initiated manually.

    Best wishes,
    Dimitar Terziev
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  11. BC
    BC avatar
    24 posts
    Member since:
    Nov 2009

    Posted 01 Aug 2011 Link to this post

    Hi Dimitar,
    Thank you very much for the example project you have put together for me. It did the magic and made it work. However, I have one issue now. It is posting the entire page because you are manually calling it inside JS function. How can I make it work for AJAX. I have this inside an update panel and it is still posting the page. How can I achieve this?
    Thanks again for your help,
    BC.
  12. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 04 Aug 2011 Link to this post

    Hello Bc,

    In case you want to make an ajax request, my suggestion is to use the approach suggested in this help article here showing how to initiate such a request manually. Then instead in the  OnSelectedIndexChanged event handler function you should move your logic into the event handler function for the AjaxRequest event.

    Best wishes,
    Dimitar Terziev
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top