jqgrid ellipsis

Question

In jqGrid, is there a native way to show "..." at the end of a column if it's text did not fit and was truncated?

I see that there is a ui-ellipsis class but I'm confused as to if it's automatically added if the text is truncated and if it goes away automatically once the column is resized?

Answer 1

You can solve the problem using the following CSS

<style type="text/css">
    .ui-jqgrid tr.jqgrow td { text-overflow: ellipsis;-o-text-overflow: ellipsis; }
</style>

In the case you will have the results like displayed below:

(see here live)

In some other situations another CSS style would be better:

<style type="text/css">
    .ui-jqgrid tr.jqgrow td {
        white-space: normal !important;
        height:auto;
        vertical-align:middle;
        padding-top:3px;
        padding-bottom:3px
    }
</style>

In the case the results are the following:

(see here live).

Both above settings are my common settings which I use frequently depended on the customers requirements.

Answer 2

fit text plugin:

 (function($) {
        $.fn.fitText = function(options) {
            options = $.extend({
                width: 0,
                height: 0
            }, options);

            $(this).each(function() {
                var elem = $(this);
                if (options.height > 0) {
                    while (elem.height() > options.height) {
                        elem.text(elem.text().substring(0, (elem.text().length - 4)) + "...");
                    }
                }
                if (options.width > 0) {
                    while (elem.width() > options.width) {
                        elem.text(elem.text().substring(0, (elem.text().length - 4)) + "...");
                    }
                }
            });
        }
    })(jQuery);


calling the function:

    $('.ADHrefUserName').fitText({ width: 200, height: 25 });