All of us using Ext.Net (also known as Coolite) must have used the <ext:CommandColumn> in the GridPanel’s Columns collection, which allows us to have clickable buttons (called GridCommands in Ext.Net) inside the columns of a GridPanel, though which we can allow operations on individual rows of the grid. A cool feature one should agree!!

However, I recently had a situation where I needed to create dynamic GridPanels on client-side with each GridPanel needing to have Command columns. I am not too sure whether I should applaud or criticize the Ext.Net team for the undocumented client-side changes and enhancements they have made to the core ExtJs controls. I think I would applaud them (for adding really useful productive enhancements) to almost all ExtJs controls, but only if they document this precisely.

Now, in my case, it was quite clear that ExtJs GridPanel does not support CommandColumns natively, and it was an Ext.Net extension. So, after some research of the script generated by Ext.Net GridPanel, here are my findings to add CommandColumns to the GridPanel on client-side:

  1. Your Grid should be an instance of (and not the core ExtJs Ext.grid.GridPanel)
  2. Use the following in the Columns collection, where you need a Command Column:

    {syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }new{ width: 75, hideable: false, commands: [{ xtype: “tbbutton”, command: “Edit”, iconCls: “icon-pencil” }, { xtype: “tbbutton”, command: “Delete”, iconCls: “icon-delete”}] }{/syntaxhighlighter}Clearly, each GridCommand corresponds  to a toolbar button, and you can add as many as you need to a single column.

  3. The GridPanel’s config object must contain the following config property:
         columnPlugins: [2],

     Take care here that 2 is the (0-based) position of your Command column. In this case, the position of the command column is actually 3rd (2nd if 0-based counting).
    Also, notice that this config option accepts an array, and as such should specify the (0-based) ordinals of all your command columns.
    Failure to specify this config option to grid, or specifying incorrect ordinals would not make the commands to appear.

Here’s a complete example of creating a GridPanel on the client-side with Command columns:


{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }var grid = new{
store: store,
columnPlugins: [2],
selectionMemory: false,
cm: new Ext.grid.ColumnModel({
columns: [
{header: ‘Date’, dataIndex: ‘invoiceDate’, renderer: MB.dateRenderer },
{ header: ‘Passenger Name’, dataIndex: ‘passengerName’ },
new{ width: 75, hideable: false, commands: [{ xtype: “tbbutton”, command: “Edit”, iconCls: “icon-pencil” }, { xtype: “tbbutton”, command: “Delete”, iconCls: “icon-delete”}] })]
listeners: { ‘command’: function(command, record, index) {
switch (command) {

You would assign the event handler to the ‘command’ listener as usual for handling GridCommands, and perform the desired actions based on the command that was clicked.