Grails, how do you limit displayed length of a field in a table

Question

I'm using datatables and need to limit the displayable length of several fields in the table. In the edit view, you should still be able to handle long strings. I hope that's possible without too much effort.

Ok, the table is defined as:

                var table = $('#gridProducts').DataTable({
                "scrollY": "600px",
                "scrollX": "1000px",
                "scrollCollapse": true,
                "paging": false,
                "searching": true,
                "dom": '<"top"i>rt<"bottom"lp><"clear">',
                "select": true 

And the html part of the table:

<table id="gridProducts" class="display" width="100%">
<colgroup>
    <col width="1%"/> <!-- Del -->
    <col width="3%"/> <!-- ID -->
    <col width="3%"/> <!-- Mill -->
    <col width="3%"/> <!-- Species -->
    <col width="8%"/> <!-- Dimension -->
    <col width="10%"/> <!-- Length -->
    <col width="5%"/> <!-- Grade -->
    <col width="3%"/> <!-- KD -->
    <col width="3%"/> <!-- Currency -->
    <col width="3%"/> <!-- FSC -->
    <col width="3%"/> <!-- PEFC -->
    <col width="3%"/> <!-- CW -->
    <col width="3%"/> <!-- UC -->
    <col width="3%"/> <!-- InStock -->
    <col width="3%"/> <!-- Sold -->
    <col width="3%"/> <!-- Offered -->
    <col width="3%"/> <!-- Available -->
    <col width="3%"/> <!-- W01 -->
    <col width="3%"/> <!-- W02 -->
    <col width="3%"/> <!-- W03 -->
    <col width="3%"/> <!-- W04 -->
    <col width="3%"/> <!-- W05 -->
    <col width="3%"/> <!-- W06 -->
    <col width="3%"/> <!-- W07 -->
    <col width="3%"/> <!-- W08 -->
    <col width="3%"/> <!-- W09 -->
    <col width="3%"/> <!-- W10 -->
    <col width="3%"/> <!-- W11 -->
    <col width="3%"/> <!-- W12 -->
</colgroup>
<thead>
    <tr>
        <sec:ifAnyGranted roles="ROLE_ADMIN,ROLE_SALES,ROLE_SUPPLIER"> 
            <th>Del</th>
        </sec:ifAnyGranted>    
        <th>Id</th>
        <th>Mill</th>
        <th>Species</th>
        <th>Dimension</th>
        <th>Length</th>
        <th>Grade</th>
        <th>KD(%)</th>
        <th>Cur</th>
        <th>FSC</th>
        <th>PEFC</th>
        <th>CW</th>
        <th>UC</th>
        <th>InStock</th>
        <th>Sold</th>
        <th>Offer</th>
        <th>Avail(m3)</th>
        <th>${myTag.weekNo(offset: "1")}</th>
        <th>${myTag.weekNo(offset: "2")}</th>
        <th>${myTag.weekNo(offset: "3")}</th>
        <th>${myTag.weekNo(offset: "4")}</th>
        <th>${myTag.weekNo(offset: "5")}</th>
        <th>${myTag.weekNo(offset: "6")}</th>
        <th>${myTag.weekNo(offset: "7")}</th>
        <th>${myTag.weekNo(offset: "8")}</th>
        <th>${myTag.weekNo(offset: "9")}</th>
        <th>${myTag.weekNo(offset: "10")}</th>
        <th>${myTag.weekNo(offset: "11")}</th>
        <th>${myTag.weekNo(offset: "12")}</th>
    </tr>
</thead>
<tbody>

    <g:each in="${prodBuffer}" status="i" var="pb"> 
        <tr  class="${ (i % 2) == 0 ? 'even': 'odd'}">
            <sec:ifAnyGranted roles="ROLE_ADMIN,ROLE_SALES, ROLE_SUPPLIER"> 
                <td>
                    <g:link action="deleteProduct" controller="ordersAndStore" params="[prodID:pb.id]"
                    onclick="return confirm('Are you sure?')">
                    X
                    </g:link>
                </td>
            </sec:ifAnyGranted>    
            <td> <g:link action="edit" controller="prodBuffer" params="[id:pb.id]"> ${pb.id}</g:link></td>
            <td>${pb.sawMill?:'UnDefined'}</td>
            <td>${pb.species}</td>
            <td>${pb.dimension}</td>
            <td>${pb.length}</td>
            <td>${pb.grade}</td>
            <td>${pb.kd}</td>
            <td>${pb.currency}</td>
            <td>${pb.priceFSC}</td>
            <td>${pb.pricePEFC}</td>
            <td>${pb.priceCW}</td>
            <td>${pb.priceUC}</td>
            <td>${pb.volumeInStock}</td>
            <td>${pb.volumeOnOrder}</td>
            <sec:ifAnyGranted roles="ROLE_ADMIN,ROLE_SALES"> 
                <td><div id="${pb.id}" class="offers" >${pb.volumeOffered}</div></td>
            </sec:ifAnyGranted>    
            <sec:ifNotGranted roles="ROLE_ADMIN,ROLE_SALES">    
                <td>${pb.volumeOffered}</td>
            </sec:ifNotGranted>    
            <td>${pb.volumeAvailable}</td>
            <g:each in="${pb.plannedVolumes}" status="j" var="pv">
                <td>${pv.volume}</td>
            </g:each>
        </tr>
    </g:each>
</tbody>

A lot of these columns requires more then one line so I don't want them to wrap. If the text is 50 characters but the field is only 10 characters wide, it should only display the first 10 characters. Shouldn't that be possible?

Answer 1

Try adding the following class to your <td> elements:

.shrink{
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

You could also use something like bootbox & provide opportunity to show contents of cell in a modal dialog:

$( document ).on('click', '.shrink', function () {
    bootbox.alert( this.innerHTML );
});

Answer 2

This is not really an answer to your question, but an alternative, if you already use Datatable takes advantage of the function of hiding columns. You could make it dynamic by saving the last selection of columns in localStorage and re-establishing their status when the user visits the view again. I think users appreciate these features.

You can find an example of the behavior of hiding columns in this link

Basically you create some checkbox related with the columns you want to toggle and then perform some change event to affect its state

<div>
  <label>
    <input type="checkbox" id="col1"> Hide First Column
  </label>
</div>


$('#col1').change(function() {
    dt.columns(0).visible(!$(this).is(':checked'));
});

I hope it's useful

Answer 3

I solved it my self by adding a transient field to the domain and in the getter I just copied the 10 first characters and then referred to this new "alias"-field in the table. It worked perfectly with no disturbance of the table:

class ProdBuffer {
int id
String dimension
String length

...

static transients = ['shortLength','shortDimension']

public String getShortLength() { length.substring(0, Math.min(length.length(), 10)); }
public String getShortDim() { dimension.substring(0, Math.min(dimension.length(), 10)); }

And in the table:

    <table id="gridProducts" class="display">
    <colgroup>
        <col width="1em"/> <!-- Del -->
...
    </colgroup>
    <thead>
        <tr>
    ...

        <th>Dimension</th>
            <th>Length</th>
            <th>Grade</th>
        </tr>
    </thead>
    <tbody>
    ...

        <td class="shrink">${pb.sawMill?:'UnDefined'}</td>   <!-- This (shrink) didn't work-->
        <td>${pb.species}</td>
        <td>${pb.shortDim}</td>      <!-- New alias field -->
        <td>${pb.shortLength}</td>   <!-- New alias field -->
        <td>${pb.grade}</td>