Hi 

I am using ADC gridview control in my project and its doing fine . Now once i started to implement jQuery in my application , I thought of enhancing the look and feel as well as the overall elegance of gridview control by adding more client side feature in it using jQuery .

But since there is nothing which is actually rendered ( in view source of the page)  in case of gridview control ie no tr , tds etc so there is now way I can implement some client side functionality from my side to the control .

I guess the point which I am trying to make is somewhat clear .

Looking forward to hear from someone from this froum .

Cheers .

You will not see anything when using view-source except the initial table. You have to use Firebug in Firefox or the IE developer toolbar for IE to inspect the control. I would go with Firebug. What exact features are you trying to add?

 Hi

Some visual clue I need to add to the gridview ie in the gridview wherever field value is "Escalated" I need to highlight the cell . I know this can be done with jQuery quiet easily but I was not sure how to do it since I was not able to see any rows in the view source .

For eg :-

$(document).ready(function () {

$('#GridView1 tr').each(function (index){ alert(index);

});

});

For the above jQuery code , there was no output or say no alert window .

But on your advice I will use the tool IE web developer to inspect the records and see how to operate on it using jQuery .

I will try and if it works out then I will provide a sample code here in the current thread .

You have to use the clientId of the GridView1 control, something like: ctl00_MainContent_GridView1.

Or directly use the ClientID keyword 

$('#' + <%=GridView1.ClientID%> + ' tr') ...

 Hi

I have been working quiet hard enough to implement jQuery on ADC gridview control . But unfortunately it is not working . Following are the various outcome's of my work .

Following is the screen shot of the GridView control markup when viewed in IE web development helper tool :-

<Table id="GridView1" class="tableText">
|
|--<THEAD>
|--<TBODY>
   |--<TR class="RowStyle">
   |--<TR class="AlternatingRowStyle">
   |--<TR class="RowStyle">
   |--<TR class="AlternatingRowStyle">
   |--<TR class="RowStyle">    
|--<TFOOT>

Following jQuery code is what I am trying to execute :-

 $(document).ready(function() {
            $('#GridView1')
            .each(function(index) {
                alert(index); --> output 1
            });
    
     $('#GridView1 thead).each(function(index){ alert(index); --> no alert window });  
     $('#GridView1 tbody).each(function(index){ alert(index); --> output 1});
     $('#GridView1 tbody tr).each(function(index){ alert(index); --> no alert window });

        });

The above code snippet is just a sample out of all the various combination of instruction which I have tried to execute .

I will be really thankfull if anyone can provide me a sample code on how to work with jQuery and ADC control . If these two things work with each other seemlessely then I can rest assure that I can go ahead with ADC controls for future development .

Hello Pawan,

You can not use GridView1 in the jQuery selector. You have to use the clientid. Please see Xun's post above.

Hello

I know I can't give directly the id of the control if I have master page in my web page . But for me this is not what is the issue . The code snippet which I have provided above explains where I am facing the difficulty . The problem is with jQuery I am able to find out the the out table tag , tbody tag but after that I am not able to find the rows using jQuery selectors .

If I say

$('ctl00_childContentPage_GridView1 tbody').each(function(index) { alert(index);}); --> here I get alert window with value '0' since I have one ADC gridview control in my page . But

$('ctl00_childContentPage_GridView1 tbody tr').each(function(index) { alert(index);}); --> No alert window and this is where the rpoblem lies .

Hope I am able to clarify the problem which I am facing . 

This worked for me:

$(document).ready(function() {
        $('#ctl00_ContentPlaceHolder1_ViewCountries1_Countries tbody tr').each(function(index) { alert(index); });
    });

 Hi

Well I have tried all possible combinations but still no-luck . I have no idea whay after tBody tag , jQuery is not able to figure out other tr tags .

And I also tried in other pages wherein I have ADC gridview control but end result is still the same .

Did you add the # into the jquery the way I did above?

 Hi

Yes I have tried by giving # also before the unique id of the gridview control and still I am not getting anything . Can I know which version of jQuery you are using . I am using version 1.3.2 with VS2008 .

I used version jquery-1.3.1 and VS2008. Can you try if your jquery code works with a hardcoded table or another HTML element?

I do not know why your output is different /wrong. I took your example, fixed the syntax errors (may not be yours), and get the results I expected.

The following is the complete code. I got alert window each step of the way.

===================================

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="jquery-1.2.6.js" type="text/javascript"></script>

<script language="javascript">
    $(document).ready(function() {
        $('#GridView1').each(function(index) {
            alert(index);
        });

        $('#GridView1 thead').each(function(index) { alert(index); });
           $('#GridView1 tbody').each(function(index){ alert("tbody " + index); });
        $('#GridView1 tbody tr').each(function(index){ alert(index);});
       
    });
       
  </script>
</head>
<body>

<Table id="GridView1" class="tableText">

<THEAD>
</thead>
 <TBODY>
   <TR class="RowStyle"></tr>
   <TR class="AlternatingRowStyle"></tr>
   <TR class="RowStyle"></tr>
   <TR class="AlternatingRowStyle"></tr>
   <TR class="RowStyle">    </tr>
</tbody>
<table>

</body>
</html>

 Hello

I have tried all possible options like using different version of jQuery , creating seperate solution and then trying etc but end result is still the same .

But I am really thankful to all of you for your continous support . And they day when it will work for me I will post the solution in the same thread .

Cheers ...