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

RadGrid disappears inside MultiPage with TabStrip

2 Answers 170 Views

Grid

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

Steven asked on 28 Nov 2012, 12:55 AM

I know this is AJAX related, but I can't seem to figure it out. I have a TabStrip with a MultiPage and PageViews. On one of the PageViews is a RadGrid. For some reason when I click the Add button on the RadGrid (or do anything for that matter) I have to click to another tab and back to see the change. I thought I could solve this by adding the grid and the multipage to the AJAX Manager, but that's not working. I've tried wrapping the grid in its own AJAX panel, but that didn't work either.

Ideas?

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PurchaseRequestControl.ascx.cs" Inherits="Controls.PurchaseRequestControl" %>

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

<link href="../Styles/PurchaseRequestStyleSheet.css" rel="stylesheet" type="text/css" />

<asp:PlaceHolder runat="server" ID="placeHolder">

<script type="text/javascript">

function onNavigate(isMoveNext) {

var tabs = $find('<%= tabStrip.ClientID %>');

var totalNumOfTabs = tabs.get_tabs().get_count();

if (totalNumOfTabs > 0) {

var newTabIndex;

var currentTabIndex = tabs.get_selectedIndex();

if (isMoveNext) {

if (currentTabIndex + 2 == totalNumOfTabs) {

newTabIndex = 0;

}

else {

newTabIndex = currentTabIndex + 2;

}

else {

if (currentTabIndex - 1 < 0) {

newTabIndex = totalNumOfTabs - 2;

}

else {

newTabIndex = currentTabIndex - 2

}

tabs.set_selectedIndex(newTabIndex);

}

</script>

</asp:PlaceHolder>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="tabStrip">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="tabStrip" />

<telerik:AjaxUpdatedControl ControlID="multiPage" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="multiPage">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="tabStrip" />

<telerik:AjaxUpdatedControl ControlID="multiPage" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="cartgrdItems">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="multiPage" LoadingPanelID="ajaxLoadingPanel" />

<telerik:AjaxUpdatedControl ControlID="tabStrip" LoadingPanelID="ajaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="ajaxLoadingPanel" InitialDelayTime="500"></telerik:RadAjaxLoadingPanel>

<div id="control-wrapper">

<div class="title-and-nav">

<span></span>

<telerik:RadTabStrip runat="server"

ID="tabStrip"

MultiPageID="multiPage"

CssClass="tab-strip"

EnableEmbeddedSkins="False"

AutoPostBack="true"

OnTabClick="tabStrip_TabClick">

<Tabs>

<telerik:RadTab IsSeparator="true" Text="1" CssClass="tab-number" Enabled="false"></telerik:RadTab>

<telerik:RadTab CssClass="tab" SelectedCssClass="tab-selected" Text="Buyer" PageViewID="pvBuyer"></telerik:RadTab>

<telerik:RadTab IsSeparator="true" Text="2" CssClass="tab-number" Enabled="false"></telerik:RadTab>

<telerik:RadTab CssClass="tab" SelectedCssClass="tab-selected" Text="Supplier" PageViewID="pvSupplier"></telerik:RadTab>

<telerik:RadTab IsSeparator="true" Text="3" CssClass="tab-number" Enabled="false"></telerik:RadTab>

<telerik:RadTab CssClass="tab" SelectedCssClass="tab-selected" Text="Shipping" PageViewID="pvShipping"></telerik:RadTab>

<telerik:RadTab IsSeparator="true" Text="4" CssClass="tab-number" Enabled="false"></telerik:RadTab>

<telerik:RadTab CssClass="tab" SelectedCssClass="tab-selected" Text="Cart" PageViewID="pvCart"></telerik:RadTab>

<telerik:RadTab IsSeparator="true" Text="5" CssClass="tab-number" Enabled="false"></telerik:RadTab>

<telerik:RadTab CssClass="tab" SelectedCssClass="tab-selected" Text="Review" PageViewID="pvReview"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</div>

<telerik:RadMultiPage runat="server" ID="multiPage" RenderSelectedPageOnly="true">

<telerik:RadPageView runat="server" ID="pvCart" CssClass="page-view">

<div class="controls-container">

<telerik:RadGrid runat="server"

ID="cartgrdItems"

AllowPaging="True"

AllowSorting="True"

AutoGenerateColumns="true"

AutoGenerateDeleteColumn="True"

AutoGenerateEditColumn="True"

CellSpacing="0"

GridLines="Horizontal"

GroupingEnabled="False"

ondeletecommand="cartgrdItems_DeleteCommand"

oninsertcommand="cartgrdItems_InsertCommand"

onupdatecommand="cartgrdItems_UpdateCommand">

<MasterTableView

EnableNoRecordsTemplate="true"

CommandItemDisplay="TopAndBottom"

EditMode="InPlace"

InsertItemPageIndexAction="ShowItemOnCurrentPage">

<CommandItemSettings ShowAddNewRecordButton="true" AddNewRecordText="Add Item" />

<NoRecordsTemplate>Add Items</NoRecordsTemplate>

</MasterTableView>

</telerik:RadGrid>

</div>

<br />

<div class="navigation-buttons">

<asp:Button ID="cartbtnPrevious" runat="server" Text="Previous" OnClientClick="onNavigate(false); return false;" CssClass="nav-button"/>

<asp:Button ID="cartbtnNext" runat="server" Text="Next" OnClientClick="onNavigate(true); return false;" CssClass="nav-button" />

</div>

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

2 Answers, 1 is accepted

answered on 30 Nov 2012, 05:16 PM

RadGridTabStripAjaxification.zip

Hello Steven,

I have created a sample RadGrid web site using the provided mark-up. On my side everything works correctly when all of the PageViews are added to the page. Please check out the attached application and let me know about the result.

Kind regards,
Eyup
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.