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

TabStrip + RadPageView + RadGrid

2 Answers 56 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jake
Top achievements
Rank 1
Jake asked on 09 Nov 2015, 02:46 PM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 12 Nov 2015, 08:41 AM
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
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 Feedback Portal and vote to affect the priority of the items
0
Jake
Top achievements
Rank 1
answered on 12 Nov 2015, 01:14 PM
Thanks, Bozhidar.  That did the trick!
Tags
TabStrip
Asked by
Jake
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Jake
Top achievements
Rank 1
Share this question
or