Dojo Data Grid – Part 5: Grid Column Features

To surface a column in a Dojo Data Grid, all you need to do is drag a Dojo Data Grid Column control into the Dojo Data Grid control and set its field property. In this post, I’ll dig into some additional properties of the column and also show how to set an attribute prevent resizing.

Dojo Data Grid Series

Column Properties

This screen shot shows the available properties for the Dojo Data Grid Column control:
Grid5_1

Column Label

The label property sets the column header text. It overrides the default value, which is the name of the field in the REST service (which, in turn, defaults to the programmatic name of the underlying view column, if it’s not a custom column).

Column Width

The width property sets the column width. If not set, it will be automatically sized when rendered.

Formatting Column Data

The formatter property accepts the name of a client-side JavaScript function that will format the column data.

For example, if you wanted the firstname column to be in all upper case, you could include this code in an Output Script block and set the formatter property of the column to allUpper

function allUpper(value) {
  return value.toUpperCase();
}

Grid5_2

Hiding Columns

The hidden property determines whether the column is displayed. You can compute the value conditionally with SSJS if you need it to be based on the current user or some other piece of contextual information.

Editable Column Properties

The cellType, editable, and options properties are all related to editing column values directly in the grid. The cellType property generally defines the data type for the cell when being edited. The editable property is part of determining whether the cell is editable (other factors are involved), and the options property defines the options if the cell uses a drop-down list when editable.

I’ll cover these properties more thoroughly in a future post about editing data in the grid.

Advertisements

10 responses to “Dojo Data Grid – Part 5: Grid Column Features”

  1. hari says :

    Thanks for sharing excellent articles about dojo data grid.. I have a question about row actions, would it be possible to create html buttons with actions script for a column/ Also is it possible to add dojo tooltips for a column ?

    • Brad Balassaitis says :

      There’s a property to prevent the grid from escaping HTML data. In theory, that should allow you to pass through the content to make your own buttons. I haven’t tried it yet. However, I’ll be covering the row click and row double-click actions in a post next week. They provide an event handler to trigger action. You can use the onStyleRow event (also covered in a post next week) to run code against every row as it is added to the grid. That gives you place to execute client-side JavaScript code; you should be able to write code to attach a tooltip there. The onStyleRow event also has a built-in ‘over’ state that executes code when you hover over a row, so you should be able to pop up a tooltip that way as well.

  2. Ronda Brewer says :

    I am having difficulties making a column editable. I have set editable to true and specified cellType as text. What am I missing? Also, can I provide choices for the user to select?

    • Brad Balassaitis says :

      I’m working on a post about editable columns in the grid (it will be part 11 in this series). In working through it, I found a maddening issue with the editable cells not updating. I didn’t see it documented anywhere, but it started working as soon as I set the autoHeight property of the grid itself. Let me know if that helps.

  3. sridevi says :

    Hi Brad,

    I have a scenario where i need to hide a column based on value in another column. How can i do that?

    • Brad Balassaitis says :

      I’m not sure I understand how this would need to work. Are you saying you’d want to hide an entire column based on the value of one cell in one row? If that’s the case then you’d need to compute the formula via a back end lookup so it’s determined before the grid is loaded. (I’m pretty sure it’s also possible to hide a column after the grid is loaded, but I don’t know how that would be any better in this case.)

      If you’re saying that you want to hide the *value* in a column based on some other value in that same row, you could probably use a formatter function for the column to compute what to return. If that doesn’t work, then there’s a technique that I’m almost done implementing that should do the trick. I’ll write about it within a couple of weeks when I have a chance to finish working on it.

  4. Sue McKeever says :

    What if you want to have a column to select a date? Can you use a date picker?

  5. Arvind Raay says :

    I am currently working on grids in dojo and my requirement is to have a editable text box in the data grid. I have tried using editable:true in the layout, but the text box appears only after i double click the field. I want that text box while the grid is populated and the user has to click the field only once. Is there any way to do it?? Thanks in advance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: