How to using jquery in ASP.NET gridview dropdown filter

Question

0.00/5 (No votes)

See more:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet" />

<script>
        $('#<%=DropDownList1.ClientID %>')
    </script>

<asp:GridView ID="gvchaptername" AutoGenerateColumns="false" GridLines="None"
              OnRowDeleting="gvchaptername_RowDeleting" OnRowDataBound="gvchaptername_RowDataBound" runat="server" >

<asp:TemplateField  HeaderText="">
             <ItemTemplate>
            <asp:DropDownList ID="DropDownList1" class="dropdown" AutoPostBack="true"  OnSelectedIndexChanged="ddchapter_SelectedIndexChanged"   Width="160" DataTextField="CHAPTER" DataValueField="ID"  CssClass="form-control btn-sm"  runat="server"></asp:DropDownList>
             </ItemTemplate>
            </asp:TemplateField>

</Columns>

        </asp:GridView>

What I have tried:

I got DropDownList1 error

$('#<%=DropDownList1.ClientID %>')

this is working outsife of gridview

Posted 27-Aug-20 4:11am

Member 12856488

Updated 27-Aug-20 5:06am

Add a Solution

2 solutions

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)

Asif 7969814 · Answer 1 · 2020-08-27T04:31:00

Solution 1

To acess of gridview ItemTemplate controle you should use code like that

add property of dropdown [DropDownList1] as clientidmode="static"

var gv = document.getElementById("<%=gvchaptername.ClientID %>");
     var dropvalue = gv.getElementsByTagName('DropDownList1');

var dropvalue = $("#ddrateplan").val();

Please check following code project link for reffrence

How to get the gridview item template element in javascript[^]

how to get selected value in javascript from dropdownlist of gridview - Stack Overflow[^]

Posted 27-Aug-20 4:31am

Asif 7969814

Comments

F-ES Sitecore 27-Aug-20 10:51am

What if the grid view has more than one row?

Asif 7969814 27-Aug-20 10:55am

use loop like that

var table = document.getElementById("gvchaptername");

if (table.rows.length > 0) {
//loop the gridview table
for (var i = 1; i < table.rows.length; i++)

{

//get all the input elements

var inputs = table.rows[i].getElementsByTagName("input");

for (var j = 0; j < inputs.length; j++) {

//get the textbox1

if (inputs[j].id.indexOf("Textbox1") > -1) {
alert(inputs[j].value);
}

}

}
}

F-ES Sitecore 27-Aug-20 11:01am

The html is still invalid, ids have to be unique. There is no point in using the id attribute if it isn't unique.

Asif 7969814 27-Aug-20 11:35am

GridView with Itemtemplate is a collection of the same id objects. we have to use a loop row number to the identified object. Please share a screen shot where javascript has an error. I just want to know what is the target Just access dropdown value or something else.

F-ES Sitecore 27-Aug-20 11:50am

If you make the id static then all rows will give the dropdown the same id making the html invalid and the dropdowns inaccessible by id. This code

<asp:GridView ID="gvchaptername" AutoGenerateColumns="false" GridLines="None" OnRowDataBound="gvchaptername_RowDataBound" runat="server" >
    <Columns>
        <asp:TemplateField  HeaderText="">
                <ItemTemplate>
            <asp:DropDownList ID="DropDownList1" class="form-control" ClientIDMode="Static" runat="server"></asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
    </Columns>
</asp:GridView>

<script type="text/javascript">
    $("#DropDownList1").css("border-color", "red");
</script>

results in this;

https://imgur.com/a/h2VNvV4

F-ES Sitecore · Answer 2 · 2020-08-27T05:06:00

I'd add a data attribute to your dropdowns that will allow you to identify and access them;

ASP.NET

<asp:DropDownList ID="DropDownList1" class="dropdown" data-type="ddl_chapter" AutoPostBack="true" ...

For your js code you have to remember there may be more than one dropdown so if you want to access their individual properties you will need some kind of loop;

HTML

<script type="text/javascript">
    $.each($("[data-type='ddl_chapter']"), function (index, item) {
        var ddl = $(item);
        alert('Drop down ' + index + ' has value ' + ddl.val());
    });
</script>

If you are wanting to target them as a whole using jquery selectors then do something like

JavaScript

$("[data-type='ddl_chapter']").css("border-color", "red");