even handler for item clicked?

[Albert Shenker]

I have a combo box with items that allow a user to select a built-in date range or specify a custom date range (see attached ff.jpg for example). When an Item is selected, I postback and perform various funciions depending on the selected date range. If the selected Item is "Custom dates..." or "Custom to date...", I display a tooltip server-side which allows users to enter a custom date range. Everything works fine... however, if the user enters a custom date range by selecting "Custom dates...", they cannot then go and alter their date range because they can't re-select "Custom Dates...". It is already selected. They have to choose another item in the list and then select "Custom dates...". Since the SelectedIndexChanged event is not fired if you select an item which is already selected, Is there some way to handle an item_clicked, or similar event instead of SelectedIndexChanged server-side? Ideally, I would retrieve the value of the item clicked in this event handler and only perform the necessary functions if it corresponds to the "Cusomt Dates..." or "Custom to date..." items. Otherwise, would perform my functionality in the SelectedIndexChanged server-side handler.

[Thad]

Hey, Albert,

I'd do something like this using jQuery to target the item and attach a click event to it:

$('#<%=myRadComboBox.ClientID%>_DropDown').find('.rcbItem').last().click(function() {

  // Show date selection tooltip or fire an ajaxRequest and handle
   // it server side if that's what you need to do

});

Hopefully this meets your requirements.

Thad

[Albert Shenker]

Thanks for the suggestion, Thad. 

I  have to handle the event (click or otherwise) server side. The combo is part of a user control which is part of an ajaxified grid column's Filter Template. Adding to the complication is the app uses a single central AjaxManager in a Masterpage. In smilar scenarios in the past, I have had lots of trouble trying to raise AjaxRequests directly from client-side code and handling them in the code behind of the user control, so I'm not sure this will work. Theoretically I could set a hidden field value specifying which item was clicked and raise a hidden button click on the client and handle that server-side. However that seems like a whole bunch of overkill to try and simulate a dropdown click handler. I'd be interested in what Telerik has to say about this scenario.

P.S, I'm not great at client side code.. in your suggestion, what is ".rcbItem", is that just a reference to the DOM element which makes up items in the combobox? If so , how would I extract the clicked-on item value? Also, how is this code invoked, or is it just placed at the top pf the page?

[Thad]

Hi Albert,

Unfortunately what I suggested isn't working for me now that I try to help further.  It *should* be working, so maybe this weekend I'll have time to figure it out as it's a personal challenge now :-).

But to answer your question, here is how a RadComboBox renders.

<div style="width:60px;" class="RadComboBox RadComboBox_Default" id="ctl00_cphContentAjax_rcbUnitStructure">

    <table style="border-width: 0pt; border-collapse: collapse;" summary="combobox" class="rcbFocused">

        <tbody>

            <tr>

                <td class="rcbInputCell rcbInputCellLeft" style="width:100%;">

                    <input type="text" tabindex="5" value="Select..."

                        id="ctl00_cphContentAjax_rcbUnitStructure_Input"

                        class="rcbInput" name="ctl00$cphContentAjax$rcbUnitStructure"

                        autocomplete="off">

                </td>

                <td class="rcbArrowCell rcbArrowCellRight">

                    <a style="overflow: hidden;display: block;position: relative;outline: none;"

                        id="ctl00_cphContentAjax_rcbUnitStructure_Arrow">select</a>

                </td>

            </tr>

        </tbody>

    </table>

    <input type="hidden" name="ctl00_cphContentAjax_rcbUnitStructure_ClientState"

        id="ctl00_cphContentAjax_rcbUnitStructure_ClientState" autocomplete="off"

        value="{"logEntries":],"value":"","text":"","enabled":true,"checkedIndices":[]}">

 

</div>

<div style="z-index: 6000; visibility: visible; display: block; overflow: visible; margin-left: 0pt; position: absolute; top: 306.5px; left: 671.25px; height: 142px; width: 60px;" class="rcbSlide">

    <div style="display: block; visibility: visible; top: 0pt; left: 0px; width: 58px;"

        class="RadComboBoxDropDown RadComboBoxDropDown_Default "

        id="ctl00_cphContentAjax_rcbUnitStructure_DropDown">

        <div style="height: 120px; width: 100%; overflow: auto;" class="rcbScroll rcbWidth">

            <ul style="list-style:none;margin:0;padding:0;zoom:1;" class="rcbList">

                <li class="rcbItem ">BU</li>

                <li class="rcbItem ">EU</li>

                <li class="rcbItem ">OU</li>

                <li class="rcbItem ">UA</li>

                <li class="rcbItem ">UD</li>

                <li class="rcbItem ">WU</li>

            </ul>

        </div>

    </div>

</div>

rcbItem is the class name of each LI that makes up the dropdown of the RadComboBox.  Basically that jQuery selector was finding the last item in the RadComboBox and attaching the click event (well, trying to, anyway) to that LI.

Hopefully Telerik has a better answer to tide you over until I have time to look into this further.
Thad

[Dimitar Terziev]

Hi Albert,

What you want to achieve as a behavior should be implemented with the use of manual Ajax request to the server. Any other approaches to fire manually the SelectedIndexChanged event of the RadComboBox are hacks and may interfere with the normal workflow of the control.

I've prepared a sample page showing how to implement the desired functionality.

Best wishes,
Dimitar Terziev
the Telerik team

[Albert Shenker]

Thanks for the sample, but As I menioned in my last reply, there are a couple complications in my project that make implementing a straightforward ajax request difficult. First off, my combo box is in a user control. Secondly, the ajax manager is on a master page. What sort of modifications to your example would I need to make to get it to work in this environment? Also, i have had issues in the past with getting javascript which exists in a user control to run if the user control is ajaxified. Would the javascript you provide work if the usercontrol is ajaxified?

[Dimitar Terziev]

Hello Albert,

In scenarios like your the most appropriate solution is to use RadAjaxManagerProxy and to handle the server-side AjaxRequest event in the user control using ajax request delegate. Please refer to the following help article giving information how to achieve the above mentioned scenario.

All the best,
Dimitar Terziev
the Telerik team

[Albert Shenker]

it looks like I'm still having some issues implementing this. In regards to the javascript function you suggested to wire up an ajax request to the item click:

function pageLoad(){

                var combobox = $find("RadComboBox1");

                var item = combobox.findItemByText("Select Custom Data Range");

                $telerik.$("li",combobox.get_dropDownElement()).bind("click",function(){

                    if($telerik.$(this).index() == item.get_index()){

                        if(combobox.get_value() == item.get_value()){

                             $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(item.get_value());
                        }
                    }
                });
            }

1) the $find("RadComboBox1") code always returns null when I specify the id of my combo box. Instead, I use $find('<%= RadComboBox1.ClientId%>') and this works.

2) My combobox is part of a usercontrol which may have more than one instance on a page. Normally, I define javascript functions in user controls using an additional server-side reference to the control's client id like so: 

            function myFunction_<%=Me.ClientID%>() {} 

    Can I do this with the pageLoad function? I assume not. In any case, will this code be instance safe because of my use of RadCombobox1.ClientId which ought to return the specific combo instance even if there are more than one instances of the user control on a page?

3) Now, with regards to the server-side code... My SelectedIndexChanged Event contains:

MyTootlTip.Show().

I placed this code in the AjaxRequest Handler and it doesn't seem to work. I know the AjaxRequest Handler is working, but the tooltip won't show.

[Dimitar Terziev]

Hi Albert,

Straight to your questions:

1) the $find("RadComboBox1") code always returns null when I specify the id of my combo box. Instead, I use $find('<%= RadComboBox1.ClientId%>') and this works.

In case your combobox is situated in a user control, then the approach that you are using is the right one since the RadComboBox's id contains the id of the user control as well.

2) The page load event handler function is one for the page containing the user controls and therefore what you want to achieve is not supported.

3) Now, with regards to the server-side code... My SelectedIndexChanged Event contains:

In case the code in the event handler function for the Ajax request is executed than the problem should be related to your Ajax settings. In your case you should have a setting such that the RadAjaxManager will update your tooltip control. You should use the following code in order to get reference to the RadAjaxManager in the code behind of your user controls:

RadAjaxManager.GetCurrent(Page)

All the best,
Dimitar Terziev
the Telerik team