Our blazing fast Grid component built with pure JavaScript


Post by gregc »

I have a lot of tables which contains links to other pages.
While I currently output html for the cell content, this has side effects e.g. excelexport export the raw html.

I can't help thinking I should be able to do something similar to the tooltiprenderer where I can place an additional data element into the record which is the URL the cell should point to.

columns: [
...
 createURL : ({ record, column }) => record.href 
 ...
 items :[ { id : 123, organization_name: 'ABC', href='https://blah/org/123' } ]

maybe I am over thinking it and should just use the renderer, and write my own excelexport

Last edited by gregc on Mon Feb 08, 2021 3:13 pm, edited 1 time in total.

Post by mats »

, this has side effects e.g. excelexport export the raw html.

How do you mean side effects?

Here's a demo showing how to use links in column cells:
https://bryntum.com/examples/grid/columntypes/


Post by gregc »

Side effects I mean if you go to

https://www.bryntum.com/examples/grid/exporttoexcel/

and paste in below, then right click the header, choose export to excel

for the link column instead of exporting the raw data (the persons name) to excel it exports the full

<a href=blah>persons name</a> 

.

its not terrible but thats not useful for the regular non technical users since it doesn't create a link in Excel and the data is messy. I would prefer to just see the name.

Its not a huge issue as its easy enough for me to write my own Excel export utility

import { Grid, DataGenerator } from '../../build/grid.module.js?447702';
import shared from '../_shared/shared.module.js?447702';

const grid = new Grid({

appendTo : 'container',

minHeight : '20em',

features : {
    excelExporter : true,
    filter: true
},

// Headers will ripple on tap in Material theme
ripple : {
    delegate : '.b-grid-header'
},

columns : [{
    text   : 'Name',
    field  : 'name',
    flex   : 2,
    editor : {
        type     : 'textfield',
        required : true
    }
}, {
    text  : 'Age',
    field : 'age',
    width : 100,
    type  : 'number'
}, {
    text  : 'City',
    field : 'city',
    flex  : 1
},
{
            text     : 'Personal page',
            field    : 'name',
            flex: 2,
            type     : 'template',
            editor   : false,
            filterable: true,
            template : data => `<a href="//www.bryntum.com" target="_blank">${data.value}</a>`
        },
 {
        text  : 'Food',
        field : 'food',
        flex  : 1
    }, {
        text     : 'Color (not sortable)',
        field    : 'color',
        flex     : 1,
        sortable : false,
        renderer({ cellElement, value, isExport }) {
            // During export cellElement might be missing
            if (!isExport) {
                // renderer that sets text color = text
                cellElement.style.color = value;
            }
            return value;
        }
    }],

data : DataGenerator.generateData(50),

tbar : [
    {
        type     : 'button',
        text     : 'Export (default settings)',
        ref      : 'excelExportBtn1',
        onAction : () => grid.features.excelExporter.export()
    },
    {
        type     : 'button',
        text     : 'Export (custom columns)',
        ref      : 'excelExportBtn2',
        onAction : () => grid.features.excelExporter.export({
            exporterConfig : {
                columns : [
                    { text : 'First Name', field : 'firstName', width : 90 },
                    { text : 'Age', field : 'age', width : 40 },
                    { text : 'Starts', field : 'start', width : 140 },
                    { text : 'Ends', field : 'finish', width : 140 }
                ]
            }
        })
    }
]
});

The template functionality is cool though, I didn't notice that!


Post by mats »

The renderer is called with a special isExport flag, so just use a regular renderer which returns pure text for your export scenario and it should be ok!


Post by gregc »

Dude ! That works so perfectly, tis a thing of beauty.


Post Reply