Controlling a multipage using a combobox

[Mark P]

Hi there,

I'm trying to control a multipage control using a combobox.  I have added a tabstrip and set the multipageId and I can use the tabs to view each of the pageviews.  I'm using the following code in the combobox's OnClientSelectedIndexChanged event handler.

function OnClientSelectedIndexChanged(sender, eventArgs) {
      var item = eventArgs.get_item();
      var multiPage = $find("<%=RadMultiPageQuickDD.ClientID %>");
      alert(multiPage.get_pageViews().get_count());
      multiPage.set_selectedIndex(item.get_index());
}

For some reason the pageview count is 0.  But I can switch between the pageviews using the tabs.

Below is the code in my ascx file:

<asp:Panel ID="pnlProductType" runat="server" Visible="false" CssClass="">
        <asp:Label ID="lblProductType" runat="server" Text="Product Type" AssociatedControlID="ddlProductType"></asp:Label>
        <telerik:RadComboBox ID="ddlProductType" Runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"></telerik:RadComboBox>
      </asp:Panel>
      <telerik:RadTabStrip ID="RadTabStripQuickDD" runat="server" Skin="Default" MultiPageID="RadMultiPageQuickDD">
      </telerik:RadTabStrip>
      <telerik:RadMultiPage ID="RadMultiPageQuickDD" runat="server" CssClass="pageView" OnPageViewCreated="RadMultiPageQuick_PageViewCreated">
      </telerik:RadMultiPage>

I'm creating the tabs, pageviews, and combobox items at runtime on the server.

Any help would be appreciated.

Regards,

Mark.

[Yana]

Hi Mark,

I guess that you execute the javascript code before the pageviews are added to the multipage. Please send us the code-behind as well.

All the best,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark P]

Hi Yana,

Thanks for your help.

Here are some snippets of code:

Page Load:

protected void Page_Load(object sender, System.EventArgs e) {
  var strProductTypes = DotNetNukeUtils.GetModuleSetting("ProductTypes", this);
  phQuickSearchDropDown.Visible = true;
  pnlProductType.Visible = true;
  if (!Page.IsPostBack) {
    RadTabStripQuickDD.Visible = true;
    pnlProductType.CssClass = "pnlProductType Layout_" + _searchMode.ToString() + _layout.ToString();
    GenerateTabs(strProductTypes, RadTabStripQuickDD, RadMultiPageQuickDD);
  }
}

Methods:

private void GenerateTabs(string tabData, RadTabStrip tabStrip, RadMultiPage multiPage) {
      char[] arrSplit = { '|' };
      var tabCodes = tabData.Split(arrSplit);

      for (var index = 0; index <= tabCodes.GetUpperBound(0); index++) {
        //Add the tab.
        AddTab(tabCodes[index], tabStrip, multiPage);
      }

      tabStrip.SelectedIndex = 0;
      multiPage.SelectedIndex = 0;

    }

private void AddTab(string tabCode, RadTabStrip tabStrip, RadMultiPage multiPage) {
      RadTab tab = new RadTab();

      //Get the tab name
      var strTabName = XPLProxyHelper.GetProductTypeName(tabCode);
      tab.Text = strTabName;
      tab.Value = tabCode;
      tabStrip.Tabs.Add(tab);

      RadPageView pageView = new RadPageView();
      pageView.ID = "obj" + multiPage.ID + tab.Value;
      multiPage.PageViews.Add(pageView);

      //Add to the dropdown
      ddlProductType.Items.Add(new RadComboBoxItem(strTabName, tabCode));

    }

protected void RadMultiPageQuick_PageViewCreated(object sender, RadMultiPageEventArgs e) {

      _searchMode = (SearchMode)DotNetNukeUtils.GetViewState(ViewState, "SearchMode");
      _layout = (LayoutType)DotNetNukeUtils.GetViewState(ViewState, "LayoutType");
      //The form to load (ascx file).
      _strControlName = _searchMode.ToString() + _layout.ToString() + "Form.ascx";

      //string userControlName = this.ModulePath + "/Controls/ProductSearchFormHandler.ascx";
      string userControlName = this.ControlPath + "/Controls/FormTemplates/" + _strControlName;
      var userControl = (ProductSearchForm)Page.LoadControl(userControlName);
      userControl.SearchMode = _searchMode;
      userControl.LayoutType = _layout;
      userControl.ID = e.PageView.ID + "_userControl";
      userControl.FormType = e.PageView.ID.Replace("obj" + ((RadMultiPage)sender).ID, ""); //tab.Value;
      //userControl.Date1SelectedDate = DateTime.Now;
      //userControl.Date2SelectedDate = DateTime.Now.AddDays(1);
      //userControl.DateTimeFormat = "dd MMM yyyy @ h:mm tt";
      userControl.EnableViewState = true;
      userControl.PortalId = this.PortalId;
      userControl.Settings = this.Settings;
      userControl.ModulePath = this.ControlPath;
      userControl.Visible = true;
      userControl.ModuleId = this.ModuleId;
      e.PageView.Controls.Add(userControl);
    }

[Yana]

Hello Mark P,

I've tested this code and it worked without a problem, please check the attached simple project.

Regards,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark P]

Hi Yana,

Thank you for all your help. I ended up getting it work (with the help of your example),  I ended up moving the javascript declaration (using Page.ClientScript.RegisterClientScriptBlock) and that fixed the issue.

Regards,

Mark.