If DropDownList Selected Index Changed, hide gridview rows

Question

How do i call the event dropdownlist.selectedindex.changed on client-side?

Can this be done with javascript/jquery?

What should I include in the markup to enable javascripts?

<%@ Page Title="Report" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Report.aspx.cs" Inherits="Report" %>

 <%@ PreviousPageType VirtualPath="~/Top.aspx" %>

I was looking to do something like this

IF SelectedValue = 2, Hide Row 1,2,3, and 4
IF SelectedValue = 3, Hide Row 11,21,31, and 41

You'll have to give a bit more information, yes it can be done but what you do want to hide? certain rows, the whole grid? — TBohnen.jnr, May 20 '11 at 05:14
if dropdownlist gets changed, then hide gridview rows. i want to do this on client-side, how should the javascript look like? — Pod Mays, May 20 '11 at 05:22
@TBohnen just some certain rows. i believe i included that in the topic title. — Pod Mays, May 20 '11 at 05:23
Do you know the row index which you want to hide upon selected Index change ? — Muhammad Akhtar, May 20 '11 at 05:25

score 3 · Accepted Answer · edited Feb 17 '16 at 16:25

3

You can attach the onchange event to javascript on your dropdown. Then whenever your selected Index changes it will fire and call the javascript update method, in which you can hide that particular row.

<asp:DropDownList ID="ddl" onchange="javascript:update();"

here is JavaScript code

<script language="javascript" type="text/javascript">
    function update() {
        var ri = 2; // I suppose that you know the Index of Row Which you want to hide
        var grd = document.getElementById('<%= grd.ClientID %>');
        grd.rows[ri].style.display = 'none';
    }

</script>

edited Feb 17 '16 at 16:25

Off The Gold

1,228
15
28

answered May 20 '11 at 05:33

Muhammad Akhtar

51,913
37
138
191

@Muhammad is it possible to hide dynamic rows? or more like this: hide multiple rows when selectedvalue = 2 and so on. – Pod Mays May 20 '11 at 06:06
@Pod; yes, But you need to pass the RowIndex to your javascript method. – Muhammad Akhtar May 20 '11 at 06:07
@muhammad how do i pass a value to the javascript method? is it like c#? update(selectedvalue, rowtohide)? – Pod Mays May 20 '11 at 06:10
Is your dropdwon inside the gridview row, on which Selected value you want to hide row? – Muhammad Akhtar May 20 '11 at 06:14
@muhammad no the gridview and dropdown controls are separate – Pod Mays May 20 '11 at 06:36
I can see in your question, you know the rows, which you want to hide. But if you want to pass to JS method, you can pass into command seperate like. update('1,2,3,4,5') and then in JS method, you can split the values in array and iterate and hide rows. – Muhammad Akhtar May 20 '11 at 06:47
@muhammad i haven't used javascript before, can you give me an example here? http://stackoverflow.com/questions/6068348/javascript-hide-multiple-gridview-rows – Pod Mays May 20 '11 at 06:54

If DropDownList Selected Index Changed, hide gridview rows

1 Answers1