How can I apply a custom column layout to a grid?

Hi,

I am trying to use the Javascript API in order to create a custom Grid. One of the options of the getGrid method provides the property. Here is the description from the documentation.

cm: a custom ColumnModel

After some research, I found how to define the columns that I want, but can't figure out how to get them into the CustomModel. Here is the code to define the columns:

var cmDef = [
{header: vui.ui.workspace.getMessage("grid.columns.name"), width: 200, sortable: true, renderer: vgi.nameColumnRenderer, dataIndex: 'name', id: 'name'},
{header: vui.ui.workspace.getMessage("grid.columns.approval"), width: 150, sortable: true, renderer: vgi.searchStatusRenderer, dataIndex: 'status', id: 'status', hidden: true},
{header: vui.ui.workspace.getMessage("grid.columns.type"), width: 200, sortable: true, renderer: vgi.typeColumnRenderer, dataIndex: 'objectTypeDisplayName', id: 'objectType'},
];

While scanning through the source, the only thing that I could find was:

var gridColumnModel = new vExt.grid.ColumnModel(cmDef)

Unfortunately, that code will throw an error on my page because it says that there is no constructor available.

Does anyone have information on how to implement a custom column layout.

Thanks,

Eric

Find more posts tagged with

Comments

Venkateswar_Madala

Hi,

It isn’t required to create any instance for ColumnModel (Infact there is no such vExt.grid.ColumnModel class). It’s an array of objects, something like below:

var cmDef = [
{header: vui.ui.workspace.getMessage("grid.columns.name"), width: 200, sortable: true, renderer: vgi.nameColumnRenderer, dataIndex: 'name', id: 'name'},
{header: vui.ui.workspace.getMessage("grid.columns.approval"), width: 150, sortable: true, renderer: vgi.searchStatusRenderer, dataIndex: 'status', id: 'status', hidden: true},
{header: vui.ui.workspace.getMessage("grid.columns.type"), width: 200, sortable: true, renderer: vgi.typeColumnRenderer, dataIndex: 'objectTypeDisplayName', id: 'objectType'},
];

var config = {

----

uiConfig: {

cm: cmDef

}

};

vui.ui.grid. getGrid(config);

Let me know if you have any questions.

Thanks,

Venkat.

From: eLink Entry: Discussion Group - Web Experience Management [mailto:v7webcontentmanagement@elinkkc.opentext.com]
Sent: Saturday, July 19, 2014 1:17 AM
To: eLink Recipient
Subject: How can I apply a custom column layout to a grid?