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.
However, I'm struggling to get this to work...Code:<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>
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:
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...Code:<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>
Am I not using jQuery correctly? Am I not selecting the buttons correctly? How would you do this...?
Thanks!




Reply With Quote