[Solved] TabStrip + RadPageView + RadGrid

[Jake]

Hello,

I'm having a bit of an issue with combining a TabStrip, RadPageView and RadGrid elements all on the same AJAX page.

While the tabs change properly when they are clicked, the RadGrid elements are only shown in read-only mode and are not editable.

Here is my code for the TabStrip and RadPageView:

01.<telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" SelectedIndex="0" Skin="Silk" Align="Center" AutoPostBack="true">
02.    <Tabs>
03.        <telerik:RadTab Text="Edit Job Sites" Width="200px" PageViewID="RadPageViewEditJobSites"></telerik:RadTab>
04.        <telerik:RadTab Text="Edit Users" Width="200px" PageViewID="RadPageViewEditUsers"></telerik:RadTab>
05.        <telerik:RadTab Text="Edit Schedule Colors" Width="200px" PageViewID="RadPageViewEditColors"></telerik:RadTab>
06.    </Tabs>
07.</telerik:RadTabStrip>
08.<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" CssClass="outerMultiPage" RenderSelectedPageOnly="True">
09.    <telerik:RadPageView runat="server" ID="RadPageViewEditJobSites">
10.        <uc:PageViewEditJobSites runat="server" ID="PageViewEditJobSites" />
11.    </telerik:RadPageView>
12.    <telerik:RadPageView runat="server" ID="RadPageViewEditUsers">
13.        <uc:PageViewEditUsers runat="server" ID="PageViewEditUsers" />
14.    </telerik:RadPageView>
15.    <telerik:RadPageView runat="server" ID="RadPageViewEditColors">
16.        <uc:PageViewEditScheduleColors runat="server" ID="PageViewEditScheduleColors" />
17.    </telerik:RadPageView>
18.</telerik:RadMultiPage>
19.<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
20.</telerik:RadAjaxLoadingPanel>
21.<telerik:RadAjaxManager ID="RadAjaxManager2" runat="server">
22.    <AjaxSettings>
23.        <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
24.            <UpdatedControls>
25.                <telerik:AjaxUpdatedControl ControlID="RadTabStrip1"></telerik:AjaxUpdatedControl>
26.                <telerik:AjaxUpdatedControl ControlID="RadMultiPage1"></telerik:AjaxUpdatedControl>
27.            </UpdatedControls>
28.        </telerik:AjaxSetting>
29.        <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
30.            <UpdatedControls>
31.                <telerik:AjaxUpdatedControl ControlID="RadMultiPage1"></telerik:AjaxUpdatedControl>
32.            </UpdatedControls>
33.        </telerik:AjaxSetting>
34.    </AjaxSettings>
35.</telerik:RadAjaxManager>

Here is the code for one of the control elements:

01.<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
02.    <ContentTemplate>
03.        <telerik:RadGrid ID="grdJobsites" runat="server" AllowPaging="True" PageSize="25" Width="99.7%" AllowSorting="true" DataSourceID="sdsJobsites"
04.            Skin="Web20" Height="245px" AllowAutomaticUpdates="True" AllowAutomaticEdits="True" AllowAutomaticInserts="true" EnableAJAXLoadingTemplate="true" EnableAJAX="True">
05.            <PagerStyle Mode="NumericPages" />
06.            <ClientSettings EnableRowHoverStyle="true">
07.                <Selecting AllowRowSelect="true" />
08.                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
09.            </ClientSettings>
10.
11.            <MasterTableView AutoGenerateColumns="False" DataKeyNames="LocationRID" ClientDataKeyNames="LocationRID" TableLayout="Fixed" DataSourceID="sdsJobsites" CommandItemDisplay="Top" EditMode="InPlace">
12.                <CommandItemSettings ShowExportToExcelButton="false" ShowAddNewRecordButton="true" AddNewRecordText="Add New Jobsite"
13.                    ShowExportToPdfButton="False" ShowRefreshButton="false"></CommandItemSettings>
14.                <Columns>
15.
16.                    <telerik:GridEditCommandColumn UniqueName="edit" ButtonType="ImageButton" HeaderText="Edit" HeaderStyle-Width="40px" />
17.
18.                    <telerik:GridBoundColumn DataField="LocationRID" HeaderText="LocationRID" Visible="false" SortExpression="LocationRID" UniqueName="LocationRID" />
19.                    <telerik:GridBoundColumn DataField="LocationCode" HeaderText="Code" SortExpression="LocationCode" UniqueName="LocationCode" HeaderStyle-Width="40px" ColumnEditorID="TextBoxCode" />
20.                    <telerik:GridBoundColumn DataField="LocationName" HeaderText="Name" SortExpression="LocationName" ColumnEditorID="TextBoxEditor" UniqueName="LocationName" ItemStyle-Wrap="True" HeaderStyle-Width="25%" />
21.                    <telerik:GridBoundColumn DataField="LocationDetails" HeaderText="Details" SortExpression="LocationDetails" ColumnEditorID="TextBoxEditor" UniqueName="LocationDetails" ItemStyle-Wrap="True" HeaderStyle-Width="25%" Display="false" />
22.                    <telerik:GridBoundColumn DataField="LocationAddress" HeaderText="Address" SortExpression="LocationAddress" ColumnEditorID="TextBoxEditor" UniqueName="LocationAddress" ItemStyle-Wrap="True" HeaderStyle-Width="35%" />
23.                    <telerik:GridBoundColumn DataField="State" HeaderText="ST" SortExpression="State" UniqueName="State" ColumnEditorID="TextBoxshort" HeaderStyle-Width="20px" />
24.                    <telerik:GridBoundColumn DataField="initMapZoom" HeaderText="Zoom" SortExpression="initMapZoom" ColumnEditorID="TextBoxshort" UniqueName="initMapZoom" ItemStyle-Wrap="false" HeaderStyle-Width="25px" />
25.                    <telerik:GridBoundColumn DataField="OrderByValue" HeaderText="Order" SortExpression="OrderByValue" ColumnEditorID="TextBoxshort" UniqueName="OrderByValue" ItemStyle-Wrap="True" HeaderStyle-Width="25px" />
26.
27.                    <telerik:GridCheckBoxColumn DataField="isActive" HeaderText="Visible" SortExpression="isActive" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center"
28.                        HeaderStyle-HorizontalAlign="Center" UniqueName="isActive" EditFormColumnIndex="1" />
29.                </Columns>
30.            </MasterTableView>
31.        </telerik:RadGrid>
32.
33.        <div style="text-align: right; vertical-align: middle;">
34.
35.            <asp:ImageButton ID="JobSiteCloseBtn" runat="server" Text="Cancel" OnClientClick="cancelAndClose(); return false;" ImageUrl="~/IconImages/CloseBtn.jpg" />
36.        </div>
37.
38.        <telerik:GridTextBoxColumnEditor runat="server" ID="TextBoxEditor" TextBoxStyle-Width="100%" TextBoxMode="MultiLine" TextBoxStyle-Height="58px" TextBoxMaxLength="500" />
39.        <telerik:GridTextBoxColumnEditor runat="server" ID="TextBoxShort" TextBoxStyle-Width="30px" TextBoxMode="SingleLine" TextBoxMaxLength="2" />
40.        <telerik:GridTextBoxColumnEditor runat="server" ID="TextBoxCode" TextBoxStyle-Width="40px" TextBoxMode="SingleLine" TextBoxMaxLength="50" />
41.
42.        <asp:SqlDataSource ID="sdsJobsites" runat="server" ConnectionString="<%$ ConnectionStrings:dbConnection %>"
43.            SelectCommand="select * from DeliveryMap_Jobsite order by [OrderByValue] " SelectCommandType="Text"
44.            UpdateCommand="update DeliveryMap_Jobsite set LocationCode=@LocationCode, LocationName = @LocationName, LocationDetails=@LocationDetails, isActive=@isActive, LocationAddress = @LocationAddress, [state]=@state,initMapZoom=@initMapZoom ,OrderByValue=@OrderByValue where LocationRID = @LocationRID" UpdateCommandType="Text"
45.            InsertCommand="insert into DeliveryMap_Jobsite (LocationCode, LocationName, LocationDetails, LocationAddress, State, initMapZoom, OrderByValue, isActive) values (@LocationCode, @LocationName, @LocationDetails, @LocationAddress, @State,@initMapZoom,@OrderByValue, @isActive)" InsertCommandType="Text">
46.
47.            <UpdateParameters>
48.                <asp:Parameter Name="LocationCode" Type="String" />
49.                <asp:Parameter Name="LocationName" Type="String" />
50.                <asp:Parameter Name="LocationDetails" Type="String" />
51.                <asp:Parameter Name="LocationAddress" Type="String" />
52.                <asp:Parameter Name="LocationRID" Type="Int32" />
53.                <asp:Parameter Name="State" Type="String" />
54.                <asp:Parameter Name="initMapZoom" Type="Int32" />
55.                <asp:Parameter Name="OrderByValue" Type="Int32" />
56.                <asp:Parameter Name="isActive" Type="Int32" />
57.            </UpdateParameters>
58.            <InsertParameters>
59.                <asp:Parameter Name="LocationCode" Type="String" />
60.                <asp:Parameter Name="LocationName" Type="String" />
61.                <asp:Parameter Name="LocationDetails" Type="String" />
62.                <asp:Parameter Name="LocationAddress" Type="String" />
63.                <asp:Parameter Name="State" Type="String" />
64.                <asp:Parameter Name="initMapZoom" Type="Int32" />
65.                <asp:Parameter Name="OrderByValue" Type="Int32" />
66.                <asp:Parameter Name="isActive" Type="Int32" />
67.
68.            </InsertParameters>
69.
70.        </asp:SqlDataSource>
71.    </ContentTemplate>
72.</asp:UpdatePanel>

Any help is greatly appreciated.

Thanks,
Jake

[Bozhidar]

Hi,

Since you've already put the RadMultiPage in the AjaxSettings of the RadAjaxManager, you don't have to put each user control inside an UpdatePanel. This causes the issues. Remove the UpdatePanel from the grid page and the site should work properly.

Regards,
Bozhidar
Telerik

[Jake]

Thanks, Bozhidar.  That did the trick!