No sortable columns in Moodgets

I use a request on the moodgets discussion group to create a new quick tutorial about how to create plugins for Moodgets.

How can I avoid the sorting of a column (the request is not exactly this but it can solve the issue ) ?

When you need to create or modify features for moodgets I suggest to create a new plugin (see this post ) and, if possible to start from an existing one.

Now we are going to cover this last case.
We can start our plugin by the SortableGridPlugin.js. The idea is to copy and past the source file renaming it to “MySortarbleGridPlugin.js”. Then you need to modify the name and id of your new file:


var MySortableGridPlugin = new Class({

Extends: GridPlugin,

id: 'MySortableGridPlugin',
…
…
…

At this point we can make our changes at our new plugin, in this case we are going to check if into the column model there is a flag “sortable:false” (to default we can leave every column sortable). If you read the source code of the function “onNewHeaderCellHandler” you can find the following lines of code:

p_headerCell.store('sort', p_columnModel.sort);
p_headerCell.addEvent('click', this.onHeaderClickHandler.bind(this));
p_headerCell.addEvent('mouseout', this.onHeaderOutHandler.bind(this));
p_headerCell.addEvent('mouseover', this.onHeaderOverHandler.bind(this));


That lines add the events listeners to a new column header. Our idea is to avoid to attach the listeners if we have the flag “sortable:false” in the column model (the column model object is passed as parameter to the “onNewHeaderCellHandler” function).

Our code becomes:

if (!$defined(p_columnModel.sortable) || p_columnModel.sortable == true){
p_headerCell.store('sort', p_columnModel.sort);
p_headerCell.addEvent('click', this.onHeaderClickHandler.bind(this));
p_headerCell.addEvent('mouseout', this.onHeaderOutHandler.bind(this));
p_headerCell.addEvent('mouseover', this.onHeaderOverHandler.bind(this));
}

Now we can use our new plugin when we define a grid. For example if we want that the “title” column can’t be sorted we can define our column model in this way:

var demo_columnModel = [{
header: "ID",
dataIndex: 'id',
dataType:'number',
width:50
},{
header: "Name",
dataIndex: 'first_name',
dataType:'string',
width:105,
sortable: false,
validator: 'required validate-alpha maxLength:30',
isEditable: true
}]


then we define the grid using our new plugin:

var g_grid = new Grid($('grid'), {
dataStore: new RemoteDataStore({requestOptions:{url: ...}}),
columnModel: new ColumnModel(demo_columnModel),
gridPlugins: [
new MySortableGridPlugin()
]
});


If you want you can download the MySortableGridPlugin source file .