Reputation: 2041
The type of refresh I want doesn't deal with data per se.
Here's the scenario: I have a gridview with 3 columns A, B and C. The user can click on checkboxes a, b and c to make the corresponding columns visible or not. [To be clear, these checkboxes are external to the gridview.]
Now I want the gridview to be refreshed immediately showing only the selected columns after each check box is clicked. How do I do so?
Upvotes: 1
Views: 650
Reputation: 63956
Assuming you have a checkbox for every column in the table (Grid) you can write something like this in jQuery:
$(function() {
$('input:checkbox').change(function() {
//get a reference to the corresponding table column
var $col = $('<#%=grid.ClientID %>' + ' td:nth-child(' + $(this).val() + ')');
if (this.checked) $col.hide();
else $col.show();
});
});
And the corresponding check boxes have a value set to the column indexes in the table. For example:
<input type="checkbox" value="1" /><-- hides first column in grid-->
<input type="checkbox" value="2" /><-- hides second column in grid-->
<input type="checkbox" value="3" /><-- hides third column in grid-->
A shorter/simpler version that may also work for you is this:
$(function() {
$('input:checkbox').change(function() {
var $col = $('table ' + 'td:nth-child(' + $(this).val() + ')');
$col.toggle();
});
});
protected void Check_Clicked(Object sender, EventArgs e)
{
CheckBox theOneClicked= (sender as CheckBox);
if(theOneClicked.ID=="checkbox1")
myGrid.Columns[0].Visible=false;
else if(theOneClicked.ID=="checkbox2")
myGrid.Columns[1].Visible=false;
else if(theOneClicked.ID=="checkbox3")
myGrid.Columns[2].Visible=false;
}
Upvotes: 1