CODEWITHSUNDEEP
javascriptjqueryasp.net
Sri
Sri

Reputation: 174

how to get hidden column value in gridview using jquery

in my gridview control i have 4 columns and 1 column is invisible and Email Address Column is Invisible

    <asp:GridView id='gridData' runat='server'>
     <Columns>
    <asp:TemplateField>
                         <ItemTemplate>
                             <asp:Label ID="lblUsername" runat="server"
  Text='<%# Bind("ToUsername") %>'></asp:Label>
                         </ItemTemplate>
                     </asp:TemplateField>
    <asp:TemplateField>
                         <ItemTemplate>
                             <asp:Label ID="lblfirstname" runat="server" 
Text='<%# Bind("Firstname") %>'></asp:Label>
                         </ItemTemplate>
                     </asp:TemplateField>
    <asp:TemplateField>
                         <ItemTemplate>
                             <asp:Label ID="lbllastname" runat="server" 
Text='<%# Bind("Lastname") %>'></asp:Label>
                         </ItemTemplate>
                     </asp:TemplateField>
    <asp:TemplateField>
                         <ItemTemplate>
                             <asp:Label ID="lblEmaill" runat="server" visible="false" Text='<%# Bind("EmailAddress") %>'></asp:Label>
                         </ItemTemplate>
                     </asp:TemplateField>
     </Columns>
    </asp:Gridview>

this is my JQuery i want to display user details when i click on row along with Email Address

$(function () {

        var gridId = "<%= gridData.ClientID %>";
        var rowClickEvent = "#" + gridId + " tbody tr"
        var current = "";

        $(rowClickEvent).click(function () {
            var row = this;
            var username = row.cells[0].childNodes[1].innerText;
            var firstname = row.cells[1].childNodes[1].innerText;
            var lastname = row.cells[2].childNodes[1].innerText;
            var email =    row.cells[3].childNodes[1].innerText;


            alert('Username : '+username+'<br/>FullName : '+firstname+""+lastname+'<br/>Email : '+email);
    });

i also tried this code but its not working:

var tr = $(this).closest('tr');            
var message = row.cells[3].next("input[name$=lblemail]").val();

Upvotes: 3

Views: 5375

Answers (3)

ravi
ravi

Reputation: 1430

 <asp:GridView id='gridData' runat='server'>
     <Columns>
    <asp:TemplateField>
                         <ItemTemplate>
                             <asp:Label ID="lblUsername" runat="server"
  Text='<%# Bind("ToUsername") %>'></asp:Label>
                         </ItemTemplate>
                     </asp:TemplateField>
    <asp:TemplateField>
                         <ItemTemplate>
                             <asp:Label ID="lblfirstname" runat="server" 
Text='<%# Bind("Firstname") %>'></asp:Label>
                         </ItemTemplate>
                     </asp:TemplateField>
    <asp:TemplateField>
                         <ItemTemplate>
                             <asp:Label ID="lbllastname" CssClass="GetEmail" runat="server" 
Text='<%# Bind("Lastname") %>' Email='<%# Bind("EmailAddress") %>'></asp:Label>
                         </ItemTemplate>
                     </asp:TemplateField>

     </Columns>
    </asp:Gridview>

and use following javascript:

$(document).ready(function () {


            $("#gridData tr").live("click", function () {              

                 alert($(this).closest('tr').find(".GetEmail").attr("Email"));
            });
        });

Explaination

If you make any control visible = false it will never render to html. You can use above example, in which i have assign "EmailAddress" to a custom attribute "Email" in lbllastname control and accessing custom attribute "Email" value on row click of grid. This will also not add new column to grid. Suggest for any improvement.

Upvotes: 0

Satinder singh
Satinder singh

Reputation: 10198

TRY something link this

$("#gridData tr").on("click",function(){
     var self=$(this);
     var col1=self.find("td:eq(1)").html();
     var col2=self.find("td:eq(2)").html();
     var col3=self.find("td:eq(3)").html();

    var result="COL1 = "+col1+"   COL2 = "+col2+"   COL3 = "+col3;
    alert(result);
});

If you set attribute as visible=false then it will not exist in dom, make it display:none or opacity=0 or use hidden field

Upvotes: 0

Bharadwaj
Bharadwaj

Reputation: 2553

visible="false" will not let the control to be rendered at the client side. So when you try to access it in client scripts you won't find it because the element won't exists. If you want to access it at the client side and want it to be hidden always you can use HiddenFields or use CSS to hide that element at the client side by adding display:"none" or visibility:"hidden" or both.

Upvotes: 1

Related Questions