This is a migrated thread and some comments may be shown as answers.

RadPageView is not loaded when a tab is selected from the client

3 Answers 385 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

klac asked on 17 May 2017, 10:41 PM

I'm selecting the initial tab in javascript and while the tab gets selected and the RadPageView gets selected, a postback does not occur to load the page.Clicking on the other tab will load that page and clicking back to the original tab will then load that page as well. Is there another way to select the tab and cause a postback?

Thanks

<%@ Page Language="C#" Inherits="TestPage" CodeBehind="TestPage.aspx.cs" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Title</title>

</head>

<body>

<form id="form1" runat="server" style="height: 100%">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rtsCCC">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rtsCCC"></telerik:AjaxUpdatedControl>

<telerik:AjaxUpdatedControl ControlID="rmpCCC"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadTabStrip runat="server" ID="rtsCCC" RenderMode="Lightweight" MultiPageID="rmpCCC" Style="line-height: 0" AutoPostBack="True" OnClientLoad="OnTabStripLoaded">

<Tabs>

<telerik:RadTab runat="server" Text="Tab1" Value="t1" />

<telerik:RadTab runat="server" Text="Tab2" Value="t2" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="rmpCCC" RenderSelectedPageOnly="True" Height="100%" >

<telerik:RadPageView runat="server" ID="rpvTab1" Height="100%" Style="overflow: hidden">

Tab1 content

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="rpvTab2" Height="100%" Style="overflow: hidden">

Tab2 content

</telerik:RadPageView>

</telerik:RadMultiPage>

</form>

<script type="text/javascript">

var tabStrip = null;

function OnTabStripLoaded(sender)

{

tabStrip = sender;

setTimeout(function () {

var tab = tabStrip.findTabByValue("t2");

tab.select();

}, 1000);

}

</script>

</body>

</html>

3 Answers, 1 is accepted

answered on 22 May 2017, 12:02 PM

Hi,

You can simply set the Selected property of the desired tab and page view to true. The SelectedIndex of the MultiPage is also an option.

If you want to do this with JS, use the .click() method of the tab to simulate the actual click operation, otherwise only the appearance is changed via the select() or set_selected() method, which works best for pure client-side implementations.

Regards,

Marin Bratanov
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.