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

[Solved] RadTabStrip validating a control on a NestedViewTemplate after template has been closed

3 Answers 100 Views

TabStrip

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

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 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 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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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.

Accepted

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

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).