Wrap the text on Gridview.

Posted by Venkat | Labels:

Hi Good day to All

After a long time , i am back  - i have no time to post the Resources here . now , i will try to post atleast one Resource per day.

I wish you all a Very Happy Diwali

Now i am going to see how to Wrap the text show in the Gridview , I had searched many links & sites finally i got one javascript.
place the javascript at the Top of the page ie: loaded when the page Loads.

<script type="text/javascript"> 
       window.onload = function()
        { 
        if (window.attachEvent == undefined) 
        {
         var tag = document.getElementsByTagName("td"); 
         for (var i = 0; i < tag.length; i++)
          {
           if (tag.item(i).className == "wordwrap") 
           {
            var text = tag.item(i).innerHTML; 
            tag.item(i).innerHTML = text.replace(/(.*?)/g, "<wbr/>"); 
            } 
           } 
          }
         }
    </script>
And one thing you are going to consider , here you have to apply the class="wordwrap" on your td tag at where you want text wrap or which column wants the text wrap then you have to specify the width in px not in % or any.
This is my Sample Gridview code

<asp:GridView ID="userList_GridView" runat="server" AllowPaging="True" AutoGenerateColumns="False"
                                          BorderColor="WhiteSmoke" BorderWidth="0px" CellPadding="5" 
                                            EmptyDataText="User not found...!" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
                                            PageSize="30" ToolTip="User List....!" Width="100%" GridLines="None" BackColor="WhiteSmoke" >
                                            <Columns>
                                                <asp:TemplateField>
                                                    <HeaderTemplate>
                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                            <tr style=" color: Black;" class ="fbtxt">
                                                                <td align="left" style="width: 18%">
                                                                 Username
                                                                </td>
                                                                <td align="left" style="width: 14%">
                                                                    Email
                                                                </td>
                                                                
                                                                
                                                               <td align="center" style="width: 15%">
                                                                   Resource Permission
                                                                </td>
                                                                <td align="center" style="width: 11%">
                                                                    Permission
                                                                </td>
                                                                  <td align="center" style="width: 7%">
                                                                     Edit
                                                                    </td>
                                                                <td align="center" style="width: 8%">
                                                                    Delete
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </HeaderTemplate>
                                                    <HeaderStyle BackColor="LightSteelBlue"  Font-Bold="True" Font-Size="10pt" ForeColor="Black" />
                                                    <ItemTemplate>
                                                    <div style ="width :100%;table-layout:fixed;border:0px;">
                                                    <div class ="fntxt">
                                                    <div align="left" style="width: 165px; word-wrap:break; float:left ;" class="wordwrap">
                                                      <%# Eval("username")%>
                                                    </div> 
                                                    <div align="left" style="width: 150px;float:left;" class="wordwrap" >
                                                     <%#Eval("email")%>
                                                    </div> 
                                                    
                                                   <div align="left" style="width: 20%;float:left;" >
                                               <a href ='<%# "resourceaccess.aspx?userResource=" +  Eval("username")   %>' class ="WhiteLink"> Resource Access</a>
                                                    </div>
                                                      <div align="left" style="width: 13%;float:left;" >
                                                      <a href= '<%# "userlist.aspx?userPermission=" +  Eval("username")  %>' class ="WhiteLink"> <%# Eval("approve") %></a>
                                                 
                                                    </div>
                                                    <div align="center" style="width: 12%;float:left;"  >
                                                    <asp:HyperLink ID="Edit_HyperLink"  runat="server" NavigateUrl='<%# "~/Admin/userlist.aspx?editUser=" +  Eval("username")  %>'
                                                                      CssClass ="WhiteLink"  OnClick="return confirm('Are you sure want to Edit this record ?');" Text="Edit"
                                                                        ToolTip="Edit user list....!"></asp:HyperLink>
                                                    </div> 
                                                    <div align="center" style="width: 7%;float:left;"  >
                                                    <asp:HyperLink ID="Delete_Button"  runat="server" NavigateUrl='<%# "~/Admin/userlist.aspx?delUname=" +  Eval("username")  %>'
                                                                      CssClass ="WhiteLink"  OnClick="return confirm('Are you sure want to Delete this record ?');" Text="Delete"
                                                                        ToolTip="Delete user list....!"></asp:HyperLink>
                                                    </div> 
                                                    
                                                    </div>
                                                    </div>
                                                        
                                                    </ItemTemplate>
                                                </asp:TemplateField>
                                            </Columns>
                                            <PagerStyle BackColor="WhiteSmoke" Font-Bold="False" Font-Names="verdana" Font-Size="8pt"
                                                ForeColor="Red" HorizontalAlign="Center" />
                                        </asp:GridView>

PayOffers.in