CODEWITHSUNDEEP
jqueryasp.netvb.net
Bruno Dávila Assad
Bruno Dávila Assad

Reputation: 129

jQuery click function on gridview tr

Im working on a project that filters lots of infomation into a gridview, this gridview is inside an updatepanel and i got the RowDataBound event programmed to set a css class on each row since doing it manualy doesen´t seem to work... The class gets added but i now need to toggle a class on tr click. I've been trying with jQuery but it doesen't seems to work (it works perfectly on elements outside the table).

Fiddle of what I want

Heres my gridview

<asp:UpdatePanel ID="UpdatePanel5" runat="server">
    <ContentTemplate>
        <asp:GridView ID="gridTabla" runat="server" BorderColor="White" EnableSortingAndPagingCallbacks="True" GridLines="Horizontal" AutoGenerateColumns="False">
            <AlternatingRowStyle BackColor="#F0F0F0" BorderColor="#F0F0F0" BorderStyle="Solid" />
            <Columns>
                <asp:BoundField AccessibleHeaderText="codesc" DataField="CodEscuela" HeaderText="Cod" />
                <asp:BoundField AccessibleHeaderText="esc" DataField="Escuela" HeaderText="Escuela" />
                <asp:BoundField AccessibleHeaderText="codar" DataField="codCarrera" HeaderText="Cod" />
                <asp:BoundField AccessibleHeaderText="car" DataField="Carrera" HeaderText="Carrera" />
                <asp:BoundField AccessibleHeaderText="codmat" DataField="codMateria" HeaderText="Cod" />
                <asp:BoundField AccessibleHeaderText="materia" DataField="Materia" HeaderText="Materia" />
                <asp:BoundField AccessibleHeaderText="nom" DataField="Nomina" HeaderText="Nomina" />
                <asp:BoundField AccessibleHeaderText="prof" DataField="Profesor" HeaderText="Profesor" />
                <asp:BoundField AccessibleHeaderText="noalumnos" DataField="noAlumnos" HeaderText="Numero de alumnos" />
                <asp:BoundField AccessibleHeaderText="noregistros" DataField="noRegistros" HeaderText="Numero de Registros" />
                <asp:BoundField AccessibleHeaderText="periodo" DataField="Periodo" HeaderText="Periodo" />
                <asp:BoundField AccessibleHeaderText="np" DataField="NP" HeaderText="NP" />
                <asp:BoundField AccessibleHeaderText="ni" DataField="NI" HeaderText="NI" />
                <asp:BoundField AccessibleHeaderText="diez" DataField="Diez" HeaderText="10" />
                <asp:BoundField AccessibleHeaderText="nueve" DataField="Nueve" HeaderText="9" />
                <asp:BoundField AccessibleHeaderText="ocho" DataField="Ocho" HeaderText="8" />
                <asp:BoundField AccessibleHeaderText="siete" DataField="Siete" HeaderText="7" />
                <asp:BoundField AccessibleHeaderText="seis" DataField="Seis" HeaderText="6" />
                <asp:BoundField AccessibleHeaderText="cinco" DataField="Cinco" HeaderText="5" />
                <asp:BoundField AccessibleHeaderText="bantutor" DataField="BandTutor" HeaderText="Reportes de tutor" />
                <asp:BoundField AccessibleHeaderText="banddir" DataField="BandDirector" HeaderText="Reportes de director" />
            </Columns>
            <RowStyle BorderStyle="None" HorizontalAlign="Center" VerticalAlign="Middle" />
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

My RowDataBound

Protected Sub gridTabla_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles gridTabla.RowDataBound
  e.Row.CssClass = "clickableTr"
End Sub

And my jQuery function

$('.clickableTr').click(function () {
  $(this).toggleClass('activeTr');
});

Im not sure what im doing wrong, this works perfectly on outer-table elements

Upvotes: 1

Views: 942

Answers (1)

mshsayem
mshsayem

Reputation: 18028

You are using UpdatePanel which gets updated on postback. But your javascript registers the event for just first time. When an update is occurred, the event registration is gone. You'll need to use on instead of click to handle this. Try this: 

$(function(){
    $("#gridTabla").on("click", ".clickableTr", function(){
        $(this).toggleClass("activeTr");
    });
});

Upvotes: 2

Related Questions