Search code examples
formatterdojox.grid.datagrid

html content in dojox grid from htmlStore


I am displaying data from an htmlStore table in a dojox.grid.DataGrid. I wish to have html content (anchors - a href) in some of the data cells. I tried hardcoding the anchors in the htmlStore table but obviously that was grossly inefficient.

I was instructed to use an htmlStore. My preference was to use a ItemFileWriteStore then I could just hard code the url in the associated json file.

Layout code below. Thanks in advance!


            dojo.require("dojox.data.HtmlStore");
            dojo.require("dojox.grid.DataGrid");
                // set the layout structure:
                var layoutDash = [

                [{
                    field: 'Order ID',
                    name: 'Order ID',
                    width: '56px'
                },
                {
                    field: 'Opportunity ID',
                    name: 'Opportunity ID',
                    width: '110px'
                },
                {
                    field: 'Opportunity Name',
                    name: 'Opportunity Name',
                    width: '170px'
                },
                {
                    field: 'Customer',
                    name: 'Customer',
                    width: '210px'
                },
                {
                    field: 'Sales Rep',
                    name:  'Sales Rep',
                    width: '80px'
                },
                {
                    field: 'Stage/Status',
                    name:   'Stage/Status',
                    width:  '100px'
                },
                {
                    field: 'Last Modified',
                    name:  'Last Modified',
                    width: '90px'
                },
                {   
                    field: 'Actions',
                    name:  'Actions',
                    width:  'auto',
                    editable: 'true'
                }]];

Solution

  • Resolved. I create a formatter "actionsURL" and added it to the grid.cell.

    
        {   
            field: 'Actions',
            name:  'Actions',
            width:  'auto',
            editable: 'true',
            formatter: actionsUrl
        }]];
    
    

    Then added the function below the layout code.

    IMPORTANT. READ IF YOU INTEND TO USE THIS TECHNIQUE: there should be an html anchor encapsulating the returned value "Edit" in single quotes. It it just not showing up in my demo code.

                      
            function actionsUrl() {
                return 'Edit';
            }