TabStrip + RadPageView + RadGrid

3 posts, 1 answers
  1. Jake
    Jake avatar
    2 posts
    Member since:
    Nov 2015

    Posted 09 Nov 2015 Link to this post

    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. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 12 Nov 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jake
    Jake avatar
    2 posts
    Member since:
    Nov 2015

    Posted 12 Nov 2015 in reply to Bozhidar Link to this post

    Thanks, Bozhidar.  That did the trick!
Back to Top