CODEWITHSUNDEEP
extjsextjs5
JesseRules
JesseRules

Reputation: 723

Tooltips overriding column display data in EXT JS 5

I have a column grid issue where I want to take the data of a grid cell truncate it down to 50 characters and then have a tooltip show the full data.

I have the SQL service responding back with the truncated text called OfferTruncated and the full text called Offer in the model/store. What's happening is all I am trying to display is OfferTruncated on the grid and Offer in the tooltip, but Offer is displayed in both.

Here is the column item

{
        header: 'Offer',
        dataIndex: 'Offer',
        width: 300,
        renderer: function (value, metadata, record) {
            return getExpandableImage(value, metadata, record);
        }
    },

Here is the global function I made

function getExpandableImage(val, meta, rec, rowIndex, colIndex, store) {
var deviceDetail = "Offer Terms: " + rec.get('Offer');
meta.tdAttr = 'data-qtip="' + deviceDetail + '"';
var value = rec.get('OfferTruncated')
return value;
}

Upvotes: 3

Views: 1334

Answers (1)

Josh
Josh

Reputation: 461

It's a little easier to just use the built in EXTjs ellipsis function, rather than returning two fields where one is just truncated data of the other. Use the renderer:

    {
        header: 'Offer',
        dataIndex: 'Offer',
        width: 300,
        renderer: function (value, metadata, record) {
            var deviceDetail = "Offer Terms: " + value;
            metadata.tdAttr = 'title="' + Ext.util.Format.ellipsis(deviceDetail, 800) + '"';
            return Ext.util.Format.ellipsis(value, 50);

        }
    },

Upvotes: 3

Related Questions