OnChange and IE

[Lynda Lafreniere]

Hi !

I have to set a javascript function on a radcombobox server-side. I tried that (on the load of the page) :

cmb_Pager.Attributes.Add("onchange", "Pager_ChangePageSize('" + cmb_Pager.ClientID + "', '" + Grid.ClientID + "')");

but it does'nt work in IE because the input of the combobox does'nt get the "onchange" attribute (it works perfectly in FireFox ...).

After a little search, I also tried that (on the load of the combobox) :

	this.Page.ClientScript.RegisterStartupScript(cmb_Pager.GetType(),
	"blabla",
	";$get('" + cmb_Pager.ClientID + "_Input').onchange=function CallMethod(){Pager_ChangePageSize('" + cmb_Pager.ClientID + "', '" + Grid.ClientID + "');};",
	true);

this time, it works on FF3 and IE7, but the "onchange" event is only fired one time for both browser.

Is there a way to set correctly in FF3 and IE7 the "onchange" of the input of the combobox ??

Thanks a lot !

[Yana]

Hello Lynda,

Please use the following code to set onchange event of the input field of RadComboBox:

string ClientScript = "<script type=\"text/javascript\">";
ClientScript += "function pageLoad() {";
ClientScript += "var combo = $find(\"RadComboBox1\");";
ClientScript += "var input = combo.get_inputDomElement();";
ClientScript += "input.onchange = function() { alert(\"test\"); }";
ClientScript += " }</script>";
ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "script", ClientScript, false);

Kind regards,
Yana
the Telerik team

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

[Lynda Lafreniere]

Thanks for your answer. This solution would work if I had only one grid on the page ... let me explain my situation :

I'm creating a user control that is used as Pager for our radGrids. I have set a javascript function that change the pageSize of a grid. This function takes the id of the combobox where the possible values are listed and the id of the grid that should be modified.

So, on the PageLoad, I just have to do :
combo.Attributes.Add("OnChange", "Pager_ChangePageSize('" + combo.ClientID + "', '" + grid.ClientID + "')");
and all should be ok !

Now, with your technic, only the combobox of the first grid that is loaded get the onchange attribute, the others aren't set (and it's normal). Do you think of a way to come over that ?

And also, don't you think that "combo.Attributes.Add("OnChange","...")" should change the property of the input correctly ? For me, it looks like a little bug. Do you plan to correct it ?

Thanks again !

[Yana]

Hi Lynda,

I am not completely able to understand your scenario. You can use Telerik.Web.UI.RadComboBox.ComboBoxes to obtain an array containing all the client-side combobox instances and assign the event to them. If this doesn't help, please isolate the problem in a sample project and send it to us, so we can test it locally. You should open a support ticket to be able to attach files.Thanks

Greetings,
Yana
the Telerik team

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

[Lynda Lafreniere]

Hi Yana,

I was in a hurry, so I just use a asp dropdownlist with
"attributes.add("onchange", ...)" and it works well (we'll probably keep it that way finaly).

The project i'm working on is big so I will only try to explain you the problem more explicitly :

In our project, we want our custom controls to be really generic so we don't have to set all the properties all the time. So, I've done a UserControl that is used as a pager for our grids. With this pager, the user can change the pageSize with a combobox, navigate between pages with a textbox and buttons and see some stats.
I want that once the pager set for a grid, it controls the grid so I have a script that change the page size of a grid by taking the combo's clientID and the grid's clientID (here the script when I used a radcombobox) :

ClientScript.RegisterClientScript(this.Page,
"Pager_ChangePageSize",
"function Pager_ChangePageSize(combo_id, grid_id) " +
   "{ " +
    "var grid = $find(grid_id); " +
    "if (grid) { " +
        "var tableView = grid.get_masterTableView(); " +
       "var combo = $find(combo_id); " +
       "if (combo){tableView.set_pageSize(combo.get_text());} " +
    "}" +
"}"
);

On the PageLoad (server-side) of the pager, I set the "onchange" property of the radcombobox :
cmb_Pager.Attributes.Add("onchange", "Pager_ChangePageSize('" + cmb_Pager.ClientID + "', '" + Grid.ClientID + "')");
but you know the problem : the onchange property is not set on the input in IE7 with that way.

After, I've tried your code (the script on the pageload). The problem is that on a page, I have multiple grids, so the code is registered many times with differents clientIDs. But because your code set a script on the pageload, only the first script is used, so the first grid of the page works, but not the others.

I tried different ways with script registering but nothing worked as expected (only the first works, only the last works, the clientID is not the good one, etc.).

That was my little problem.

So, I repeat my last message : is this (set the onchange on a radcombobox don't change the input on IE7) will be fixed on a future version ? Because, personaly, I think it's a bug.

Thanks and continue your great work !!

[Yana]

Hello Lynda,

When you set "onchange" to asp dropdownlist, it is set to "select" tag, not to "input", but RadComboBox is rendered differently, so that it doesn't understand "onchange" and this is by design. 

I suggest you use OnClientSelectedIndexChanged event of RadComboBox instead of "onchange". You can subscribe to it like this:

combo.OnClientSelectedIndexChanged = "functionName";

Kind regards, Yana
the Telerik team

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

[Lynda Lafreniere]

Hi again,

I understand your point for the onchange.

Finaly, the OnClientSelectedIndexChanged property worked nice ! I just added the "function Blabla() {...}" because if I don't, my real function was not found (it is created server-side).

cmb_Pager.OnClientSelectedIndexChanged = "function SChangePageSize(){ Pager_ChangePageSize('" + cmb_Pager.ClientID + "', '" + _grid.ClientID + "'); }";

Thanks a lot Yana !

[Vijay]

Hi, 

I was to associate 2 functions to OnClientSelectedIndexChanged,can I add 2 javascript functions. 

Alternatively can I use dropdowncontrol.attributes,add("onchange",JF01();JF_02());

 

 

 

 

[Doncho]

Hi Vijay,

The OnClientSelectedIndexChanged property of the RadComboBox can be used to wire a single handler for the event.

To execute more JavaScript functions you can wire one event listener and call the desired functions inside it:

<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight" OnClientSelectedIndexChanged="onClientSelectedIndexChanged"...>

JavaScript

function onClientSelectedIndexChanged(sender, args) {
    handler1(sender, args);
    handler2(sender, args);
}
function handler1(sender, args) {
    alert("first handler fired");
}
function handler2(sender, args) {
    alert("second handler fired");
}

One more option is to subscribe to the selectedIndexChanged event programmatically for example on the client load event of the control:

<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight" OnClientLoad="onClientLoad"...>

JavaScript

function onClientLoad(sender, args) {
    sender.add_selectedIndexChanged(handler1);
    sender.add_selectedIndexChanged(handler2);
}
function handler1(sender, args) {
    alert("first handler fired");
}
function handler2(sender, args) {
    alert("second handler fired");
}

Please let me know if any further questions come up.

Kind regards,
Doncho
Progress Telerik