Show and hide columns based on checkbox javascript

Question

0.00/5 (No votes)

See more:

, +

hello i want to hide and show columns in gridview based on checkbox i done half the job but i face problem, i used javascript and the all var value can hide or show good but when i use number value int or sth else this doesn't work teh problem with total column taht has number value i think the var declaration is the problem some1help

What I have tried:

<script type="text/javascript">
    $(function () {
        $("[id*=chkCountry]").click(function () {
            var isChecked = $(this).is(":checked");
            var th = $("[id*=GridView1] th:contains('Country')");
            th.css("display", isChecked ? "" : "none");
            $("[id*=GridView1] tr").each(function () {
                $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
            });
        });
    });
    $(function () {
        $("[id*=Name]").click(function () {
            var isChecked = $(this).is(":checked");
            var th = $("[id*=GridView1] th:contains('Name')");
            th.css("display", isChecked ? "" : "none");
            $("[id*=GridView1] tr").each(function () {
                $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
            });
        });
    });

    $(function () {
        $("[id*=chktotal]").click(function () {
            var isChecked = $(this).is(":checked");
            var th = $("[id*=GridView1] th:contains('Total')");
            th.css("display", isChecked ? "" : "none");
            $("[id*=GridView1] tr").each(function () {
                $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
            });
        });
    });

Posted 20-Mar-17 7:24am

Member 13044689

Updated 20-Mar-17 21:54pm

Add a Solution

Comments

Afzaal Ahmad Zeeshan 20-Mar-17 14:25pm

If you are using jQuery, why don't you start using the jQuery UI? It has some excellent controls available that you can implement — controls which already have these features.

Karthik_Mahalingam 21-Mar-17 1:30am

why not hide() instead of css("display", isChecked ? "" : "none");

Member 13044689 21-Mar-17 2:14am

ok if u recommend another method to hide and show column based on checkbox in gridview u can give me example, i will be appreciate

Karthik_Mahalingam 21-Mar-17 2:30am

post the relevant code for the same
mark up

Member 13044689 21-Mar-17 3:01am

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px"
CellPadding="4" DataKeyNames="Id" DataSourceID="SqlDataSource1">
<columns>
<asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True"
SortExpression="Id" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Country" HeaderText="Country"
SortExpression="Country" />
<asp:BoundField DataField="purchesvalue" HeaderText="purchesvalue"
SortExpression="purchesvalue" />
<asp:BoundField DataField="shippingvalue" HeaderText="shippingvalue"
SortExpression="shippingvalue" />
<asp:BoundField DataField="othercharge" HeaderText="othercharge"
SortExpression="othercharge" />
<asp:BoundField DataField="Total" HeaderText="Total" SortExpression="Total" />

<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
<RowStyle BackColor="White" ForeColor="#330099" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
<SortedAscendingCellStyle BackColor="#FEFCEB" />
<SortedAscendingHeaderStyle BackColor="#AF0101" />
<SortedDescendingCellStyle BackColor="#F6F0C0" />
<SortedDescendingHeaderStyle BackColor="#7E0000" />

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:All_VechConnectionString1 %>"
SelectCommand="SELECT * FROM [test]">

((( this is my table can u plz help me with this))

Karthik_Mahalingam 21-Mar-17 3:07am

what is chkCountry
post the relevant control mark up also.

Member 13044689 21-Mar-17 3:26am

$(function () {
$("[id*=chkCountry]").click(function () {
var isChecked = $(this).is(":checked");
var th = $("[id*=GridView1] th:contains('Country')");
th.css("display", isChecked ? "" : "none");
$("[id*=GridView1] tr").each(function () {
$(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
});
});
});
$(function () {
$("[id*=Name]").click(function () {
var isChecked = $(this).is(":checked");
var th = $("[id*=GridView1] th:contains('Name')");
th.css("display", isChecked ? "" : "none");
$("[id*=GridView1] tr").each(function () {
$(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
});
});
});

$(function () {
$("[id*=chktotal]").click(function () {
var isChecked = $(this).is(":checked");
var th = $("[id*=GridView1] th:contains('Total')");
th.css("display", isChecked ? "" : "none");
$("[id*=GridView1] tr").each(function () {
$(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
});
});
});

the first 2 checkbox work gd but when its come to the last one fuction the total one its not working this column have numbers value
thank u sir

Member 13044689 21-Mar-17 3:31am

<asp:CheckBoxList ID="ChkCountry" runat="server">

<asp:CheckBoxList ID="Name" runat="server">

<asp:CheckBoxList ID="Chktotal" runat="server">

Karthik_Mahalingam 21-Mar-17 3:26am

enclose the code with < pre > tag

Member 13044689 21-Mar-17 3:43am

its didn't work the main problem is when the column have declared as int and include number its not hiding and the var value such as name country is working well idk really

Member 13044689 21-Mar-17 3:50am

<title>

body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
border-collapse: collapse;
background-color: #fff;
}
table th
{
background-color: #B8DBFD;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border: 1px solid #ccc;
}
table, table table td
{
border: 0px solid #ccc;
}

<asp:CheckBox ID="CheckBox1" Text="Purches Value" runat="server" Checked="true" />

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px"
CellPadding="4" DataKeyNames="Id" DataSourceID="SqlDataSource1">
<columns>
<asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True"
SortExpression="Id" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Country" HeaderText="Country"
SortExpression="Country" />
<asp:BoundField DataField="purchesvalue" HeaderText="purchesvalue"
SortExpression="purchesvalue" />
<asp:BoundField DataField="shippingvalue" HeaderText="shippingvalue"
SortExpression="shippingvalue" />
<asp:BoundField DataField="othercharge" HeaderText="othercharge"
SortExpression="othercharge" />
<asp:BoundField DataField="Total" HeaderText="Total" SortExpression="Total" />

<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
<RowStyle BackColor="White" ForeColor="#330099" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
<SortedAscendingCellStyle BackColor="#FEFCEB" />
<SortedAscendingHeaderStyle BackColor="#AF0101" />
<SortedDescendingCellStyle BackColor="#F6F0C0" />
<SortedDescendingHeaderStyle BackColor="#7E0000" />

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:All_VechConnectionString1 %>"
SelectCommand="SELECT * FROM [test]">

$(function () {
$("[id*=CheckBox1]").click(function () {
var isChecked = $(this).is(":checked");
var th = $("[id*=GridView1] th:contains('Purches Value')");
th.css("display", isChecked ? "" : "none");
$("[id*=GridView1] tr").each(function () {
$(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
});
});
});

this is all the code from start to end i need to hide column name purchase value when i lunch the code and check the box is hiding value of total column which its include string ex (ab,cc,dd) but when i use the same function with country and name that have string value ex(dan, usa) its working well why is that happen?

Karthik_Mahalingam 21-Mar-17 3:55am

refer my solution

Member 13044689 21-Mar-17 4:00am

thank u sir its working now iam idiot sorry for taking ur time

Karthik_Mahalingam 21-Mar-17 4:47am

its ok.. learning through mistakes is the first step to excel.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2017-03-20T21:54:00

refer this example

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(function () {
            $('.chkcls').change(function (a, b) {
                var isChecked = a.target.checked;
                var grid = document.getElementById('<%= gv.ClientID%>');
                var target = $(this).attr('column-control');
                var targetTH = $("th:contains('" + target + "')", grid);
                var index = $('th', grid).index(targetTH);
                $('tr', grid).each(function (i, row) { $('td:nth(' + index + ')', row).css("display", isChecked ? "" : "none"); });
                targetTH.css("display", isChecked ? "" : "none");


            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

        <asp:GridView ID="gv" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True"
                    SortExpression="Id" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="Country" HeaderText="Country"
                    SortExpression="Country" />

            </Columns>
        </asp:GridView>


        <asp:CheckBox AutoPostBack="false" Checked="true" column-control="Id" CssClass="chkcls" runat="server" ID="chkid" Text="show hide id" />
        <asp:CheckBox AutoPostBack="false" Checked="true" column-control="Name" CssClass="chkcls" runat="server" ID="chkname" Text="show hide name" />
        <asp:CheckBox AutoPostBack="false" Checked="true" column-control="Country" CssClass="chkcls" runat="server" ID="chkcountry" Text="show hide country" />

    </form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
       {
           if (!Page.IsPostBack)
           {
               DataTable dt = new DataTable();
               dt.Columns.Add("ID");
               dt.Columns.Add("Name");
               dt.Columns.Add("Country");
               dt.Rows.Add(1, "AA", "India");
               dt.Rows.Add(2, "bb", "US");
               dt.Rows.Add(3, "cc", "UK");
               gv.DataSource = dt;
               gv.DataBind();
           }


       }