Enableellipsis only working on column headers

[njaParticipant]

I have enabled ellipsis (enableellipsis: true), but only the gird headers have ellipsis in them the column data is just showing up to the edge of the cell. I have a lot of options explicitly set, perhaps there is a conflict?

thanks,
nja

            // prepare the data
            var source = {
                datatype: "json",
                datafields: [
                    { name: 'RecordId', type: 'number' },
                    { name: 'CostCenter', type: 'string' },
                    { name: 'Ccdescription', type: 'string' },
                    { name: 'GeneralLedger', type: 'string' },
                    { name: 'Gldescription', type: 'string' },
                    { name: 'Fund', type: 'string' },
                    { name: 'Fdescription', type: 'string' },
                    //{ name: 'PECT' , type:'string' },
                    //{ name: 'PECTdescription' , type:'string' },
                    { name: 'WBS', type: 'string' },
                    { name: 'WBSDescription', type: 'string' },
                    { name: 'CurrentBudget', type: 'string' },
                    { name: 'PeriodOneActuals', type: 'number' },
                    { name: 'PeriodTwoActuals', type: 'number' },
                    { name: 'PeriodThreeActuals', type: 'number' },
                    { name: 'PeriodFourActuals', type: 'number' },
                    { name: 'PeriodFiveActuals', type: 'number' },
                    { name: 'PeriodSixActuals', type: 'number' },
                    { name: 'PeriodSevenActuals', type: 'number' },
                    { name: 'PeriodEightActuals', type: 'number' },
                    { name: 'PeriodNineActuals', type: 'number' },
                    { name: 'PeriodTenActuals', type: 'number' },
                    { name: 'PeriodElevenActuals', type: 'number' },
                    { name: 'PeriodTwelveActuals', type: 'number' },
                    { name: 'PeriodThirteenActuals', type: 'number' },
                    { name: 'PurchaseReqsActuals', type: 'number' },
                    { name: 'PosActuals', type: 'number' },
                    { name: 'TotalActivityActuals', type: 'number' },
                    { name: 'ProjectedRemainderCalculated', type: 'number' },
                    { name: 'FormulaValue', type: 'number' },
                    { name: 'BudgetBalanceCalculated', type: 'number' },
                    { name: 'HexColor', type: 'string' },
                    //{ name: 'FiscalYear' , type:'number' },
                    //{ name: 'Comment' , type:'string' },
                    //{ name: 'FormulaId' , type:'number' },
                    //{ name: 'FormulaAudit' , type:'string' },
                    //{ name: 'Description' , type:'string' },
                ],
                url: urlToGoTo
            };

            $("#jqxgrid").jqxGrid({
                source: source,
                width: '100%',
                height: '100%',
                sortable: true,
                filterable: true,
                filtermode: 'excel',
                showfiltermenuitems: true,
                autoshowfiltericon: true,
                showsortmenuitems: false,
                columnsresize: false,
                showstatusbar: true,
                theme: 'office',
                altrows: true,
                enabletooltips: true,
                enableellipsis: true,
                columns: [
                    { text: 'Id', datafield: 'RecordId', width: 20, hidden: true },
                    {
                        text: 'Cost Center', datafield: 'CostCenter', width: 60,
                        cellsrenderer: function (row, column, value) {
                            return '<div style="background: ' + this.owner.source.records[row]['HexColor'] + '; width: 100%; height: 100%;">' + value + '</div>';
                        }
                    },
                    {
                        text: 'CC Desc', datafield: 'Ccdescription', width: 110,
                        cellsrenderer: function (row, column, value) {
                            return '<div style="background: ' + this.owner.source.records[row]['HexColor'] + '; width: 100%; height: 100%;">' + value + '</div>';
                        }
                    },
                    {
                        text: 'GL', datafield: 'GeneralLedger', width: 60,
                        cellsrenderer: function (row, column, value) {
                            return '<div style="background: ' + this.owner.source.records[row]['HexColor'] + '; width: 100%; height: 100%;">' + value + '</div>';
                        }
                    },
                    {
                        text: 'GL Desc', datafield: 'Gldescription', width: 110,
                        cellsrenderer: function (row, column, value) {
                            return '<div style="background: ' + this.owner.source.records[row]['HexColor'] + '; width: 100%; height: 100%;">' + value + '</div>';
                        }
                    },
                    {
                        text: 'Fund', datafield: 'Fund', width: 60,
                        cellsrenderer: function (row, column, value) {
                            return '<div style="background: ' + this.owner.source.records[row]['HexColor'] + '; width: 100%; height: 100%;">' + value + '</div>';
                        }
                    },
                    {
                        text: 'Fund Desc', datafield: 'Fdescription', width: 110,
                        cellsrenderer: function (row, column, value) {
                            return '<div style="background: ' + this.owner.source.records[row]['HexColor'] + '; width: 100%; height: 100%;">' + value + '</div>';
                        }
                    },
                    //{ text: 'PECT', datafield: 'PECT', width: 100 },
                    //{ text: 'PECTdescription', datafield: 'PECTdescription', width: 100 },
                    {
                        text: 'WBS', datafield: 'WBS', width: 110,
                        cellsrenderer: function (row, column, value) {
                            return '<div style="background: ' + this.owner.source.records[row]['HexColor'] + '; width: 100%; height: 100%;">' + value + '</div>';
                        }
                    },
                    {
                        text: 'WBS Desc very long to show Ellipsis ', datafield: 'WBSDescription', width: 110,
                        cellsrenderer: function (row, column, value) {
                            return '<div style="background: ' + this.owner.source.records[row]['HexColor'] + '; width: 100%; height: 100%;">' + value + '</div>';
                        }
                    },
                    { text: 'Current Budget', datafield: 'CurrentBudget', width: 100, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 1', datafield: 'PeriodOneActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 2', datafield: 'PeriodTwoActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 3', datafield: 'PeriodThreeActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 4', datafield: 'PeriodFourActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 5', datafield: 'PeriodFiveActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 6', datafield: 'PeriodSixActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 7', datafield: 'PeriodSevenActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 8', datafield: 'PeriodEightActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 9', datafield: 'PeriodNineActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 10', datafield: 'PeriodTenActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 11', datafield: 'PeriodElevenActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 12', datafield: 'PeriodTwelveActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Period 13', datafield: 'PeriodThirteenActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Purchase Reqs', datafield: 'PurchaseReqsActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'POs', datafield: 'PosActuals', width: 80, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Total Activity', datafield: 'TotalActivityActuals', width: 110, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Total Remainder', datafield: 'ProjectedRemainderCalculated', width: 110, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Total Projected', datafield: 'FormulaValue', width: 110, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Budget Balance', datafield: 'BudgetBalanceCalculated', width: 110, cellsformat: 'f2', cellsalign: 'right' },
                    { text: 'Hex Color', datafield: 'HexColor', width: 110, cellsalign: 'right' },
                    //{ text: 'FiscalYear', datafield: 'FiscalYear', width: 100 },
                    //{ text: 'Comment', datafield: 'Comment', width: 100 },
                    //{ text: 'FormulaId', datafield: 'FormulaId', width: 10 },
                    //{ text: 'Formula', datafield: 'FormulaAudit', width: 100 },
                    //{ text: 'Description', datafield: 'Description', width: 100 }
                ]
            });

        });

[DimitarParticipant]

Hello nja,

This happens due to the applied cellsrenderer to some of your columns. To enable ellipsis, change the style of the values returned by cellsrenderer as follows:

cellsrenderer: function(row, column, value) {
    return '<div style="background: ' + this.owner.source.records[row]['HexColor'] + '; width: 100%; height: 100%; overflow: hidden; text-overflow: ellipsis;">' + value + '</div>';
}

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[njaParticipant]

That fixed it.

thanks,
nja

[Author]

Posts