Apply word wrap in jQuery DataTable Column using jQuery in ASP.Net

Last Reply 29 days ago By dharmendr

Posted 29 days ago

width of one of the column sentence is large and occupying more length.

so here how can i break a sentence to new line in jquery datatable.

You are viewing reply posted by: dharmendr 29 days ago.
Posted 29 days ago

Hi jovceka,

Wrap the column data in a div and set the white-space and width css properties for the div.

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
    <script  type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" />
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url: '<%= Page.ResolveUrl("~/WebService.asmx/GetCustomers")%>',
                method: 'post',
                dataType: 'json',
                success: function (data) {
                    $('#datatable').dataTable({
                        "processing": true,
                        "paging": true,
                        "searching": { "regex": true },
                        "responsive": true,
                        data: data,
                        columns: [
                            { 'data': 'Id', width: "50px" },
                            { 'data': 'Name', width: "100px" },
                            { 'data': 'Notes' },
                        ],
                        columnDefs: [{
                            render: function (data, type, full, meta) {
                                return "<div id='dvNotes' style='white-space: normal;width: 250px;'>" + data + "</div>";
                            },
                            targets: 2
                        }]
                    });
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="datatable" class="table table-striped table-bordered dt-responsive">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Notes</th>
            </tr>
        </thead>
    </table>
    </form>
</body>
</html>

WebService

C#

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
// [System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Notes { get; set; }
    }

    [WebMethod]
    public void GetCustomers()
    {
        string cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        List<Customer> customers = new List<Customer>();
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("SELECT EmployeeId,FirstName,Notes FROM Employees", con);
            cmd.CommandType = CommandType.Text;
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                Customer customer = new Customer();
                customer.Id = Convert.ToInt32(rdr["EmployeeId"]);
                customer.Name = rdr["FirstName"].ToString();
                customer.Notes = rdr["Notes"].ToString();
                customers.Add(customer);
            }
        }
        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(customers));
    }

}

VB.Net

Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
' <System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
     Inherits System.Web.Services.WebService
    Public Class Customer
        Public Property Id As Integer
        Public Property Name As String
        Public Property Notes As String
    End Class

    <WebMethod()>
    Public Sub GetCustomers()
        Dim cs As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim customers As List(Of Customer) = New List(Of Customer)()
        Using con As SqlConnection = New SqlConnection(cs)
            Dim cmd As SqlCommand = New SqlCommand("SELECT EmployeeId,FirstName,Notes FROM Employees", con)
            cmd.CommandType = CommandType.Text
            con.Open()
            Dim rdr As SqlDataReader = cmd.ExecuteReader()
            While rdr.Read()
                Dim customer As Customer = New Customer()
                customer.Id = Convert.ToInt32(rdr("EmployeeId"))
                customer.Name = rdr("FirstName").ToString()
                customer.Notes = rdr("Notes").ToString()
                customers.Add(customer)
            End While
        End Using

        Dim js As JavaScriptSerializer = New JavaScriptSerializer()
        Context.Response.Write(js.Serialize(customers))
    End Sub
End Class

Screenshot