Struggling with jQuery in grid
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.
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>
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:
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>
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!
Re: Struggling with jQuery in grid
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
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" CssClass="btn" />
</ItemTemplate>
</asp:TemplateColumn>
And the Jquery Event
Code:
<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
Code:
<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>
