Hello.

I have a DataList as (PARENT) and a GridView as (CHILD)l. The user should see only ONE expanded division of CHILD data at a time. So, I  have placed the GridView between <div></div> tag to be toggled ON/OFF.  That is, I have to collapse any expanded division in order to show new one.  The DataList has a button to Expand or Collapse the display.

The displayed DataList items will NOT be reloaded from server upon child data display.  Only the child data will be retrieved from db for display.  Retrieving only child data makes me have no access to test all displayed DataList items to collapse the previous displayed division (e.i using a loop such as For Each DL_item In DataList1.Items)

I have used two approaches, none of them worked!!

1^st approach. Server-side & Client side coding:

I am using the following server-side coding to show a hidden division. This is done via SelectedIndexChanged.

       'In selected item, find the division and expand it.
      div = DataList1.Items(DataList1.SelectedIndex).FindControl("GVDiv")
      div.Style.Item("DISPLAY") = "block"

And, in a loop, I'm using the following client-side script to collapse all shown division.  Note that a client-side coding will take care of expanding the needed division.

document.getElementById(DivName).style.display = 'none';

The problem is: Server-side coding does NOT see new changes that the previous division was collapsed!!

So, how to make sever-side coding to see that all divisions were collapsed by client-side script?

2nd approach. Only Server-side coding:

I have stored the ID of the expanded division in a hidden label and then used that ID for collapsing the div.  

This code via SelectedIndexChanged.
 

Dim oBtnExpnd As Button
        Dim oExp As Button
        Dim div As HtmlGenericControl

        oBtnExpnd = DataList1.Items(DataList1.SelectedIndex).FindControl("btnExpand")
        oExp = DataList1.Items(DataList1.SelectedIndex).FindControl("btnExpand")
        div = DataList1.Items(DataList1.SelectedIndex).FindControl("My_GV_Div")

        If oExp.Text = "+" And div.Style.Item("DISPLAY") = "none" Then
            div.Style.Item("DISPLAY") = "block"   'displaying div is working fine to display child data.
            ShowDetails(strConnection)            'display child data at selected division. 
            Dim StoredDivID As New Label            
             StoredDivID = CType(Me.FindControl("IDDiv"), Label)   'find IDDiv label.
            If (StoredDivID.Text <> "none") Then     'default ID of hidden label is none.
                Dim NewDiv As New HtmlGenericControl("div")   'create new division
                NewDiv.ID = StoredDivID.Text  'new created DIV will have ID of previous expanded division.
                NewDiv.Style.Item("DISPLAY") = "none"    'hide previous div.  (== did NOT work!!)
                StoredDivID.Text = div.ClientID          'store selected divsion ID into hidden label.
            Else
                StoredDivID.Text = div.ClientID          'store selected divsion ID into hidden label.
            End If
            oBtnExpnd.Text = "-"
        ElseIf oExp.Text = "-" And div.Style.Item("DISPLAY") = "block" Then
            div.Style.Item("DISPLAY") = "none"           'works fine sicne I am at the same seleced index.
            oBtnExpnd.Text = "+"
        End If

Any ideas how I can correct the problem?

 Thanks

Add a hidden control for each div to store whether it is hidden or showing.

<input type="hidden" id="divStateHidden" name="divStateHidden" value="" runat="server" />

Server-side:
     Hide:
         divStateHidden.Value = "none";
     Show:
         divStateHidden.Value = "block";

Client-side:
     document.getElementById('<%= divStateHidden.ClientID %>').value =
          document.getElementById('<%= yourDiv.ClientID %>').style.display;

NC...

Hello NC 
What you are telling me is to make a type of communication state, right?  I have already tried that in a similar way found in 2nd approach which dose the same result.  The problem is: At postback trip to the server, I can NOT play with any other DIVs other than the selected index (div).  For example: if I want to play with two DIVs at one time ( expanding current index DIV and expanding another one by giving its ID) , then i would not be able to expand the other one by giving its ID. You know why? Because, I am only retrieving data for the GridView only. That is, the ItemDataBound and ItemCreated of DataList are not called.  And since they are not called, I am not able to play with other DIVs.  
So, the idea is NOT only passing the state of the DIVs.

Thanks

Hello NC

 I was thinking of your code.  Do you mean that you want me to run a client-side javascript code at pageload?

I think this is the only solution that I can do!

For those who maybe interested on the solution of my question.

Firstly: thanks to NC for his assisted idea.

 The solution is:

1.  I have a hidden label on my webform where I store the ID of the clicked item.

2.  I have style=display:none as the default settings. See below markup code:

<div id="My_GV_Div" runat="server" style="display:none">

3. I have a client-side script that runs on pageload.  The script will take the ID found on the hidden label and do the expand as shown in the script below.

<script type="text/javascript">

window.onload = function (){

  if (document.getElementById('IDDiv').innerHTML != 'none')     {

      document.getElementById(document.getElementById('IDDiv').innerHTML).style.display = 'block';

    }}     

</script>

 That's it. I hope this helps.

Noorstudio:

For those who maybe interested on the solution of my question.

Firstly: thanks to NC for his assisted idea.

 The solution is:

1.  I have a hidden label on my webform where I store the ID of the clicked item.

2.  I have style=display:none as the default settings. See below markup code:

<div id="My_GV_Div" runat="server" style="display:none">

 

3. I have a client-side script that runs on pageload.  The script will take the ID found on the hidden label and do the expand as shown in the script below.

<script type="text/javascript">

 

window.onload = function (){

  if (document.getElementById('IDDiv').innerHTML != 'none')     {

      document.getElementById(document.getElementById('IDDiv').innerHTML).style.display = 'block';

    }}     

</script>

 

 That's it. I hope this helps.

Exactly. Not sure that window.onload = function will work in all browsers however.

NC...

function minusPlus(div,imgControl){
        var el = document.getElementById(div);
            if ( el.style.display == "none" ) {
                el.style.display = '';
                imgControl.src="images/minus.gif";
            }
            else {
                el.style.display = 'none';
                imgControl.src="images/plus.gif";
            }
        }

in the html part

<img src="images/minus.gif" onclick="minusPlus('Tr1',this);"/>

here the Tr1 is the id of the <div>

may be this will help full to you.....

viral sarvaiya:

function minusPlus(div,imgControl){
        var el = document.getElementById(div);
            if ( el.style.display == "none" ) {
                el.style.display = '';
                imgControl.src="images/minus.gif";
            }
            else {
                el.style.display = 'none';
                imgControl.src="images/plus.gif";
            }
        }

 

in the html part

<img src="images/minus.gif" onclick="minusPlus('Tr1',this);"/>

here the Tr1 is the id of the <div>

may be this will help full to you.....

How could that help if the page does a PostBack, which is what his initial problem was? As soon as the page does a PostBack, everything will return to the way it was before the changes were made.

NC...