[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3470
  • Last Modified:

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

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
0
Saroj13
Asked:
Saroj13
  • 10
  • 10
1 Solution
 
Tom BeckCommented:
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

0
 
Saroj13Author 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
0
 
Tom BeckCommented:
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.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Saroj13Author 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
0
 
Tom BeckCommented:
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

0
 
Saroj13Author 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.
0
 
Tom BeckCommented:
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

0
 
Saroj13Author Commented:
If i put javaccript in asp.net amsterpage, its giving error
0
 
Saroj13Author 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";
0
 
Tom BeckCommented:
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.
0
 
Saroj13Author 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

0
 
Tom BeckCommented:
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

0
 
Saroj13Author Commented:
Thanks It worked. But i want to change the font color of title. This is changing the font color of text.
0
 
Tom BeckCommented:
<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

0
 
Saroj13Author 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.
0
 
Tom BeckCommented:
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.
0
 
Saroj13Author 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
0
 
Tom BeckCommented:
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.
0
 
Saroj13Author 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

0
 
Tom BeckCommented:
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

0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 10
  • 10
Tackle projects and never again get stuck behind a technical roadblock.
Join Now