Why are control values not readable when inside a hidden div?

[Josh Anderson]

I've been having quite a time working around behavior that I just can't imagine is correct.  I have several modal dialog boxes implemented via the jQuery thickbox.  This plugin allows me to specify a div with style="display: none;" to be shown as a modal pop-up.  These divs have server controls in them as well as buttons with server routines behind them.  Unfortunately, while the button clicks will execute the server code, any entry the user puts into other server controls like textboxes is discarded.  On the button click events, the values for those textboxes are the original values with which they were instantiated.  However, if I remove the style="display: none;" from the div and go through the process, the controls' values are all readable.

The only way I can work around this is by putting a hidden field outside of the div and to use javascript to write all the control values to those hidden fields.  It ends up being a cluttered design that really shouldn't be necessary.  What is it about the radAJAX library that doesn't pay attention to server controls inside hidden divs?

Josh

[Dimo]

Hi Josh,

Generally, display:none styles cause some size-related Javascript calculations to stop working, however, all other functionality should be preserved.

Please, provide some demo showing what exactly you are trying to do, so that we can investigate further.

Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[mohsin]

Hi,

I am in a critical problem when I am trying to convert old Telerik.WebControls to new Telerik.Web.UI.

 

Inside the RadAjaxPanel I have a Radgrid and a div . The div is hidden with few controls inside it. When I click an edit button from the RadGrid row, I have shown the div and hide the RadGrid.  Inside the div I have few buttons, those buttons are not working, I mean those buttons click events are not firing.

 

But it was working with Telerik.WebControls. It is not working for Telerik.Web.UI.

 

I am not sure why this is happening. Those buttons has no JavaScript.

 

Hope some one from telerik team will help me out ASAP.

Thanks for your time.

-Mohsin

[mohsin]

 Hi,

I think I should mention few other things too.

I have used custom pager class for my above radGrid!
If I remove that pager, then those DIV buttons are working.

I don’t know what the problem is.

------Pager Class ------

Public Class MyPager
        Inherits Control
        Private paging As GridPagingManager
        Private tableView As GridTableView
        Dim myTextBox, myTextBoxN As TextBox
        Dim myRangeValidator As RangeValidator

        Public Sub New(ByVal paging As GridPagingManager, ByVal tableView As GridTableView)
            Me.paging = paging
            Me.tableView = tableView
            Me.EnsureChildControls()
        End Sub

        Protected Overrides Sub CreateChildControls()

            Dim btnL As LinkButton = New LinkButton
            Dim btnR As LinkButton = New LinkButton
            btnL.ID = "btnL"
            btnL.Text = "<"
            btnR.ID = "btnR"
            btnR.Text = ">"
            btnR.ForeColor = Color.Blue
            btnL.ForeColor = Color.Blue
            Me.Controls.Add(btnL)
            Me.Controls.Add(New LiteralControl("&nbsp;"))
            Me.Controls.Add(btnR)

            Me.Controls.Add(New LiteralControl("&nbsp;&nbsp;"))
            AddHandler btnL.Click, AddressOf Me.BtnL_Click
            AddHandler btnR.Click, AddressOf Me.BtnR_Click


            Me.Controls.Add(New LiteralControl("Page: "))

            myTextBox = New TextBox
            myTextBox.ID = "textbox"
            myTextBox.Columns = 3

            Me.Controls.Add(myTextBox)

            Me.Controls.Add(New LiteralControl(" (of " & Me.paging.PageCount & ") "))

            Dim btn As LinkButton = New LinkButton
            btn.ID = "btn1"
            btn.Text = "Change page"

            btn.ForeColor = Color.Blue

            myTextBoxN = New TextBox
            myTextBoxN.ID = "textboxN"
            myTextBoxN.Columns = 3


            'Me.Controls.Add(New LiteralControl(" (of " & Me.paging.PageCount & ") "))


            Dim ShowMoreButton As New LinkButton()
            ShowMoreButton.ID = "ShowMoreButton"
            ShowMoreButton.Text = "Show Items"
            ShowMoreButton.ForeColor = Color.Blue
            AddHandler ShowMoreButton.Click, AddressOf Me.ShowMoreButton_Click

            Me.Controls.Add(New LiteralControl("&nbsp;"))
            Me.Controls.Add(btn)
            Me.Controls.Add(New LiteralControl("&nbsp;&nbsp;"))
            Me.Controls.Add(New LiteralControl("Number of records per page: "))
            Me.Controls.Add(New LiteralControl("&nbsp;"))
            Me.Controls.Add(myTextBoxN)
            Me.Controls.Add(New LiteralControl("&nbsp;"))
            Me.Controls.Add(ShowMoreButton)
            Me.Controls.Add(New LiteralControl("&nbsp;&nbsp;"))
            Me.Controls.Add(New LiteralControl("Total Records:" + Me.tableView.PagingManager.DataSourceCount.ToString + ""))


            AddHandler btn.Click, AddressOf Me.BtnClick

            myRangeValidator = New RangeValidator
            myRangeValidator.ErrorMessage = " Page index should be in the range of 1 to " & Me.paging.PageCount

            Me.Controls.Add(myRangeValidator)
        End Sub

        Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
            myTextBox.Text = (paging.CurrentPageIndex + 1).ToString()
            myTextBoxN.Text = Me.tableView.PageSize.ToString

            myRangeValidator.Type = ValidationDataType.Integer
            myRangeValidator.MinimumValue = 1.ToString()
            myRangeValidator.MaximumValue = Me.paging.PageCount.ToString()

            myRangeValidator.ControlToValidate = myTextBox.ID

            MyBase.OnPreRender(e)
        End Sub

        Protected Sub BtnClick(ByVal sender As Object, ByVal e As EventArgs)
            If Not (Me.myTextBox.Text.Trim() = "") Then
                Me.tableView.CurrentPageIndex = Integer.Parse(Me.myTextBox.Text) - 1
                Me.tableView.Rebind()
            End If
        End Sub
        Protected Sub BtnL_Click(ByVal sender As Object, ByVal e As EventArgs)
            If Me.tableView.CurrentPageIndex > 0 Then
                Me.tableView.CurrentPageIndex = Me.tableView.CurrentPageIndex - 1
                Me.myTextBox.Text = (Me.tableView.CurrentPageIndex + 1).ToString
                'if Me.tableView.CurrentPageIndex=0 then me.BtnL_Click.
                Me.tableView.Rebind()
            End If
        End Sub

        Protected Sub BtnR_Click(ByVal sender As Object, ByVal e As EventArgs)
            If Me.tableView.CurrentPageIndex < Me.tableView.PageCount - 1 Then
                Me.tableView.CurrentPageIndex = Me.tableView.CurrentPageIndex + 1
                Me.myTextBox.Text = (Me.tableView.CurrentPageIndex + 1).ToString
                Me.tableView.Rebind()
            End If
        End Sub

        Private Sub ShowMoreButton_Click(ByVal sender As Object, ByVal e As EventArgs)
            'Me.tableView.PageSize += 5
            If Not (Me.myTextBoxN.Text.Trim() = "") Then
                Me.tableView.PageSize = Integer.Parse(Me.myTextBoxN.Text)
                Me.tableView.Rebind()
            End If
        End Sub
    End Class

-------------------------------


And here is the RadGrid ItemEvent code.


--------------------

 Protected Sub rgMasterDetail_ItemEvent(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles rgMasterDetail.ItemEvent
            If (TypeOf (e.EventInfo) Is GridInitializePagerItem) Then
                Dim info As GridInitializePagerItem = CType(e.EventInfo, GridInitializePagerItem)
                e.Canceled = True
                Dim pagerItem As GridPagerItem = CType(e.Item, GridPagerItem)
              pagerItem.PagerContentCell.Controls.Add(New MyPager(info.PagingManager, e.Item.OwnerTableView))
            End If
  End Sub

--------------------------------------

This pager is working in all other grids (Telerik.Web.UI) where there is no hidden DIV!

Note:it was working with  hidden DIV for Telerik.WebControls. It is not working for Telerik.Web.UI. for hidden DIV.

Thanks again
---Mohsin

[Iana Tsolova]

Hi mohsin,

I followed your scenario and prepared a sample project attached to this post. However I was not able to replicate the issue there. Could you please check it out and let me know what differs in your case?
 
All the best,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[mohsin]

Hi Iana,

 Sorry for the delay reply!

 I could not run the project as it is .Net 3.5.
I am Using .Net 2 and DNN 4.9.4. and VB.Net.

The problem is for telerik:RadAjaxPanel. If any telerik:RadAjaxPanel inside a DIV is hidden first time and then make the DIV visible,  then the controls are not working, say RadTabStrip, RadCalender etc control are not working. We have been using PageBlaster.  It was working with PageBlaster perfectly with Telerik.WebControls, but it is not working for Telerik.Web.UI. So i think PageBlaster  is ok.

We have upgraded around 20 DNN modules from Telerik.WebControls to Telerik.Web.UI and they have those problem. Right now our website is not working as it was, many important features are not working. As a developer i am frustated!

Please let me know if i need to post tickets for that. Out website is http://www.wantscheck.com/.

We have an account for Telerik user in wantscheck.com, if you like to see those problem live then i will inform it to the wantscheck.com






Hope everything will be ok!

Thanks for your valuabl;e time.
--Mohsin

[Iana Tsolova]

Hello mohsin,

I updated the sample so it runs under .NET 2.0 and the page code behind is in VB.NET. You can try it out and let me know what differs in your case.
Additionally, it would be great if you can send us some of the problematic pages so we could get a better idea of your scenario and try providing a proper resolution for you.

All the best,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.