Controlling RadMultiPage with RadComboBox

[Samuel]

I am using Telerik controls to build Sharepoint web parts. We built a solution to our customer using a RadTabStrip and a RadMultiPage, but they now want to see similar functionality using a dropdown list. I am attempting to use the following method to meet the customer's needs:

public override void CreateChildControls()

{

RadMultiPage multiPage = new RadMultiPage();

multiPage.ID = "MasterMultiPage1";

RadPageView newView = new RadPageView();

newView.ID = "PageView1";

RadPageView newView2 = new RadPageView();

newView2.ID = "PageView2";

multiPage.PageViews.Add(newView);

multiPage.PageViews.Add(newView2);

LiteralControl view1 = new LiteralControl("Page 1");

LiteralControl view2 = new LiteralControl("Page 2");

newView.Controls.Add(view1);

newView2.Controls.Add(view2);

RadComboBox box = new RadComboBox();

RadComboBoxItem item1 = new RadComboBoxItem();

RadComboBoxItem item2 = new RadComboBoxItem();

this.Controls.Add(box);

this.Controls.Add(multiPage);

box.Enabled = true;

box.Items.Add(item1);

box.Items.Add(item2);

item1.Text = "Page 1";

item2.Text = "Page 2";

item1.Value = newView.ClientID.Replace('$', '_');

item2.Value = newView2.ClientID.Replace('$', '_');

box.OnClientSelectedIndexChanging = "OnSelectChanging";

box.OnClientSelectedIndexChanged = "OnSelectChanged";

string javascript =

@"

function OnSelectChanging(item, args)

{

var item = args.get_item();

var value = item.get_value();

alert('Hiding element with ID ' + value);

//var multiPage = document.getElementById(value);

//multiPage.style.visible='hidden';

var multiPage = $find('<%='+value+'.ClientID%>');

if(multiPage.get_selected() == true)

{

multiPage.unselect();

multiPage.hide();

}

}

function OnSelectChanged(item, args)

{

var item = args.get_item();

var value = item.get_value();

alert('Showing element with ID ' + value);

//var multiPage = document.getElementById(value);

//multiPage.style.visible='visible';

var multiPage = $find('<%='+value+'.ClientID%>');

if(multiPage.get_selected() == false)

{

multiPage.select();

multiPage.show();

}

}

";

this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MultiPageControl",javascript, true);

}

When the page renders, I select a new option in the drop-down box. I see the first pop-up, and then following error: "'null' is null or not an object." The line number is the line corresponding to the call to $find().

What is the appropriate way to hook a combo box to a multi-page?

[Atanas Korchev]

Hello Samuel,

You cannot use server side expressions (<%= %>) inside javascript code which is emitted from the server side. Also you try to find the multipage based on the id of the pageview which would fail. I suggest you use the index of the related pageview as the value of the combobox item:

item1.Value = "0"
item2.Value = "1";

string javascript = string.Format(
@"function OnSelectChanging(item, args)
{
    var item = args.get_item();
    var value = item.get_value();
    var multiPage = $find('{{0}}');  
    multiPage.set_selectedIndex(parseInt(value));
}", multiPage.ClientID);

I hope this helps,
Albert
the Telerik team

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