Twitter Bootstrap Question posted in

jQgrid – how can I custom format the contents of a cell?-Twitter bootstrap

I am using jQuery grid to create a table online.
I want to add bold and italics to some text in one of my cells and I also want to show the ellipsis if the content is too much.

The current cell content is:

[Mary Doe] :- Can this be done soon?

And I want it to be displayed as:

[Mary Doe] :– Can this be done soon?

Further if the content exceeds I want it to be concatenated by ellipsis.

Here is link to jsfiddle if you want to use that:
https://jsfiddle.net/jo1qrysq/

var Data = [{"identification":"2001","created_date":"2017-09-25 05:48:50","quantity":1,"summary":"Require to rebuild","product":"D245","loc":"SG","assignee":"Hello World","requestor":"John Doe","status":"Requested","comments":"[Hello World] :- We do not have sufficient quantity","priority":"High","comment_on":"2017-09-26 05:00:18"},
{"identification":"2002","created_date":"2017-09-25 05:48:50","quantity":5,"summary":"Require to paint","product":"A205","loc":"MY","assignee":"Bye World","requestor":"Mary Doe","status":"In Progress","comments":"[Mary Doe] :- Can this be done soon?","priority":"High","comment_on":"2017-09-26 05:00:18"}
];

$(function () {
    "use strict";
    $("#grid").jqGrid({
      colNames:['ID','Comment','identification','Priority', 'Qnty', 'Summary', 'Product','Location','Assignee','Status'],
        colModel: [
            {name:'auto_id', key: true, width:18, hidden: true},
            {name: "comments"},
            { name: "identification",search:true, formatter: 'dynamicLink'},
            { name: "priority"},
            { name: "quantity" },
            { name: "summary" },
            { name: "product" },
            { name: "loc" },
            { name: "assignee" },
            {name: "status"}],
            data: Data,
            rowNum:20,
            rowList:[20,40,60],
            loadonce: true,
            toppager: '#pager2',
            autowidth : true,
            gridview: true,
            height: "auto",
            ignoreCase: true,
            viewrecords: true,
            caption:"A Table"      
    });
});
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
    <table id="grid"></table>
Tags:

2

Answers


  1. 0

    <td>[Mary Doe] :- Can this be done soon?</td> can be changed to <td><strong>[Mary Doe] :-</strong> Can this be done soon?</td>, or replace ‘strong’ with ‘b’.

    As for ellipsis, see this css property, text-overflow: ellipsis;

    https://jsfiddle.net/jo1qrysq/1/

    Login or Signup to reply.
  2. 0

    You have many options to implement your requirements. For example you can add text-overflow: ellipsis rule on all cells of jqGrid:

    .ui-jqgrid tr.jqgrow td {
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

    see https://jsfiddle.net/OlegKi/jo1qrysq/3/

    You can define CSS rule like

    .ui-jqgrid tr.jqgrow td.myellipsis {
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

    and to use classes: "myellipsis" property in some columns of jqGrid. See https://jsfiddle.net/OlegKi/jo1qrysq/5/

    You use free jqGrid work, which supports autoresizing of columns based on the width of content. You can use the settings like

    autowidth : true,
autoresizeOnLoad: true,
cmTemplate: { autoResizable: true },
autoResizing: { compact: true, resetWidthOrg: true },

    see https://jsfiddle.net/OlegKi/jo1qrysq/8/

    You can combine different approaches. See https://jsfiddle.net/OlegKi/jo1qrysq/6/ and https://jsfiddle.net/OlegKi/jo1qrysq/7/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search