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...

afzalulh · Accepted Answer · 2013-12-23 18:30:32Z

1

EDIT 3

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

You should not add attribute in RowDataBound. It would add the attribute for each row instead of only once.
Your javascript is wrong.
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: enter image description here

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);
}

edited Dec 23, 2013 at 18:30

answered Dec 22, 2013 at 3:14

afzalulh

7,9432 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ajay Finian Over a year ago

Thats good it worked,,,but is der any way to do this with Using JAvascript function?? i mean i want to hide rows which are checked after button click!!!

afzalulh Over a year ago

@user3035687 - yes, you can do it in js. Please see the edit.

Ajay Finian Over a year ago

but why i could not call JS in Button click...i tried with linkbutton alsoo still not implementing function..i tried another example alsoo ..

afzalulh Over a year ago

@user3035687 - Yes, you can. Edit 2 shows how you can call it in button click. You have to add ` Page.ClientScript.RegisterStartupScript(GetType(), "HideRows", "HideRows('" + GridView1.ClientID + "');", true);` in your button click method.

afzalulh Over a year ago

Don't forget to change your HideRows() method with the code shown here.

|

Zaheer Ahmed · Accepted Answer · 2013-12-21 14:38:43Z

0

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";
                }

            }
        }
    }

edited Dec 21, 2013 at 14:38

answered Dec 21, 2013 at 14:32

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

4 Comments

Ajay Finian Over a year ago

In Codebehind??I have to call like this?? Btn.Attributes.Add("onclick", "HideRows()");

Zaheer Ahmed Over a year ago

any error you getting, also try removing quotation like getElementById(<%= Gdview.ClientID %>)

Mike Schwartz Over a year ago

If you explicitly know the id of the gridview. Then you can just reference it like this: document.getElementById(Gdview);

Ajay Finian Over a year ago

Not Getting any Errors,,I tired with out Quotes also,,,how could i know my JS function working Properly?? and Is the Way of Calling the JS function in Codebehind is correct???

Collectives™ on Stack Overflow

Hide Gridview Using Javascript

2 Answers 2

9 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related