Solved

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

Posted on 2012-03-11
20
3,137 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
0
Comment
Question by:Saroj13
  • 10
  • 10
20 Comments
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:Saroj13
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:Saroj13
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:Saroj13
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:Saroj13
Comment Utility
If i put javaccript in asp.net amsterpage, its giving error
0
 

Author Comment

by:Saroj13
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:Saroj13
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:Saroj13
Comment Utility
Thanks It worked. But i want to change the font color of title. This is changing the font color of text.
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
<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
 

Author Comment

by:Saroj13
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:Saroj13
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:Saroj13
Comment Utility
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now