Struggling with jQuery in grid

[NickThissen]

Hi,

I have a grid in which the last column displays a (usually large) piece of text (a description of the item). What I'm trying to do is quite simple: instead of showing this large piece of text in the grid directly (which stretches the row vertically), I manually cut it down to, say, 50 characters, and display a button next to it which can be clicked to expand the description text.

To do this, in the final column of the grid I actually place two labels and a button. The first label contains the cut-down version of the description, the second label contains the full description but is hidden by default. Once the button is clicked, I want to hide the short label and display the long label.

            <asp:TemplateColumn HeaderText="Description">
                <ItemTemplate>
                    <asp:Label runat="server" Text='<%# GetDescription(Container.DataItem) %>' />
                    <asp:Label runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Description") %>' Visible="false"/>
                    <asp:Button runat="server" Text="..." ID="btn" />
                </ItemTemplate>
            </asp:TemplateColumn>

However, I'm struggling to get this to work...

The approach I want to try is to attach a click function to each button in the grid, and find the two labels in front of that using the 'prev' jQuery function:

<script type="text/javascript" src="~/Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    
    $('#btn').click(function () {
        // find previous two labels
        var longLabel = $(this).prev();
        var shortLabel = longLabel.prev();

        longLabel.css('display', 'inline');  // show long descr
        shortLabel.css('display', 'none');  // hide short descr

        return false; // prevent post-back?
    });
});

</script>

I however cannot figure out how to get this to work. It doesn't seem this function is ever called, even if I just put an alert in it, the alert never shows...

Am I not using jQuery correctly? Am I not selecting the buttons correctly? How would you do this...?

Thanks!

[danasegarane]

I doubt the id of the Button is changed. As the button control is inside the template column the control id will be changed. Apply a CSS to the Button control and use that css for the attaching the click event

Check the View Source of the Page

 <asp:TemplateColumn HeaderText="Description">
                <ItemTemplate>
                    <asp:Label runat="server" Text='<&#37;# GetDescription(Container.DataItem) %>' />
                    <asp:Label runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Description") %>' Visible="false"/>
                    <asp:Button runat="server" Text="..." ID="btn" CssClass="btn" />
                </ItemTemplate>
            </asp:TemplateColumn>

And the Jquery Event

<script type="text/javascript" src="~/Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    
  //Find the button based on css btn and attach the evnet
    $(' .btn').click(function () {
        // find previous two labels
        var longLabel = $(this).prev();
        var shortLabel = longLabel.prev();

        longLabel.css('display', 'inline');  // show long descr
        shortLabel.css('display', 'none');  // hide short descr

        return false; // prevent post-back?
    });
});

</script>

Or else you could change the Jquery as

<script type="text/javascript" src="~/Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    
  //Find the button based on css btn and attach the evnet
    $(' .btn').bind('click',function () {
        // find previous two labels
        var longLabel = $(this).prev();
        var shortLabel = longLabel.prev();

        longLabel.css('display', 'inline');  // show long descr
        shortLabel.css('display', 'none');  // hide short descr

        return false; // prevent post-back?
    });
});

</script>