Dgrid - Display label for number (i.e. 02 = Cat) I want to display Cat - not the number

Question

Dgrid - Display label for number (i.e. 02 = Cat) I want to display Cat - not the number

118 views Asked by Johnson At 11 September 2024 at 01:51

In my Dgrid I have a column that displays the code (in number format) for an event. enter image description here

I want to display the label not the number in the dgrid. So if 1 = Cat. In the database it shows as a 1 - but I want to display 'Cat' in dgrid. Can't find anything on how to do this.

Help or a lead in a direction would be helpful. Thanks!!

UPDATED: 6.16.15

Here is the code. I'm limited in what I can show. enter image description here

These are some of the codes. 02 = XXXXX, 03 = XXXXX1, and so on and so on. Right now, the dgrid displays the numbers. It's kind of like a key. I need it to display what the number represents in the dgrid, not the number. So 02 should display 'Traffic Stop'. Not sure how to do a jsfiddle yet, and don't have a whole lot of extra time at the moment. I'm limited in what info I can give out, so I'd have to recreate a dummy version.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>XXXXXXXX Events</title>
    <link rel="stylesheet" href="/static/web_ui/dgrid/css/skins/slate.css">

<h1>XXXXXXXX Events</h1>

<form id="queryForm">
        <label for="XXXXXField">XXXXX Type contains:</label>
        <input id="XXXXXField" name="event_type">
        <button type="submit">Filter</button>
        <button type="reset">Reset</button>
    </form>


    <script src="/static/web_ui/dojo/dojo.js"
        data-dojo-config="async: true"></script>

    <script>
        require([
            'dojo/_base/declare',
            'dojo/dom',
            'dojo/on',
            'dstore/Rest',
            'dstore/Request',
            'dgrid/extensions/ColumnResizer',
            'dgrid/extensions/ColumnReorder',
            'dgrid/CellSelection',
            'dgrid/extensions/DijitRegistry',
        //  'dstore/Memory',
        //  'dstore/Trackable',
        //   'dstore/Cache',
            'dgrid/OnDemandGrid'
        //  'dojo/domReady!'
], function (declare, dom, on, Rest, Request, ColumnResizer, ColumnReorder, CellSelection, DijitRegistry, OnDemandGrid) {
        var store = new Rest({target:'/api/XXXXXXEvents/?format=json',
            sortParam: 'ordering', ascendingPrefix:'', descendingPrefix:'-'
    });


    //  var cacheStore = Cache.create(store, {
    //      cachedStore: new (Memory.createSubclass(Trackable)) ()
    //  });

        var grid = window.grid = new (declare([OnDemandGrid, ColumnResizer, ColumnReorder, CellSelection, DijitRegistry])) ({
        collection: store,
        selectionMode: 'single',
        sort: 'id',
    //    idProperty: 'id',

        columns: [
            {field: 'id', label:'ID', resizeable: false},
            {field: 'XXXXX_type', label:'XXXXX Type', resizeable: false},
            {field: 'XXXXX_at', label:'XXXXX Time', resizeable: false},
            {field:'XXXXX', label:'XXXXX Count', resizeable: false},
            {field:'XXXXX', label:'XXXXX', resizeable: false},
            {field:'XXXXX_info', label:'XXXXX Info', resizeable: false},
            {field:'hidden', label:'Hidden', resizeable: false},
            {field:'XXXXX', label:'XXXXX', resizeable: false},
            {field:'XXXXX', label:'XXXXX', resizeable: false}
        ]

    }, 'grid');

 grid.startup();    

    on(dom.byId('queryForm'), 'submit', function(event) {
                event.preventDefault();
                grid.set('collection', store.filter({
                    // Pass a RegExp to Memory's filter method
                    // Note: this code does not go out of its way to escape
                    // characters that have special meaning in RegExps
                    last: new RegExp("^\d+$")
                }));
            });

            on(dom.byId('queryForm'), 'reset', function() {
                // Reset the query when the form is reset
                grid.set('collection', store);
            });

    });

    </script>

</head>

 <body class="slate">
<div id="grid"></div>
</body>
</html>

Original Q&A

There are 1 answers

**frank** · Accepted Answer · 2015-06-16 15:41:30

You need to use the column formatter function for rendering data.

check the jsfiddle over here.

Check the examples over here

I have taken this example and modified as per your needs.

require([
    'dgrid/Grid',
    'dojo/domReady!'
], function(Grid) {
    var data = [

        { id: 1, number: 7 },
        { id: 2, number: 8 },
        { id: 3, number: 9 }
    ];

    function testFormatter(item){
                //console.log(item,typeof(item));
                var newItem;
                if ( item == 7 ) 
                    newItem = 'Dog'
                else if ( item == 8 )
                    newItem = 'Cat'
                 else if ( item == 9 )
                    newItem = 'Bird'
         return newItem;

    }

    var columnsFormatter = [
                {
                    label: "Number",
                    field: "number",
                    formatter: testFormatter
                }
            ];

    var grid = new Grid({
        columns: columnsFormatter
    }, "gridcontainer");;
    grid.renderArray(data);
});

TechQA.

Dgrid - Display label for number (i.e. 02 = Cat) I want to display Cat - not the number

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in DATABASE

Related Questions in DOJO

Related Questions in DGRID

Popular Questions

Popular Tags

Trending Questions