I Want to get selected gridview columns through checkboxList

Vasanth Jack

9y884Learn iOS Programming

Note:Here Am using CheckBoxList outisde the Gridview

I have a gridview it contains 13Columns.

Below gridview i have a checkbox contain all the grdivew HeaderRow.

fr example the gridview headerrow contain this Column names

Name Address Number State city Country Sex Email

Below the griview The checkbox like this

[]Name []Address []Number []State []city []Country []Sex []Email

when i check ony Name,Number,State,Email

After i click the ButtonI want this four column only display in the gridview

10 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sreekanth Reddy9y ago
$(function () {
$("[id*=btnGet]").click(function () {
var checked_checkboxes = $("[id*=chkFruits] input:checked");
var message = "";
checked_checkboxes.each(function () {

var text = $(this).closest("td").find("label").html();
var th = $("[id*=GridView1] th:contains(text)");
th.css("display", isChecked ? "" : "none");

});

});
});
Use this snippet in button click.
Sreekanth Reddy9y ago
$(function () {
$("[id*=btnGet]").click(function () {
var checked_checkboxes = $("[id*=chkFruits] input:checked");
var message = "";
checked_checkboxes.each(function () {

var text = $(this).closest("td").find("label").html();
var th = $("[id*=GridView1] th:contains(text)");
th.css("display", isChecked ? "" : "none");

});

});
});
Use this snippet in button click.
Sreekanth Reddy9y ago
$(function () {
$("[id*=btnGet]").click(function () {
var checked_checkboxes = $("[id*=chkFruits] input:checked");
var message = "";
checked_checkboxes.each(function () {

var text = $(this).closest("td").find("label").html();
var th = $("[id*=GridView1] th:contains(text)");
th.css("display", isChecked ? "" : "none");

});

});
});
Use this snippet in button click.
Sreekanth Reddy9y ago
Hai, Please check the ColumnHide.rar file in attachments.

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Country",typeof(string)) });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
foreach (ListItem item in CheckBoxList1.Items)
{
if (item.Selected == false)
{
string selectedValue = item.Value;
foreach (DataControlField col in GridView1.Columns)
{
if (col.HeaderText == selectedValue)
{
col.Visible = false;
}
}
//GridView1.Columns[0].Visible = false;
}
else
{
string selectedValue = item.Value;
foreach (DataControlField col in GridView1.Columns)
{
if (col.HeaderText == selectedValue)
{
col.Visible =true;
}
}
}
}
}
}
Sreekanth Reddy9y ago
foreach (ListItem item in CBList1.Items)
{
if (item.Selected==false)
{
string selectedValue = item.Value;
GridView1.Columns[selectedValue ].Visible=false;
}
}

Use this one in your button click event, if you want the whole operation in button click event.
Sreekanth Reddy9y ago
GridView1.Columns[2].Visible = (sender as CheckBox).Checked;

Write the above code in checked changed event of check box.

Thanks.
Vasanth Jack9y ago
Thanks,

But when i click a button the selected Gridview will Show.
Sreekanth Reddy9y ago
Hope this should work from server side :

protected void OnCheckedChanged(object sender, EventArgs e)
{
GridView1.Columns[2].Visible = (sender as CheckBox).Checked;
}

Check in below link for more info :
http://www.aspsnippets.com/Articles/Dynamically-Show-Hide-TemplateField-column-in-ASPNet-GridView-using-C-and-VBNet.aspx

Mark as accepted if it helps. Thanks.
Vasanth Jack9y ago
Thanks but i want this action in server Side
Sreekanth Reddy9y ago
You can do it from client side as follows :

$(function () {
$("[id*=chkboxId]").click(function () {
var isChecked = $(this).is(":checked");
var th = $("[id*=GridView1] th:contains('ColumnName')");
th.css("display", isChecked ? "" : "none");
});
});

Follow this URL :
http://www.aspsnippets.com/Articles/Show-Hide-ASPNet-GridView-Columns-on-CheckBox-Checked-Unchecked-using-jQuery.aspx