Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2012-03-11
20
Medium Priority
?
3,429 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 10
20 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37706766
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
ID: 37707185
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
ID: 37707431
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
Independent Software Vendors: 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!

 

Author Comment

by:Saroj13
ID: 37707754
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
ID: 37708028
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
ID: 37708039
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
ID: 37708197
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
ID: 37708198
If i put javaccript in asp.net amsterpage, its giving error
0
 

Author Comment

by:Saroj13
ID: 37708199
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
ID: 37708231
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
 

Author Comment

by:Saroj13
ID: 37711591
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
ID: 37711911
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
ID: 37712092
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
ID: 37712706
<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
ID: 37716810
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
ID: 37717399
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
ID: 37717518
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
ID: 37717798
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
ID: 37744933
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 2000 total points
ID: 37745198
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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

618 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