How to reference Telerik Client-Side control from custom Ajax Client-Side Control?

[Skywalker]

Here is the situation: I wrote a Clientside control, that is composed of the RadTabStrip control, using the ASP.NET AJAX client libraries .

I want my client-side control class to be able to handle events from the client-side TabStrip, like tabSelected.

This is easily done like this:

	initialize: function()
	{
	MyControls.WizardTabStrip.callBaseMethod(this, 'initialize');
	// Add custom initialization here
	this._tabSelectedHandler                =   Function.createDelegate(this, this._onTabSelected);
	// The next line fails, because the client-side TabStrip object is not yet created: it will be created after our custom client-side control is created
	this.get_tabStrip().add_tabSelected(this._tabSelectedHandler);
	},
	get_tabStripID: function()
	{
	return this._tabStripID;
	},
	set_tabStripID: function(value)
	{
	this._tabStripID = value;
	},
	get_tabStrip: function()
	{
	return $find(this.get_tabStripID());
	},
	_onTabSelected : function(sender, args)
	{
	// Do things when a tab is selected
	}

However, line 9 fails, because the RadTabStrip is a child control of my Composite Control (which implements IScriptControl) and my custom clientside control is $created before the RadTabStrip client-side control is $created.

The easiest solution would be to attach the tabSelected eventhandler for the custom client control instance in the pageLoad() event, but isn't there are smarter way?


Thanks.

[Skywalker]

I included the generated javascript after the page is rendered to the browser to illustrate my issue:

	Sys.Application.add_init(function() {
	$create(MyControls.WizardTabStrip, {"nextStepButtonID":"ctl00_ctl00_ctl00_WorkspaceArea_WorkspaceArea_WorkspaceArea_courseEditor_ctl04_nextStep","previousStepButtonID":"ctl00_ctl00_ctl00_WorkspaceArea_WorkspaceArea_WorkspaceArea_courseEditor_ctl04_previousStep","tabStripID":"ctl00_ctl00_ctl00_WorkspaceArea_WorkspaceArea_WorkspaceArea_courseEditor_wizardTabStrip","validationGroup":null}, null, null, $get("ctl00_ctl00_ctl00_WorkspaceArea_WorkspaceArea_WorkspaceArea_courseEditor_wizardTabStripContainer"));
	});
	Sys.Application.add_init(function() {
	$create(Telerik.Web.UI.RadTabStrip, {"_selectedIndex":0,"_skin":"Telerik","attributes":{},"clientStateFieldID":"ctl00_ctl00_ctl00_WorkspaceArea_WorkspaceArea_WorkspaceArea_courseEditor_wizardTabStrip_ClientState","multiPageID":"ctl00_ctl00_ctl00_WorkspaceArea_WorkspaceArea_WorkspaceArea_courseEditor_wizardMultiPage","selectedIndexes":["0"],"tabData":[{},{},{}],"validationGroup":"Course"}, null, null, $get("ctl00_ctl00_ctl00_WorkspaceArea_WorkspaceArea_WorkspaceArea_courseEditor_wizardTabStrip"));
	});

You see, the "MyControls.WizardTabStrip" client-side control references the "Telerik.Web.UI.RadTabStrip" client-side control in the initialize method.
Of course, that control does not yet exist, as the $create(Telerik.Web.UI.RadTabStrip) method is invoked secondly.

Is there a smart way to change this order?

[Atanas Korchev]

Hi Sipke,

Perhaps you can use the AddComponentProperty method.

Kind regards,
Albert
the Telerik team

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