javascript hide multiple gridview rows

Question

DropDownList items

a
b
c

GridView

X | B | C | D | E
a | 1 | 2 | 3 | 4
b | 2 | 2 | 2 | 2
c | 3 | 3 | 3 | 3

When DropDownList.SelectedItem = a

Hide GridView.Rows = b & c

When DropDownList.SelectedItem = b

Hide GridView.Rows = a & c

and so on

Anyone know the javascript for doing this client-side?

Sang Suantak · Accepted Answer · 2011-05-20 08:18:51Z

2

Assuming the dropdownlist's id is alpha and the gridview's tbl, you can do it this way:

$(document).ready(function(){
  $("#alpha").change(function(){
    var selVal = $(this).find(":selected").text();   
   var rows =   $("#tbl tr:gt(0)");    
    if (selVal == "ALL") {           
       $("#tbl tr").show();          
    }
    else {        
       var rowToShow = rows.find("td:eq(0)").filter(":contains(" + selVal + ")").closest("tr");
    rows.show().not( rowToShow ).hide();
    }
  });   
});

Here is an example in JS BIN

edited May 20, 2011 at 8:18

answered May 20, 2011 at 7:27

Sang Suantak

5,2652 gold badges30 silver badges46 bronze badges

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

4 Comments

Pod Mays Over a year ago

@jsang how do you make it show all the rows again? like if there's a dropdownlist.item = "ALL", then reset to show all rows.

Pod Mays Over a year ago

@jsang for some reason it does not work on my project. <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jQuery/1.2.6/jQuery.min.js"> </script> <script type="text/javascript"> $(document).ready(function () { $("#ddmodel").change(function () { var selVal = $(this).text(); alert(selVal); var rows = $("#gvtop tr:gt(0)"); var rowToShow = rows.find("td:eq(3)").filter(":contains(" + selVal + ")").closest("tr"); rows.show().not(rowToShow).hide(); }); });</script>

Pod Mays Over a year ago

@jsang it still doesn't work. i think jquery doesn't work on my end. is this the only line i have to add in the markup? <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Pod Mays Over a year ago

it's too long to be pasted in the comments, i posted here thanks stackoverflow.com/questions/6069435/…

seoul · Accepted Answer · 2011-05-20 07:15:14Z

0

Sharing a sub-pseudo code below:

Array listFromGridView = [a,b,c];

// get parent dropdownbox and save for future reference
var drop=$("#dropdownBoxID);

drop.bind('click',function(e){ 

// get all element in an array
Array tempList= listFromGridView;

// remove the element which was clicked
// $(this) = the dropdownbox, $(this).val() = selected value
tempList.remove( $(this).val() );

// iterate and hide rows
foreach( element el in tempListView)
// code for hide goes here
});

// Done :-)

answered May 20, 2011 at 7:15

seoul

8661 gold badge12 silver badges32 bronze badges

Collectives™ on Stack Overflow

javascript hide multiple gridview rows

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related