how to style individual cells in dgrid

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

how to style individual cells in dgrid

Arjun Dongre

Hello,

   As the subject suggests, I am using dgrid to create a map legend. I have a set of colors that I need to each color to a particular cell. I have seen one other post on stackoverflow about using rendercell(), but was not really clear on how to use it, http://stackoverflow.com/questions/30470289/color-dgrid-cell-based-on-cell-value. Is the function associated with rendercell a callback? As in, do the parameters provided in the function come from a callback? I’m just not very clear on how to go about getting access to a particular cell. Thanks,

 

Arjun

 

Arjun Dongre

Software Systems Engineer,

GIS Services

100-A Southwest Blvd

PO Box 389

Newton, NC 28658

828.465.8397

GISLogo001.bmp

 


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: how to style individual cells in dgrid

dylanks
The way dgrid determines what to render for a cell is roughly like the
diagram at
https://www.dropbox.com/s/k3wmtv47t79ae1e/Screenshot%202016-11-25%2005.42.30.png?dl=0

renderCell can be provided as a parameter in a dgrid configuration
object. The function will receive the item and value and it is expected
that you will create and return a DOM node. However, if you are just
looking to change the style for a cell, you could just use a formatter
to wrap the rendered cell inside say a span tag that contains a class
name that you want to use. Or if each row just needed to be styled then
you could do something similar with renderRow.

So you could do something like this if you want to create an extension
across multiple dgrid instances:

define(["dojo/_base/declare", "dojo/dom-class"],
function (declare, domClass) {
        return declare(null, {
                renderCell: function (item, value) {
                        var cell =  this.inherited(arguments);
                        if (value > 0) {
                                domClass.add(cell, "positive");
                        } else if (value < 0) {
                                domClass.add(cell, "negative");
                        }
                        return cell;
                }
        });
});

With the above example, you would not need to figure out how to
re-render the cell, as you're relying on the built-in renderCell method
to still work.

A perhaps simpler method would be to just have a formatter function
which can wrap the renderedCell with some markup.

To use the above example, you would save that code in a module, and mix
it into your dgrid constructor, e.g.:

require([
        "dojo/_base/declare",
        "dgrid/Grid",
        "my/CustomerRenderCell",
        "dojo/domReady!"
], function (declare, Grid, CustomRenderCell) {
        var ColorizedGrid = declare([Grid, CustomRenderCell]);
        ...


Regards,
-Dylan

on 11/22/16, 05:26 (GMT-07:00) Arjun Dongre said the following:

> Hello,
>
>    As the subject suggests, I am using dgrid to create a map legend. I
> have a set of colors that I need to each color to a particular cell. I
> have seen one other post on stackoverflow about using rendercell(), but
> was not really clear on how to use it,
> http://stackoverflow.com/questions/30470289/color-dgrid-cell-based-on-cell-value.
> Is the function associated with rendercell a callback? As in, do the
> parameters provided in the function come from a callback? I’m just not
> very clear on how to go about getting access to a particular cell. Thanks,
>
>  
>
> Arjun**
>
>  
>
> Arjun Dongre
>
> Software Systems Engineer,
>
> GIS Services
>
> 100-A Southwest Blvd
>
> PO Box 389
>
> Newton, NC 28658
>
> 828.465.8397
>
> GISLogo001.bmp
>
>  
>
--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Co-Founder, Dojo Toolkit
CEO, SitePen, Inc.  http://www.sitepen.com/
Loading...