dcsimg
Results 1 to 2 of 2

Thread: Struggling with jQuery in grid

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    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!

  2. #2
    Learning .Net danasegarane's Avatar
    Join Date
    Aug 2004
    Location
    VBForums
    Posts
    5,834

    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='<&#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


    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>
    Last edited by danasegarane; Mar 16th, 2012 at 12:26 AM.
    Please mark you thread resolved using the Thread Tools as shown



    www.techreceipe.tk


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width