Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

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

3 Answers 47 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
HammeTech
Top achievements
Rank 2
HammeTech asked on 02 Jul 2014, 06:02 PM
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>

3 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 07 Jul 2014, 08:56 AM
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.

 
0
Accepted
HammeTech
Top achievements
Rank 2
answered on 07 Jul 2014, 02:16 PM
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).
0
Nencho
Telerik team
answered on 10 Jul 2014, 11:36 AM
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.

 
Tags
TabStrip
Asked by
HammeTech
Top achievements
Rank 2
Answers by
Nencho
Telerik team
HammeTech
Top achievements
Rank 2
Share this question
or