RadTabStrip validating a control on a NestedViewTemplate after template has been closed

4 posts, 1 answers
  1. HammeTech
    HammeTech avatar
    3 posts
    Member since:
    Mar 2014

    Posted 02 Jul 2014 Link to this post

    I recently upgraded my controls to the 2014 Q2 Release and discovered that a page on my site was not working the way it had with the previous release of the controls that I had been using (2012 Q3... I know, it has been a while since we upgraded).

    The page has a RadTabStrip with multiple tabs/pages.  One of the RadPageView nodes contains an panel with a RadGrid which contains a NestedViewTemplate with a Save and Cancel button on it.

    The functionality I want is that the user should not be able to switch to a different tab while the NestedViewTemplate contents are visible (this functionality didn't work in the previous version; however, the validation blocked the switch as long as data was not keyed into the textbox).  If the Save button is clicked, the data would be validated and if valid the NestedViewTemplate contents are no longer shown (this functionality works).  If the Cancel button is clicked, the NestedViewTemplate contents are no longer shown (works but...) and if the user then attempts to switch to a different tab, they should be able to (this is what does not work in the new release, but did work in the old release).

    What do I need to do to insure the user cannot tab when the NestedViewTemplate is open and so they can tab when it is closed via the "Cancel" button?

    Here is the CodeBehind:
    Imports System.Data
    Imports Telerik.Web.UI
     
    Public Class TestPage
        Inherits System.Web.UI.Page
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not Page.IsPostBack Then
                Dim dt As New DataTable("MyData")
     
                Dim i As Integer = 1
     
                dt.Columns.Add("Key", GetType(Integer))
                dt.Columns.Add("Description", GetType(String))
     
                Dim dr As DataRow = dt.NewRow
                dr("Key") = 1
                dr("Description") = "My Data Row"
                dt.Rows.Add(dr)
     
                Me.MyList.DataSource = dt
                Me.MyList.DataBind()
            End If
        End Sub
     
        Public Sub MyList_ItemCommand(ByVal sender As Object, ByVal e As GridCommandEventArgs)
            If (e.CommandName = RadGrid.ExpandCollapseCommandName) Then
                If Not e.Item.Expanded Then
                    AdjustPageAvailability(False)
                End If
            End If
        End Sub
     
        Public Sub MyList_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
            If (TypeOf e.Item Is GridDataItem) Then
                Dim item = CType(e.Item, GridDataItem)
     
                Dim column = item("ExpandColumn")
                If (column IsNot Nothing) Then
                    column.Controls(0).Visible = True
                End If
            End If
        End Sub
     
        Protected Sub Cancel_Click(ByVal sender As Object, ByVal e As EventArgs)
            For Each item As GridDataItem In MyList.Items
                If item.Expanded Then
                    item.Expanded = False
                End If
            Next
     
            Me.AdjustPageAvailability(True)
        End Sub
     
        Protected Sub Save_Click(ByVal sender As Object, ByVal e As EventArgs)
            Page.Validate(CType(sender, IButtonControl).ValidationGroup)
            If (Not Page.IsValid) Then
                Return
            End If
     
            For Each item As GridDataItem In MyList.Items
                If item.Expanded Then
                    item.Expanded = False
                End If
            Next
     
            Me.AdjustPageAvailability(True)
        End Sub
     
        Private Sub AdjustPageAvailability(ByVal visible As Boolean)
            Dim column As TableCell
     
            For Each item As GridDataItem In Me.MyList.Items
                column = item("ExpandColumn")
                If (column IsNot Nothing) Then
                    column.Controls(0).Visible = visible
                End If
            Next
        End Sub
     
    End Class


    Here is the Markup for the page:
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestPage.aspx.vb" Inherits="Telerik2014Q2Issue.TestPage" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
     
            <tel:RadScriptManager ID="sm" runat="server" ClientIDMode="Static" >
            </tel:RadScriptManager>
     
            <tel:RadTabStrip ID="DetailsTabs" runat="server" SelectedIndex="0" MultiPageID="DetailsPages">
                <Tabs>
                    <tel:RadTab runat="server" Text="Details" />
                    <tel:RadTab runat="server" Text="History" />
                </Tabs>
            </tel:RadTabStrip>
            <tel:RadMultiPage ID="DetailsPages" runat="server" SelectedIndex="0">
                <tel:RadPageView ID="RadPageView1" runat="server">
                    <asp:Panel runat="server" ID="DetailsForm">
                        <h3>DEP Well Details</h3>
                        <p>
                            <tel:RadGrid ID="MyList" runat="server" OnItemDataBound="MyList_ItemDataBound"
                                OnItemCommand="MyList_ItemCommand">
                                <MasterTableView AutoGenerateColumns="False" AllowPaging="False" AllowSorting="False"
                                    AllowCustomPaging="False" HierarchyLoadMode="ServerOnDemand" DataKeyNames="Key">
                                    <Columns>
                                        <tel:GridBoundColumn HeaderText="Description" DataField="Description" />
                                    </Columns>
                                    <NestedViewTemplate>
                                        <asp:Panel ID="Panel1" runat="server">
                                            <h3>More Details</h3>
                                            <div>
                                                <asp:ValidationSummary ID="MyValidationSummary" runat="server" HeaderText="The following errors have occurred:" />
                                                <table>
                                                    <thead></thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <tel:RadTextBox ID="txtNotes" runat="server" TextMode="MultiLine" Rows="4" Columns="60" CssClass="MultiLineTextBox" />
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <asp:RequiredFieldValidator ID="NotesRequired" runat="server" ControlToValidate="txtNotes"
                                                                    Text="* Required" ErrorMessage="Please enter a something in the box." />
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div>
                                                <ul class="inline">
                                                    <li>
                                                        <tel:RadButton ID="Save" runat="server" Text="Save" CausesValidation="true" OnClick="Save_Click" />
                                                    </li>
                                                    <li>
                                                        <tel:RadButton ID="Cancel" runat="server" Text="Cancel" CausesValidation="false" OnClick="Cancel_Click" />
                                                    </li>
                                                </ul>
                                            </div>
                                        </asp:Panel>
                                    </NestedViewTemplate>
                                </MasterTableView>
                            </tel:RadGrid>
                        </p>
                    </asp:Panel>
                </tel:RadPageView>
                <tel:RadPageView ID="RadPageView2" runat="server">
                    <div>
                        <p>History</p>
                    </div>
                </tel:RadPageView>
            </tel:RadMultiPage>
         
        </div>
        </form>
    </body>
    </html>
  2. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 07 Jul 2014 Link to this post

    Hello,

    The reason for the experienced behavior is the fact that the TextBox is still rendered on the page, once the
    NestedViewTemplate Cancel button is clicked. Thus, the validation on the page is still false and it restricts from navigating to the second Tab. I would suggest you to explicitly hide the Panel at the CancelButton click event handler in the following manner :

    Protected Sub Cancel_Click(ByVal sender As Object, ByVal e As EventArgs)
           For Each item As GridDataItem In MyList.Items
               If item.Expanded Then
                   item.Expanded = False
                   item.ChildItem.FindControl("Panel1").Visible = False
               End If
           Next
     
           Me.AdjustPageAvailability(True)
       End Sub

    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    HammeTech
    HammeTech avatar
    3 posts
    Member since:
    Mar 2014

    Posted 07 Jul 2014 in reply to Nencho Link to this post

    Thank you Nencho for your reply and adding the code to set the visibility of the panel to false did allow me to navigate to the new tab without hitting the validation; however, it was only a partial solution because once you set the panel visibility to false, it will not display the next time you expand the row.

    Therefore, I moved your suggested line of code out of the Cancel_Click subroutine and put it into the AdjustPageAvailability subroutine and I restructured the MyList_ItemComamand, Cancel_Click, and Save_Click routines to handle the expand/collapse process in the same manner.

    First, I modified the AdjustPageAvailability subroutine to receive a GridDataItem along with the visible Boolean (By the way, this subroutine is poorly named, its original purpose was to show/hide the expander depending on whether or not details for a item in the grid are displayed).  The code looks for the panel control and then sets the visibility of it to the opposite of the visible Boolean (if the expand column of the grid is visible it means that no details are expanded and therefore the panel should not be visible).
    Private Sub AdjustPageAvailability(ByRef dataItem As GridDataItem, ByVal visible As Boolean)
        Dim column As TableCell
     
        If dataItem IsNot Nothing Then
            Dim panel As Control = dataItem.ChildItem.FindControl("Panel1")
            If panel IsNot Nothing Then
                panel.Visible = Not visible
            End If
        End If
     
        For Each item As GridDataItem In Me.MyList.Items
            column = item("ExpandColumn")
            If (column IsNot Nothing) Then
                column.Controls(0).Visible = visible
            End If
        Next
    End Sub

    Next, I modified the MyList_ItemCommand event handler so that it now makes the call to the AdjustPageAvailability subroutine regardless of the Expanded state and uses the expanded state to set the visibility argument (the event occurs prior to the item being expanded/collapsed; therefore when an item is being expanded, its value for the Expanded property is "False").
    Public Sub MyList_ItemCommand(ByVal sender As Object, ByVal e As GridCommandEventArgs)
        If (e.CommandName = RadGrid.ExpandCollapseCommandName) Then
            Dim dataItem As GridDataItem
            If TypeOf (e.Item) Is GridDataItem Then
                dataItem = e.Item
            Else
                dataItem = e.Item.DataItem
            End If
            AdjustPageAvailability(dataItem, e.Item.Expanded)
        End If
    End Sub

    Then, I created a new subroutine named CollapseExpandedItem.  This subroutine looks through each item of the RadGrid until it finds the item that is expanded and the fires the command event to collapse it.
    Private Sub CollapseExpandedItem()
     
        For Each item As GridDataItem In MyList.Items
            If item.Expanded Then
                item.FireCommandEvent(RadGrid.ExpandCollapseCommandName, Nothing)
                Exit For
            End If
        Next
     
    End Sub

    And finally, I modified the Cancel_Click and Save_Click events to call the CollapseExpandedItem subroutine.

    So now if the user clicks the "Cancel" button, they are able to tab to another tab, and if the panel is visible and they haven't populated the textbox, they will get a validation issue... Next, I need to figure out how to keep them from tabbing while the panel is visible (however, that is not the original purpose of this posting).
  5. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 10 Jul 2014 Link to this post

    Hello Karl,

    I am glad to see that you were able to overcome the faced issue by yourself. In addition, thank you for sharing your solution with the community.

    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top