Jx.Formatter.Text

[GoogleCodeExporter]

It could nice to get a text formatter, with charactermax option, to 
automatically truncate long text. And adding "...".

your thought ?

Original issue reported on code.google.com by hugues.gauthier@gmail.com on 22 Aug 2010 at 8:47

[GoogleCodeExporter]

That would certainly be handy... would you like to try your hand at writing the 
formatter and submit it? You can get an idea of how to do format the class by 
looking at Jx.Formatter and it's subclasses....

If not, this will probably have to wait until post 3.0.

Jon

Original comment by jbomgard@gmail.com on 23 Aug 2010 at 1:43

[GoogleCodeExporter]

Good Idea :)

Original comment by hugues.gauthier@gmail.com on 23 Aug 2010 at 1:48

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Hi

This is the text formatter ! :)

Jx.Formatter.Text = new Class({

    Extends: Jx.Formatter,

    options: {
        maxlength: null
    },

    format : function (value) {

        var text = '' + value;

        if (this.options.maxlength){
            if( text.length > this.options.maxlength){
                text = text.substr(0,max) + "...";
            }
        }

        return text;
    }
});

Grid column example

{
              template: '<span class="jxGridCellContent">Description</span>',
              renderMode: 'expand',
              isEditable: false,
              isSortable: false,
              isResizable: true,
          renderer: new Jx.Grid.Renderer.Text({
                formatter : {
                  name: 'Text',
                  options:{maxlength:'200'}
                },
                textTemplate: '{Description}'
              })
          }

Original comment by hugues.gauthier@gmail.com on 25 Aug 2010 at 12:54

[GoogleCodeExporter]

Thanks Hughes,

I've added this to SVN with a couple of minor changes:

 * changed maxLength to length
 * added an 'ellipsis' option default ...
 * changed the logic to clip the string length to the length - ellipsis.length.  I did this so that the max length of the resulting string is the one specified in the options.  If you specified (for instance) a max length of 3 and passed a value of 'Here' you would get 'Her...' which is longer than just 'Here' but truncated for no good reason :)

Let me know if this works and I'll close the ticket.

Original comment by pagameba on 25 Aug 2010 at 1:18

• Changed state: Started

[GoogleCodeExporter]

I read that the 'ellipsis' do not work with FF, but can be bypass with Jquery.

Are you aware of that ?

Regards

Original comment by hugues.gauthier@gmail.com on 25 Aug 2010 at 1:29

[GoogleCodeExporter]

Do you mean the css property text-overflow: ellipsis?  This isn't using it, 
'ellipsis' is just the name used to refer to the string of characters that will 
be added to the end of the string when it is limited to a maximum length.

Original comment by pagameba on 25 Aug 2010 at 1:48

[GoogleCodeExporter]

Hi 

Yes I mean the css property text-overflow.

http://www.electrictoolbox.com/ellipsis-html-css/

Original comment by hugues.gauthier@gmail.com on 25 Aug 2010 at 1:54

[GoogleCodeExporter]

right, we are not using that :)

Original comment by pagameba on 25 Aug 2010 at 1:58

[GoogleCodeExporter]

There is a typo error, ellpsis instead of ellipsis

format : function (value) {
    var text = '' + value,
        max = this.options.length,
  -->   ellpsis = this.options.ellipsis;

    if (max && text.length > max) {
      text = text.substr(0,max-ellipsis.length) + ellipsis;
    }

    return text;
  }

thanks

Original comment by hugues.gauthier@gmail.com on 25 Aug 2010 at 8:46

[GoogleCodeExporter]

opps, fixed in r974

Original comment by pagameba on 25 Aug 2010 at 9:29

[GoogleCodeExporter]

So is this ready to be closed out?

Jon

Original comment by jbomgard@gmail.com on 12 Nov 2010 at 2:36

[GoogleCodeExporter]

Moved to Lighthouse:

http://jxlib.lighthouseapp.com/projects/71243-jxlib/tickets/14-jxformattertext

Original comment by jbomgard@gmail.com on 5 Mar 2011 at 6:07

• Changed state: closed