ASP.NET - access the grid view control using javascript

Asked By muthuraman alexander on 13-Oct-11 06:55 AM
hi ALL,
i hav a grid view which is having a HTML image and a DIV control in the  template fields
when i click the image button i want to show/hide the div

i dnt want to do this using row_command event
i want to do it in client side (javascript)

i tried by placing code for
img.attributes["onclick"]="javascript functio()";
but i dnt know how to get the div ID of the particular select row

how can i do this

thanks in advance
MUTHU
smr replied to muthuraman alexander on 13-Oct-11 07:08 AM
HI

Following example demonstrates select all and de-select all checkboxs in the gridview control.

<script language="javascript" type="text/javascript">
function SelectAll(SelBtn)
    {
        var gvET = document.getElementById("GridView1");
        var rCount = gvET.rows.length;
        var btnSel = SelBtn.value;
        var rowIdx;
        // check the Page Count is greater than 1 then rowindex will start from 2 else 1
        if(document.getElementById("hidgridpagecount").value>1)
        {
            rowIdx=2;
        }
        else
        {
            rowIdx=1;
        }
        for (rowIdx; rowIdx<=rCount-1; rowIdx++)
        {
            var rowElement = gvET.rows[rowIdx];
            var chkBox = rowElement.cells[0].firstChild;
            if (btnSel == 'Select All')
            {
                chkBox.checked = true;
            }
            else
            {
                chkBox.checked = false;
            }
        }
        if (btnSel == 'Select All')
        {
            document.getElementById('btnSelAll_Top').value ="Deselect All";
            document.getElementById('btnSelAll_Bot').value ="Deselect All";
        }
        else
        {
            document.getElementById('btnSelAll_Top').value ="Select All";
            document.getElementById('btnSelAll_Bot').value ="Select All";
        }
        return false;
    }
</script>

refer
http://www.dotnetspider.com/resources/4389-Accessing-GridView-using-javascript.aspx
TSN ... replied to muthuraman alexander on 13-Oct-11 07:15 AM
hi..

you can do this using Jquery and here i the sample example.. when clicked on the row hides or removes the row...

try using like below...
Remove/Hide ASP.NET GridView Rows on Mouse Click

In our previous sample, we were following a two step process of first highlighting multiple rows and then removing them. Let’s say if we want to remove the rows as the user clicks on them, then follow this approach:
   
<script type="text/javascript">
    $(document).ready(function() {
        $("tr").filter(function() {
          return $('td', this).length && !$('table', this).length
        }).click(function() {
          $(this).remove();
        });
    });    
  </script>

<form id="form1" runat="server">
<div>
  <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City] FROM [Customers]">
  </asp:SqlDataSource>  
  <br />     
  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"DataSourceID="SqlDataSource1" AllowPaging="False" AllowSorting="True" >
    <Columns>             
      <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
      <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
      <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
      <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
      <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
    </Columns>
  </asp:GridView>
</div>
</form>


hope this helps you

Reena Jain replied to muthuraman alexander on 13-Oct-11 07:23 AM
Hi,

you can put id of div tag in grid and than first that control id in javascript and set hide/show as below
var grid = document.getElementById('<%= GridView1.ClientID %>');
 
 for(var i=0; i < grid.rows[index].cells.length; i++)
 
{
 
   //here you can get id of div tag and set display property to none for hide
  document.getElementById("divid").style.display='none';
}
dipa ahuja replied to muthuraman alexander on 13-Oct-11 10:55 AM
Untitled document
<script type="text/javascript">
   var selectedRowIndex = null;
   function onGridViewRowSelected(rowIndex) {
     selectedRowIndex = rowIndex;
     alert(rowIndex);
   
  }
</script>

<asp:LinkButton ID="lnkSelectRow" runat="server">click</asp:LinkButton>

protected void GridView11_RowDataBound(object sender, GridViewRowEventArgs e)
{
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
     LinkButton l = (LinkButton)e.Row.FindControl("lnkSelectRow");
     l.Attributes.Add("onclick", "javascript:onGridViewRowSelected(" +
     e.Row.RowIndex + ")");
   }
}