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

Last Reply 3 months ago By dharmendr

Posted 3 months 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.

Posted 3 months 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