jQuery click function on gridview tr

Question

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

can you please copy and paste your html code here.. f12 or inspect element to get the code.. — Well Wisher
– Well Wisher, Commented Apr 16, 2016 at 15:28
its quite a lot... and im not actually allowed to share most of that information — Bruno Dávila Assad
– Bruno Dávila Assad, Commented Apr 16, 2016 at 15:34
i just wanted to know the table formatted correctly.. can you please create a demo html — Well Wisher
– Well Wisher, Commented Apr 16, 2016 at 15:49
Try this: $('#gridTabla').on('click','.clickableTr', function(){$(this).toggleClass('activeTr');}) — mshsayem
– mshsayem, Commented Apr 16, 2016 at 15:57
What is the container of this UpdatePanel5? Any id so that it can be selected by jQuery? — mshsayem
– mshsayem, Commented Apr 16, 2016 at 16:07

mshsayem · Accepted Answer · 2016-04-16 16:10:14Z

2

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");
    });
});

answered Apr 16, 2016 at 16:10

mshsayem

18.1k11 gold badges65 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery click function on gridview tr

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related