Hide Gridview Using Javascript

Question

I Have some Problem in Hiding Rows of Gridview Using Javascript...

My Js Function is

 <script type="text/javascript">
        function HideRows(Gdview) {

            rows = document.getElementById(Gdview).rows;
            for (var i = 0; i < rows.length; i++) {
                if (rows[i].cells[0].type == "checkbox") {

                    if (rows[i].cells[0].childNodes[0].checked) {

                        rows[i].style.display = "none";
                    }

                }
            }


        }
    </script>

I Have a Gridview ID="Gdview" Which has 5 Columns and Every Column has a checkbox with id="Chk" and i placed a Button after the Gridview(Button id="Btn") i wannt to hide the Selected rows using checkboxes..i tried the following code behind..but it is not working..what wud be the problem?? IS this Wrong Way????

protected void Btn_Click1(object sender, EventArgs e)
    {
        Btn.Attributes.Add("onclick", "HideRows('" + Gdview + "')");

    } 

2ND Question Likewise same as first one:

Here i am trying to select and unselect all checkboxes in gridview using respective link buttons...See my markup and JS:

<script type="text/javascript">
        function SelectAll(b) {

            var grid = document.getElementById("<%= Gdview.ClientID %>");
            var cell;
            if (grid.rows.length > 0) {

                for (var i = 0; i < grid.rows.length; i++) {


                    cell = grid.rows[i].cells[0];
                    if (cell.childNodes[0].type == "checkbox")
                        cell.childNodes[0].checked = b; 

                }
            }

        }
    </script>


<asp:GridView ID="Gdview" runat="server" AutoGenerateColumns="False" 
onrowdatabound="Gdview_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="Chk" runat="server" />
</ItemTemplate>
 </asp:TemplateField>
<asp:BoundField HeaderText="SNO" DataField="SerialNo" />
<asp:BoundField HeaderText="Organization" DataField="Organization" />
<asp:BoundField DataField="Origin" HeaderText="Origin"/>
<asp:BoundField DataField="Location" HeaderText="Location" />
<asp:BoundField DataField="Established" HeaderText="Established"/>
<asp:TemplateField>
<ItemTemplate>
 </ItemTemplate>
</asp:TemplateField>
</Columns>
 </asp:GridView>
<asp:LinkButton ID="lnkChekall" runat="server" Text="Chekall"></asp:LinkButton>
<asp:LinkButton ID="lnkUncheck" runat="server" Text="UnCheckAll"></asp:LinkButton>

and i added Rowdatabound event in codebehind:

protected void Gdview_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
           lnkChekall.Attributes.Add("onclick","javascript:SelectAll('" +"true" +"')");
           lnkUncheck.Attributes.Add("onclick", "javascript:SelectAll('" + "false" +"')");

        }
    }

it is not working guys plz help me in my problems with the Javascripts...

Answer 1

EDIT 3

In your second question, I can see there are few problems:

1. You should not add attribute in RowDataBound. It would add the attribute for each row instead of only once.

2. Your javascript is wrong.

3. You should pass boolean true/false to javascript function, not string.

To make it work, Add the attributes at Page_Load:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //PopulateGridView
        PopulateGrid();
    }
    lnkChekall.Attributes.Add("onclick", "javascript:SelectAll(true)");
    lnkUncheck.Attributes.Add("onclick", "javascript:SelectAll(false )");

}

And change your javascript to this:

<script type="text/javascript">
    function SelectAll(b) {

        var grid = document.getElementById("<%= Gdview.ClientID %>");
        var cell;
        if (grid.rows.length > 0) {

            for (var i = 0; i < grid.rows.length; i++) {
                cell = grid.rows[i].getElementsByTagName("input");
                if (cell.length > 0) {
                    cell[0].checked = b;
                }
            }
        }
    }
</script>

You are doing it wrong way! There's no need to call JS from code behind. Just add style to make the row invisible. Here's how I would do it:

In the markup I have my GridView with five check boxes and one row number (Just to populate the Gridview with data). I also have a button :

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server">
            <Columns>
                <asp:TemplateField HeaderText="CheckBox 1">
                    <ItemTemplate>
                       <asp:CheckBox ID="chk1" Text="CheckBox 1" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="CheckBox 2">
                    <ItemTemplate>                        
                       <asp:CheckBox ID="chk2" Text="CheckBox 2" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="CheckBox 3">
                    <ItemTemplate>                        
                       <asp:CheckBox ID="chk3" Text="CheckBox 3" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="CheckBox 4">
                    <ItemTemplate>                        
                       <asp:CheckBox ID="chk4" Text="CheckBox 4" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="CheckBox 5">
                    <ItemTemplate>                        
                       <asp:CheckBox ID="chk5" Text="CheckBox 5" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Row">
                    <ItemTemplate>
                        <%#Container.DataItem %>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:Button ID="Btn" runat="server" Text="Button" OnClick="Button1_Click" />
    </div>
    </form>
</body>
</html>

Now in the code I am populating the GridView with test data. In the button's click event I am looping through all rows of GridView and finding the first CheckBox. If it is checked, I am hiding the row:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //Test Data
        var lst = new List<string>() { "Row 1", "Row 2", "Row 3" };
        GridView1.DataSource = lst;
        GridView1.DataBind();
    }

}

protected void Button1_Click(object sender, EventArgs e)
{
    foreach (GridViewRow row in GridView1.Rows)
    {
        var chk = row.FindControl("chk1") as CheckBox;
        if (chk != null && chk.Checked)
        {
            row.Attributes.Add("style", "display:none");
        }
    }
}

EDIT : If you want to use javascript, still there's no need to assign it from code behind. Add an input to the markup to call js HideRows() function:

   <asp:Button ID="Btn" runat="server" Text="Button" OnClick="Button1_Click" />

And the function in the page should look like this:

<script type="text/javascript" >
    function HideRows(Gdview) {
        var rows = document.getElementById(Gdview).rows;

        for( var i=0; i < rows.length; i++ ) {
            var inputs = rows[i].getElementsByTagName("input");
            if (inputs.length > 0 && inputs[0].checked) {
                        rows[i].style.display = "none";
            }       
        }
    }
</script>

Here's the screenshot before and after clicking the button:

You can download my test project here.

EDIT 2 : If you need to call the function from code behind, just do this:

protected void Button1_Click(object sender, EventArgs e)
{
    //Your other code goes here
    //
    Page.ClientScript.RegisterStartupScript(GetType(), "HideRows", "HideRows('" + GridView1.ClientID + "');", true);
}

Answer 2

client Id of server control is different from the Id you assigned, so try:

document.getElementById("<%= Gdview .ClientID %>")

complete code:

//dont pass as parameter
function HideRows() {

        rows = document.getElementById("<%= Gdview.ClientID %>").rows;
        for (var i = 0; i < rows.length; i++) {
            if (rows[i].cells[0].type == "checkbox") {

                if (rows[i].cells[0].childNodes[0].checked) {

                    rows[i].style.display = "none";
                }

            }
        }
    }