How to add events in gridview using Jquery

Question

0.00/5 (No votes)

See more:

I am using search functionality in gridview using Jquery as mentioned in this article

http://www.aspsnippets.com/Articles/Search-GridView-with-Paging-on-TextBox-KeyPress-using-jQuery-in-ASPNet.aspx[^]

Search functionality is working perfectly but the problem is there is no events on row click :-(

Is there any way to attach all events(RowCommand, RowDataBound etc.) written in code behind?

Posted 11-Apr-14 17:08pm

Sumit_Pathak

Updated 11-Apr-14 17:11pm

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 11-Apr-14 23:23pm

From the standpoint of jQuery, there is not "gridview"; there are Table and other HTML DOM elements...
You simply need to get all rows by selector and add event.
—SA

Sumit_Pathak 11-Apr-14 23:35pm

but how to do this i need solution, please help me to getout from this problem @SA

Sergey Alexandrovich Kryukov 11-Apr-14 23:38pm

Done. Please see Solution 1. Your follow-up questions will be welcome.
—SA

3 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)

Sergey Alexandrovich Kryukov · Answer 1 · 2014-04-11T17:34:00

Solution 1

Please see my comment to the question.

Most likely, the HTML element to click is the table row, <tr>. For simplicity, let's assume you have only one table on the page. Then you need to get a wrapper of the element object using jQuery selectors. This selector will return the whole set of all row elements:

JavaScript

allRows = $("tr"); // element selector

Now you need to add some handler to all the rows:

JavaScript

allRows.click(function() {
   // so something on click
});

Please see:
http://api.jquery.com/category/selectors[^],
http://api.jquery.com/category/events/mouse-events[^],
http://api.jquery.com/click[^].

[EDIT]

Do do different processing for different elements (as it is indicated in the comment below, depending on id value), use a different form of the handler, with event object:

JavaScript

allRows.click(function(eventObject) {
   // so something on click
   // eventObject will be a wrapper of the tr element
   // so you can use any data associated with it
});

—SA

Posted 11-Apr-14 17:34pm

Sergey Alexandrovich Kryukov

Updated 11-Apr-14 18:24pm

v3

Comments

Sumit_Pathak 12-Apr-14 0:11am

sir, i want to bind id on row but the thing is every row should bind with different id so i pass different ids on every row..@SA

Sergey Alexandrovich Kryukov 12-Apr-14 0:26am

This is explained in the documentation on .click() referenced above. Please see my update to the answer, after [EDIT].
I hope, after this clarification you will accept the answer formally (green "Accept" button). Or is anything still unclear?
—SA

Sumit_Pathak 12-Apr-14 4:20am

i might be accept your answer but i am not clearly understand that how i get particular row and each row will have unique id. +4 for your suggestion.

Sergey Alexandrovich Kryukov 12-Apr-14 5:57am

You suggested unique id, not me. Your row is eventObject. You already got a row clicked. You don't even need id. From a row, you can calculate any property, including its attributes. Any questions?
—SA

Member 8030133 9-Oct-15 12:30pm

You could get a unique row index doing the following:
First, get the parent table. Since you are using a GridView control, the table will only exist if data is bound to the control in the server side code (redundant, but bears repeating).
Second, use find('tr').not(':first-child') to eliminate the header row from the returned collection. If you are using a footer row defined in the control, also use .not(':last-child').
Next, use the jQuery.makeArray method on the row collection.
Finally, you can use $.each([array], function(index, tr){ //do stuff here to each tr element }); to get each index.
Note that you have to use the index in the callback function of the each function the you define on the array.

Enjoy!

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 2 · 2014-04-11T18:38:00

Solution 2

I wrote one Tip on Fire GridView SelectedIndexChanged Event without Select Button[^].

Here I am attaching onclick attribute to the Row inside RowDataBound Event. It fires the SelectedIndexChanged event on Row Click.

I hope it helps you.

Posted 11-Apr-14 18:38pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Yogesh Kumar Tyagi · Answer 3 · 2014-04-11T18:55:00

Solution 3

See This Article:-

Handling GridView events using RowCommand and using jQuery[^]

Posted 11-Apr-14 18:55pm

Yogesh Kumar Tyagi