We help IT Professionals succeed at work.

How hyperlink/linkbutton click expand the gridview row details in asp.net, c# and javascript

Saroj13
Saroj13 asked
on
Medium Priority
3,923 Views
Last Modified: 2012-03-26
Hi,

I have gridview. i am displaying type and title in the Gridview on button click. When linkbutton expand click, it will display the details of the title which is 'text'.  How I can do that. I am posting the code. This code on clicking the expand link, it will just display the details of the first row.

asp.net
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!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>
   <script type="text/javascript">

       var rowVisible = false;

       function toggleDisplay(tbl) {
           alert(document.getElementById("txttable").rows.length);
           alert("test");
           tbl.style.display = "";
           var tblRows = tbl.rows;
           
           for (i = 0; i < tblRows.length; i++) {
               if (tblRows[i].className != "headerRow") {
                   tblRows[i].style.display = (rowVisible) ? "none" : "block";
               }
           }
           rowVisible = !rowVisible;
       }

</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button ID="btnGet" runat="server" Text="Get Selected Records" OnClick="GetSelected" />
    <asp:LinkButton ID="Expand" runat="server"  Text="Expand"  OnClientClick="toggleDisplay(document.getElementById('txttable')); return false;"></asp:LinkButton>  
 
    <asp:Gridview ID="ScriptsGridView" Runat="server" Font-Names="Arial" Font-Size="X-Small" Width="97%" 
              AutoGenerateColumns="False" BorderColor="White" BorderStyle="None" GridLines="None" ShowHeader="False">
              <Columns>
           <asp:TemplateField>
               <ItemTemplate>
                    <asp:CheckBox ID="chkSelect" runat="server"  onclick="changeColor(this)" />
               </ItemTemplate>
        </asp:TemplateField>
         <asp:TemplateField SortExpression="Type" ItemStyle-Wrap=false ItemStyle-VerticalAlign=Top ItemStyle-Width="5px">
               <ItemTemplate>
                 <asp:Label Runat="server" Font-Bold="true" Text='<%# Eval("Type") %>' ID="Type"/>
                </ItemTemplate>
        </asp:TemplateField>                
        <asp:TemplateField SortExpression="Title" ItemStyle-VerticalAlign=Top>
                <ItemTemplate>
                  <asp:Label Runat="server" Font-Bold="true" Text='<%# Eval("Title") %>' ID="Title"/>
                  <table id="txttable" style="display:none;">
                      <tr id="txtrow" className = "headerRow">
                        <td>
                            <asp:Label Runat="server" Font-Bold="true" Text='<%# Eval("Text") %>' ID="Text"/>
                        </td>
                      </tr>
                  </table>
                </ItemTemplate>
        </asp:TemplateField>
    

              </Columns>
              </asp:Gridview>
    </div>
    </form>
</body>
</html>


c#
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Text;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Collections.Generic;
using AjaxControlToolkit;

public partial class Default3 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        
    }

    private void DisplaySearchResults(int intStateID, Boolean bHideSystem)
    {
        SqlDataReader myDataReader;
       
   
        try
        {
            // Create an instance of the Script data access class
            Search objSearch = new Search();
            myDataReader = objSearch.SearchScripts(1, intStateID, bHideSystem, 1, true, false, false, false, 1);

            if (myDataReader.HasRows)
            {
                ScriptsGridView.Visible = true;
                ScriptsGridView.DataSource = myDataReader;
                ScriptsGridView.DataBind();
            
            }
            else
            {
                ScriptsGridView.Visible = false;
            
            }
            objSearch = null;						//--- Destroy the obj...List object	 <font size=3 color=#660000><b> </b></font>

        }

        catch (Exception objExcp)
        {
            // there was an error and no data will be returned
            Response.Write("ERROR: No data returned. " + objExcp.Message);
        }
    }

    protected void GetSelected(object sender, EventArgs e)
    {
        int intStateID = Convert.ToInt32(1016); //get selected StateID value
        DisplaySearchResults(intStateID, false);
        
        

    }
}

Open in new window

thanks
Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2015

Commented:
it will just display the details of the first row
This is because you are supplying the id of the table, but ids must be unique and each of the tables in the gridview are getting the same id. The function finds the first matching element with the id (the first table) and stops. Try this.

The LinkButton:

<asp:LinkButton ID="Expand" runat="server"  Text="Expand"  OnClientClick="toggleDisplay(); return false;"></asp:LinkButton>

Table in the TemplateField:

<table class="headerRow" style="display:none;">
                      <tr>
                        <td>
                            <asp:Label Runat="server" Font-Bold="true" Text='<%# Eval("Text") %>' ID="Text"/>
                       
                        </td>
                      </tr>
                  </table>

Function:

<script type="text/javascript">
       function toggleDisplay() {
           var tables = document.getElementsByTagName("table");
           
           for (i = 0; i < tables.length; i++) {
               if (tables[i].className == "headerRow") {
                    if(tables[i].style.display == "none"){
                        tables[i].style.display = "block";
                        document.getElementById("Expand").innerHTML = "Collapse";
                    }else{
                        tables[i].style.display = "none";
                        document.getElementById("Expand").innerHTML = "Expand";
                    }
               }
           }
       }
</script>

Open in new window

Author

Commented:
Thanks. It work.

I have checbox with every row in the gridview.
 <asp:TemplateField>
               <ItemTemplate>
                    <asp:CheckBox ID="chkSelect" runat="server"  onclick="changeColor(this)" />
               </ItemTemplate>
        </asp:TemplateField>

Question
1. If checkbox is checked, how to make that gridview row highlighted.
2. If the gridview row is expanded by displaying the details("text), then checbox checked will collapse the gridview row.

How this can be done?
Thanks
CERTIFIED EXPERT
Top Expert 2015

Commented:
I'm assuming you want all this to happen on the client side without a postback.

Try this.

Add this to your GridView to identify the rows.
 
        <RowStyle CssClass="everyRow" />

The changeColor function:
function changeColor(ele){
            var rows = document.getElementsByTagName("tr");
            var clickedRow;
            for(i = 0; i < rows.length; i++){
                if(rows[i].className == "everyRow"){
                    var inputs = rows[i].getElementsByTagName("input");
                    for(j = 0; j < inputs.length; j++){
                        if(inputs[j] == ele){
                            clickedRow = j;
                            if(rows[i].style.backgroundColor == "" || rows[i].style.backgroundColor == "undefined"){
                                rows[i].style.backgroundColor = "#def";
                            }else{
                                rows[i].style.backgroundColor = "";
                            }
                            var tables = rows[i].getElementsByTagName("table");
                            for(k = 0; k < tables.length; k++){
                                if(tables[k].style.display == "block"){
                                    tables[k].style.display = "none";
                                }else{
                                    tables[k].style.display = "block";
                                }
                            }
                        }
                    }
                }
            }
       }

Open in new window


Obviously, this can all be done with fewer lines of code using jQuery, but your question says javascript.

Author

Commented:
Thanks.

Issue: If Expand linkbutton expands the title row and showing text.
and if checkbox is selected for any row, checkbox collapse that rows.

Problem: But when user click on collapse link button, that will not collapse the selected checkbox row.

Thanks
CERTIFIED EXPERT
Top Expert 2015

Commented:
Go back and replace the toggleDisplay function with this.
function toggleDisplay() {
           var tables = document.getElementsByTagName("table");
           var toggle = document.getElementById("Expand").innerHTML == "Expand" ? "block" : "none";
           var text = document.getElementById("Expand").innerHTML == "Expand" ? "Collapse" : "Expand";
               
           for (i = 0; i < tables.length; i++) {
               if (tables[i].className == "headerRow") {
                    tables[i].style.display = toggle;
                    document.getElementById("Expand").innerHTML = text;
               }
           }
       }

Open in new window

Author

Commented:
Thanks
Last question:

If the checkbox selected, adding the above code will solve the issue of collapsing. But how do we uncheck the checkboxes and highlighing of checked row.
CERTIFIED EXPERT
Top Expert 2015

Commented:
The only way to uncheck all the checkboxes and restore the background color on callapse or expand would be to loop through again.
function toggleDisplay() {
           var tables = document.getElementsByTagName("table");
           var hl = document.getElementById("Expand");
           var toggle = hl.innerHTML == "Expand" ? "block" : "none";
           hl.innerHTML = hl.innerHTML == "Expand" ? "Collapse" : "Expand";
           for (i = 0; i < tables.length; i++) {
               if (tables[i].className == "headerRow") {
                    tables[i].style.display = toggle;     
               }
           }
           var rows = document.getElementsByTagName("tr");
           for (j = 0; j < rows.length; j++){
                if(rows[j].className == "everyRow"){
                    rows[j].style.backgroundColor = "";
                    var inputs = rows[j].getElementsByTagName("input");
                    for(k = 0; k < inputs.length; k++){
                        if(inputs[k].type == "checkbox"){
                            inputs[k].checked = false;
                        }
                    }
                }
           }
       }

Open in new window

Author

Commented:
If i put javaccript in asp.net amsterpage, its giving error

Author

Commented:
If i put javascript in asp.net masterpage, its giving error. it gives error  on this line
 var toggle = document.getElementById("Expand").innerHTML == "Expand" ? "block" : "none";
CERTIFIED EXPERT
Top Expert 2015

Commented:
That line does not appear in my latest version of the toggleDisplay function. Anyway, it depends what the id of your asp:ContentPlaceholder for the page that holds the HyperLink.

For example, if the ContentPlaceholder id is "Content1", then you could use something like this to get the actual id of the LinkButton.

var hl = document.getElementById("<%=Content1.ClientID%>_Expand");

This would replace line three in my last version of toggleDisplay.

Author

Commented:
Thanks
How we can change the fontcolor in place of background color of  title when checkbox selected if titles are expanded.
   if (rows[i].style.backgroundColor == "" || rows[i].style.backgroundColor == "undefined") {
                               rows[i].style.backgroundColor = "#def";
                           } else {
                               rows[i].style.backgroundColor = "";
                           }

Open in new window

CERTIFIED EXPERT
Top Expert 2015

Commented:
I'm no longer certain of what you want to happen when check boxes are checked and the expand/collapse link is clicked because of all the changes. Try this script and see if it is what you want to happen.

<script type="text/javascript">
       function toggleDisplay() {
           var hl = document.getElementById("Expand");
           var toggle = hl.innerHTML == "Expand" ? "block" : "none";
           hl.innerHTML = hl.innerHTML == "Expand" ? "Collapse" : "Expand";
           var rows = document.getElementsByTagName("tr");
           var fontColor;
           for (j = 0; j < rows.length; j++){
                var tables = rows[j].getElementsByTagName("table");
                if(rows[j].className == "everyRow"){
                    var inputs = rows[j].getElementsByTagName("input");
                    for(k = 0; k < inputs.length; k++){
                        if(inputs[k].type == "checkbox"){
                            if(inputs[k].checked == true){
                                fontcolor = "#f00";
                            }else{
                                fontcolor = "#000";
                            }
                        }
                    }
                }
                for (i = 0; i < tables.length; i++) {
                    if (tables[i].className == "headerRow") {
                        tables[i].style.color = fontColor;
                        tables[i].style.display = toggle;     
                    }
                }
           }           
       }
       function changeColor(ele){
            var rows = document.getElementsByTagName("tr");
            var fontColor;
            for(i = 0; i < rows.length; i++){
                if(rows[i].className == "everyRow"){
                    var inputs = rows[i].getElementsByTagName("input");
                    for(j = 0; j < inputs.length; j++){
                        if(inputs[j] == ele){
                            var tables = rows[i].getElementsByTagName("table");
                            if(inputs[j].checked == true){
                                fontColor = "#f00";
                            }else{
                                fontColor = "#000";
                            }
                            for(k = 0; k < tables.length; k++){
                                if (tables[k].className == "headerRow") {
                                    tables[k].style.color = fontColor;
                                }
                            }
                        }
                    }
                }
            }
       }
</script>

Open in new window

Author

Commented:
Thanks It worked. But i want to change the font color of title. This is changing the font color of text.
CERTIFIED EXPERT
Top Expert 2015

Commented:
<script type="text/javascript">
       function toggleDisplay() {
           var hl = document.getElementById("Expand");
           var toggle = hl.innerHTML == "Expand" ? "block" : "none";
           hl.innerHTML = hl.innerHTML == "Expand" ? "Collapse" : "Expand";
           var rows = document.getElementsByTagName("tr");
           var fontColor;
           for (j = 0; j < rows.length; j++){
                var tables = rows[j].getElementsByTagName("table");
                var spans = rows[j].getElementsByTagName("span");
                if(rows[j].className == "everyRow"){
                    var inputs = rows[j].getElementsByTagName("input");
                    for(k = 0; k < inputs.length; k++){
                        if(inputs[k].type == "checkbox"){
                            if(inputs[k].checked == true){
                                fontcolor = "#f00";
                            }else{
                                fontcolor = "#000";
                            }
                        }
                    }
                }
                for (i = 0; i < tables.length; i++) {
                    if (tables[i].className == "headerRow") {
                        tables[i].style.display = toggle;     
                    }
                }
                for (k = 0; k < spans.length; k++){
                    if (spans[k].id.indexOf("Title") != -1){
                        spans[k].style.color = fontColor;
                    }
                }
           }           
       }
       function changeColor(ele){
            var rows = document.getElementsByTagName("tr");
            var fontColor;
            for(i = 0; i < rows.length; i++){
                if(rows[i].className == "everyRow"){
                    var inputs = rows[i].getElementsByTagName("input");
                    for(j = 0; j < inputs.length; j++){
                        if(inputs[j] == ele){
                            var spans = rows[i].getElementsByTagName("span");
                            if(inputs[j].checked == true){
                                fontColor = "#f00";
                            }else{
                                fontColor = "#000";
                            }
                            for(k = 0; k < spans.length; k++){
                                if (spans[k].id.indexOf("Title") != -1) {
                                    spans[k].style.color = fontColor;
                                }
                            }
                        }
                    }
                }
            }
       }
</script> 

Open in new window

Author

Commented:
Hi,

On buttob submit, Checkbox and title are displaying in the gridview.
Below script is doing the folloing:
1. If 'ExpandAll' linkbutton is clicked, it will expand the gridview row details, which is its displaying the details of the "title" which is "text"
2: If click on checkbox, it will change the font color of the title
3. CollapseAll will collapse all the rows and displaying again gridview with checkbox and title.

The things that are not working now:
1.  In the above steps, if we do step2 , clicking the checkbox will change the font color, but its not collapsing the details of that row
2. Unchecking the checkbox is no more collapsing the details of that row.
3. If we click on collapseall, it will collapse the details; but checked title remains checked with fontcolor displaing red.

thanks.
CERTIFIED EXPERT
Top Expert 2015

Commented:
I suggest you go back to the earlier scripts I have provided where unchecking the checkbox collapses the details. You can then modify your script to get the functionality you need. I don't have the data you are using in your GridView so I cannot see what you see. I can only provide generic examples in javascript showing how it is possible to manipulate the rendered grid when responding to click events. If programmers could always provide complete cut-and-paste code on a forum like EE, then there would be no reason to hire them.

And I would like to point out once again, before another kool-aid drinking, jQuery worshiper on this forum does, that this whole operation would be simpler to do in jQuery.

Author

Commented:
i need help in javascript as i am new. plz help me.

i want on checkbox click, it will collapse the details. its not collapsing. it is changing the font color of title. that is good. but collapsing is not working.

thanks again
CERTIFIED EXPERT
Top Expert 2015

Commented:
Collapsing is not working because collapsing was a function of a previous script I posted. The latest script changes the font color of the title as per your request.

Please make an effort to write some code yourself that you can then post if you are having difficulties. That would probably be quicker than waiting for me as I am away from a computer right now.

Author

Commented:
Hi

I tried and merged the code


1. If click on ExpandAll, it will display the details of the title ; Click on the checkbox  in front of the title, it will make the title font color red and collapse that title row details.

2. CollapseAll link collapse the details of all the titles.
Above 1 and 2 are working fine.

What is not working:
By doing first two steps, collapse all is not making the selected checkbox title unchecked and fontcolor displays red for checked title. I want if collapse all  clicked, it will uncheck the checkbox, turns the font color back to original color and collapse all the titles.

Thanks



<script type="text/javascript">
      function toggleDisplay() {
          var hl = document.getElementById("ExpandAll");
          var toggle = hl.innerHTML == "Expand All" ? "block" : "none";
          hl.innerHTML = hl.innerHTML == "Expand All" ? "Collapse All" : "Expand All";
          var rows = document.getElementsByTagName("tr");
          var fontColor;
          for (j = 0; j < rows.length; j++) {
              var tables = rows[j].getElementsByTagName("table");
              var spans = rows[j].getElementsByTagName("span");

              if (rows[j].className == "everyRow") {
                           var inputs = rows[j].getElementsByTagName("input");
                  for (k = 0; k < inputs.length; k++) {
                      if (inputs[k].type == "checkbox") {
            
                          if (inputs[k].checked == true) {
                              fontcolor = "#f00";
                          } else {
                              fontcolor = "#688FCF";
                          
                          }

                      }
                  }
              }

              for (i = 0; i < tables.length; i++) {
                  if (tables[i].className == "headerRow") {
                     
                      tables[i].style.display = toggle;
                  }
              }

              for (k = 0; k < spans.length; k++) {
                  if (spans[k].id.indexOf("Title") != -1) {
                      spans[k].style.color = fontColor;
                     
                  }
              }


          }
      }



      function changeColor(ele) {
          var rows = document.getElementsByTagName("tr");
          var fontColor;
          var clickedRow;
          for (i = 0; i < rows.length; i++) {
              if (rows[i].className == "everyRow") {
                  var inputs = rows[i].getElementsByTagName("input");
                  for (j = 0; j < inputs.length; j++) {
                      if (inputs[j] == ele) {
//                  
                          var tables = rows[i].getElementsByTagName("table");
                          var spans = rows[i].getElementsByTagName("span");

                          if (inputs[j].checked == true) {
                              fontColor = "#f00";
                          } else {
                              fontColor = "#688FCF";
                              for (k = 0; k < tables.length; k++) {
                                  if (tables[k].style.display == "block") {
                                      tables[k].style.display = "none";
                                  } else {
                                      tables[k].style.display = "block";
                                  }

                              }
                              
                          }

                          for (k = 0; k < tables.length; k++) {
                              if (tables[k].style.display == "block") {
                                  tables[k].style.display = "none";
                              } else {
                                  tables[k].style.display = "block";
                              }

                          }

                          for (m = 0; m < spans.length; m++) {
                              if (spans[m].id.indexOf("Title") != -1) {
                                  spans[m].style.color = fontColor;
                              }
                          }



                      }
                  }
              }
          }
      }

</script> 

Open in new window

CERTIFIED EXPERT
Top Expert 2015
Commented:
Is this right?
function toggleDisplay() {
          var hl = document.getElementById("ExpandAll");
          var toggle = hl.innerHTML == "Expand All" ? "block" : "none";
          var rows = document.getElementsByTagName("tr");
          var fontColor;
          for (j = 0; j < rows.length; j++) {
              var tables = rows[j].getElementsByTagName("table");
              var spans = rows[j].getElementsByTagName("span");

              if (rows[j].className == "everyRow") {
                  var inputs = rows[j].getElementsByTagName("input");
                  for (k = 0; k < inputs.length; k++) {
                      if (inputs[k].type == "checkbox") {            
                          if (inputs[k].checked == true) {
                              if(toggle == "none"){
                                  inputs[k].checked = false;
                                  fontColor = "#688FCF";
                              }else{
                                  fontColor = "#f00";
                              }                         
                          }else{
                              fontColor = "#688FCF";
                          }
                      }
                  }
              }

              for (i = 0; i < tables.length; i++) {
                  if (tables[i].className == "headerRow") {                     
                      tables[i].style.display = toggle;
                  }
              }

              for (k = 0; k < spans.length; k++) {
                  if (spans[k].id.indexOf("Title") != -1) {
                      spans[k].style.color = fontColor;                     
                  }
              }
          }          
          hl.innerHTML = hl.innerHTML == "Expand All" ? "Collapse All" : "Expand All";
      }

      function changeColor(ele) {
          var rows = document.getElementsByTagName("tr");
          var hl = document.getElementById("ExpandAll");
          var fontColor;
          var clickedRow;
          for (i = 0; i < rows.length; i++) {
              if (rows[i].className == "everyRow") {
                  var inputs = rows[i].getElementsByTagName("input");
                  for (j = 0; j < inputs.length; j++) {
                      if (inputs[j] == ele) {
//                  
                          var tables = rows[i].getElementsByTagName("table");
                          var spans = rows[i].getElementsByTagName("span");

                          if (inputs[j].checked == true) {
                              fontColor = "#f00";
                          } else {
                              fontColor = "#688FCF";
                              for (k = 0; k < tables.length; k++) {
                                  if (tables[k].style.display == "block") {
                                      tables[k].style.display = "none";
                                  } else {
                                      tables[k].style.display = "block";
                                  }
                              }                              
                          }

                          for (m = 0; m < spans.length; m++) {
                              if (spans[m].id.indexOf("Title") != -1) {
                                  spans[m].style.color = fontColor;
                              }
                          }
                      }
                  }
              }
          }
      }

Open in new window