[Solved] RadComboBox inside User Control - javascript won't fire

[Revital Keren]

Hi,
I have a web user control containing 2 RadComboBox's - ddlGroup and ddlGorem.
my ascx is as follows:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="InfoOrderForm.ascx.cs" Inherits="Reforma.Web.Application.Hagbalot.InfoOrderForm" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<table  width="100%" dir="rtl">
    <tr>
        <td width="20%">קבוצה</td>
        <td align="right"  >
            <telerik:RadComboBox
                ID="ddlGroup"
                OnClientSelectedIndexChanging="LoadGormim"
                OnItemsRequested="ddlGroup_ItemsRequested"
                runat="server"
                Skin="ReformaSkin" EnableEmbeddedSkins="False"
                >
            </telerik:RadComboBox>
        </td>
        <td width="20%">גורם מבצע</td>
        <td align="right">
            <telerik:RadComboBox
                ID="ddlGorem"
                runat="server"
                OnClientItemsRequested="ItemsLoaded"
                OnItemsRequested="ddlGorem_ItemsRequested"
                Skin="ReformaSkin" EnableEmbeddedSkins="False">

            </telerik:RadComboBox>
       </td>
    </tr>
    <tr>
        <td colspan="1" width="20%">המידע המבוקש</td>
        <td align="right" colspan="3">
            <asp:TextBox  ID="txtMelel"  ReadOnly="false" runat="server" TextMode="MultiLine" Rows="2" Width="100%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td align="left" colspan="2" >
            <asp:ImageButton ID="btnView"  runat="server"
                ImageUrl="~/ReformaSkin/images/bigarrow_up.gif" BorderWidth="1px"
                Width="31px" BackColor="Silver" onclick="btnView_Click" ToolTip="בחר" />
        </td>
        <td align="right" colspan="2">
            <asp:ImageButton ID="btnAdd"  runat="server"
                ImageUrl="~/ReformaSkin/images/bigarrow_down.gif" BorderWidth="1px"
                style="margin-right: 0px"  Width="31px" BackColor="Silver"
                onclick="btnAdd_Click" ToolTip="הוסף" />
        </td>
    </tr>
    <tr>
        <td colspan="4" align="center">
            <ref:CustomGrid ID="alichTzavMeidaGrid" runat="server" CreatedByDesigner="True" EntityID="0" AutoGenerateColumns="false" EnableEmbeddedSkins="False" Skin="ReformaSkin"   >
                <ClientSettings  Selecting-AllowRowSelect="true"  ></ClientSettings>
                <MasterTableView PageSize="3" EditFormSettings-EditFormType="AutoGenerated"
                    EditMode="EditForms">
                    <RowIndicatorColumn>
                        <HeaderStyle Width="20px" />
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn>
                        <HeaderStyle Width="20px" />
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:gridboundcolumn
                        datafield="group"
                         headertext="קבוצה" uniquename="group" MaxLength="10"></telerik:gridboundcolumn>
                         <telerik:GridBoundColumn DataField="gorem" HeaderText="גורם" MaxLength="10"
                             UniqueName="gorem">
                         </telerik:GridBoundColumn>
                         <telerik:GridBoundColumn DataField="melel" HeaderText="המידע המבוקש" MaxLength="200"
                             UniqueName="melel">
                         </telerik:GridBoundColumn>
                    </Columns>
                    <EditFormSettings ColumnNumber="2">
                    </EditFormSettings>
                </MasterTableView>
                <FilterMenu EnableTheming="True">
                    <CollapseAnimation Duration="200" Type="OutQuint" />
                </FilterMenu>
            </ref:CustomGrid>
        </td>
    </tr>
</table>

on my code behind i include a .js file in the following way:

protected override void OnPreRender(EventArgs e)
{
    if (!Page.ClientScript.IsClientScriptIncludeRegistered("ComboBoxScript"))
    {
        Page.ClientScript.RegisterClientScriptInclude(
        "ComboBoxScript",
        "ComboBoxScript.js");
        }
        base.OnPreRender(e);
    }
}

the ComboBoxScript.js is:

                function ItemsLoaded(combo, eventarqs)
                {
                   /* var countriesCombo = $find("ddlGorem");
                    if (combo.get_items().get_count() > 0)
                    {
                        combo.set_text(combo.get_items().getItem(0).get_text());
                        combo.get_items().getItem(0).highlight();
                    }*/
                    alert("ItemsLoaded");
                }

                function LoadGormim(combo, eventarqs)
                {
                    /*var gormimCombo = $find("ddlGorem");

                    var item = eventarqs.get_item();
                    if (item.get_index() >= 0)
                    {
                        gormimCombo.requestItems(item.get_value(), false);
                    }*/
                    alert("LoadGormim");
                }

of course the commented lines are the ones I actually want to use, but for now, as nothing is working, I have tried just to get some alerts for debugging the problem.
both combos load just fine, but as I change the selected index in the ddlGroup combo, I get a javascript error saying : " 'null' is null or not an object".
my conclusion is that for some reason my javascript functions cannot be found.

please help me... :(
Thanx,
Revital

p.s.
before putting it all in a user control the combos were on a panel in a web form that contained all the javascript functions and it all worked fine...

[Revital Keren]

HELP!!!!
I am still waiting for your help.
I have tried to simplify things even more, putting only one combo and using its onclientselectedindexchanged event to call a function that does "alert(1);".
what happens is that once my user control loads with the combo I the alert executes and when I select a different value in the combo, I get the following error: "Object doesn't support this property or method".

(I have tried attaching this simpke function to a client event in RadTextBox too and the exact same thing happened).

I think there is something very basic I am missing and it really is halting my work.

Thanx in advance for tour quick response,
Revital

[Revital Keren]

OK,
solved it.
if anyone is intereseted in what the problem was -
the name of the function called upon a client event must be the name of the event, like so:

<

telerik:RadComboBox

 

 

ID="ddlGroup"

 

 

OnClientSelectedIndexChanging="OnClientSelectedIndexChanging"

 

 

OnItemsRequested="ddlGroup_ItemsRequested"

 

 

runat="server"

 

 

Skin="ReformaSkin" EnableEmbeddedSkins="False"

 

 

>

 

 

</telerik:RadComboBox>

 

and the function should be like so:

function

OnClientSelectedIndexChanging(sender, eventArgs)

 

{

 

var gormimCombo = $find("<%= ddlGorem.ClientID %>");

 

 

var item = eventArgs.get_item();

 

 

if (item.get_index() >= 0)

 

{

gormimCombo.requestItems(item.get_value(),

false);

 

}

}

[Simon]

Hi Revital Keren,

It is good that you have resolved the first issue by yourself.

I just want to clarify something on your last statement: '...the name of the function called upon a client event must be the name of the event...'.

The event handler can be with an arbitrary name. The only requirement when specifying the event handler is that the name of the event handler should be supplied to the corresponding attribute and not a call to the event handler.

For instance, this is correct:

OnClientSelectedIndexChanged="indexChangedEventHandler"

whereas this is not:

OnClientSelectedIndexChanged="indexChangedEventHandler(2)"

Kind regards,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peichung]

Hi Revital,

Thanks for the answer.  I followed your suggestion, but I have a different problem.  The statement in the js file: alert('<%= RadComboBox1.ClientID %>'); gives me the string literal: RadComboBox1.ClientID.  The <%= ... > was not evaluated.  I am wondering if you can advise how I can have <%= ... > evaluated.  Thanks,

Peichung

[Simon]

Hi Peichung,

Yes, indeed this error arises if the code is located in a separate JavaScript file.

Please put the code in the respective User Control, so that ASP.NET can evaluate the expressions accordingly.

Best wishes,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peichung]

Hi Simon,

Thank you for the reply.  I actually put javascript in the ascx file originally.  However, $find("<%#RadComboBox1.ClientID%>"); couldn't be evaluated in the hosting aspx page.  It was null.  The same codes worked fine when I used them directly in aspx without using the user control.  That's why I thought by loading the javascript file dynamically could have solved the problem.  Could you please advise the correct way of accessing Rad control client object in the ascx file?  Thanks a lot,

Peichung

[Simon]

Hi Peichung,

In case we are talking about the InfoOrderForm User Control, the IDs should be ddlGroup and ddlGorem respectively, as these are the real IDs of the controls.

Kind regards,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.