How to use a jquery inside a boundfield?

I'm using the below jQuery to add a "read more" option to a text so it only shows the first 200 characters and allows user to click on read more to view the remaining part of the text

<head><title>Add Read More Link (from DevCurry.com)</title>    
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery1.4.4.min.js">    </script>    
    <script type="text/javascript"    src="http://plugins.learningjquery.com/expander/jquery.expander.js">    </script>    
    <script type="text/javascript">
           $(function () {
               $('div.readmore').expander({
                 slicePoint: 200, expandText: 'Click Here to Read More', userCollapseText: 'Hide Text'
              });
           }
          );    
    </script>
</head>

To use the function, I have to use the following

<div class="readmore">     The Div Text Comes Here      </div>

My problem is that I want to use the jQuery inside a gridview boundfield. I have one column that contains a long description and need to apply the jQuery in it.

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
            AutoGenerateColumns="False" EmptyDataText="No Records" EnableSortingAndPagingCallbacks="True"
            Width="1017px" ShowFooter="False" DataSourceID="SqlDataSource1" 
            EnableModelValidation="True" PageSize="10" GridLines="None" CssClass="mGrid"
            PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"  >

        <Columns>
            <asp:BoundField DataField="CreationDate" HeaderText="Date" SortExpression="CreationDate"  dataformatstring="{0:MM/dd/yyyy}" />
            <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
            <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
            <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
            <asp:BoundField DataField="Department" HeaderText="Department" SortExpression="Department" />

        </Columns>

    </asp:GridView>

Unfortunately, I can't insert a inside a boundfield. do you have any other way to apply the Jquery to the boundfield?

Solution

You could replace

<asp:BoundField DataField="Description" HeaderText="Description"
   SortExpression="Description" />

<asp:TemplateField HeaderText="Description" SortExpression="Description">
    <ItemTemplate>
        <div class="readmore"><%# Eval("Description") %></div>
    </ItemTemplate>                                                
</asp:TemplateField>