Ext.Net - Creating command columns for GridPanel on client-side

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 Ext.net.GridPanel (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 Ext.net.CommandColumn({ 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 Ext.net.GridPanel({ 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 Ext.net.CommandColumn({ 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) { .... } } } }); {/syntaxhighlighter}

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.



rahul's picture

Hi Hardeep, multiple points to take care of for you:

  1. The name is Rahul (not Rahual)
  2. You should be knowing that Coolite/Ext.net is based on ExtJs. Whenever in doubt, ExtJs docs should come in handy. Here's the link:
  3. ExtJs is based on MVC architecture. In the case of GridPanel, GridPanel itself is the Controller, GridView in the View, and Store is the Model.
    Therefore, any time you want to access data, turn to the Store directly (the attached file demonstrates this).
  4. Did you test the last file properly. It has 2 grids, first with RowSelectionModel, and second with CheckboxSelectionModel.
    If you test the second Grid carefully, it's rows would not get de-selected when you click on any row inside it. 

Hi Rahul ,

I have tested the second grid but  its rows are deselected when i click on any row .But in the latest code on clicking the Button- [Get all Row Values] its giving me what i want but how can i use these values in a string or in a extra parameters.Actually i do not write code in  markup i always try to make it in Code Behind. As i m not gud in coolite i don't know how to use the same code in code behind.

Have a Gud Day..............

Thanks n Best Regards
Hardeep Singh Bhullar

rahul's picture

Well, on my setup, the rows for the second grid do not get deselected on clicking a row.. Maybe due to difference in Coolite/Ext.net versions we are using.

Whatever code I have between markup (in the Listeners) is javascript. there's no way you can move that to code-behind.

But for the code between the <script runat="server"></script> tags towards the top of the page, you can simple cut-paste the content between the tags in the code-behind.

Regarding the values, I have just assembled an array from the Store records, and encoded it using Ext.encode into a string. You can easily pass that string to the server in an AjaxMethod/DirectMethod as a string parameters, or to an AjaxEvent/DirectEvent as an ExtraParam.

Then on the server, you can easily construct back the object from the string using System.Web.Script.Serialization.JavaScriptConverter class.

Hello Rahul ,

Thanks for helping me a very long time ..... i m doing my best at my end .

Could you please tell me which version u r using of coolite js..... So that i can solve my issues....

Have A Nice Time

With Best Regards........

Hardeep Singh Bhullar

rahul's picture

I am using the Ext.net 1.0 version. Please note that the current official release of Coolite is 0.8.2. With the upcoming 1.0 release, Coolite would be renamed to Ext.net.

Only premium members have access to the 1.0 version from the SVN. However, Goeffrey MacGill from the Coolite team released a 1.0 preview some days earlier that should be available on coolite forums here:

Take care that 1.0 has a lot of breaking changes. You would want to study the Change Log carefully before making a switch to 1.0.

Hello Rahul ,

As You told me that there are a lot of changes in 1.0. Can you please tell me bugs in 1.0.So that i can be sure what to do next as i have been trying to get it since the last week.But unable to find any bug.

Thanks n Best Regards

Hardeep Singh Bhullar

rahul's picture

Hi Hardeep, well I was pretty surprised at the question. 1.0 is under active development, and as any other under development product, I come across occasional bugs. But I must say, the Coolite/Ext.net team is pretty serious about the quality of their toolkit. Bugs reported by premium members in particular, and community in general are resolved by the earliest.

However, these fixes are only available to the SVN members unless they make it to the official release for the general community.

Why would you be trying to find a bug? And an absence of it is in itself a testimony to the good work the team has done. Well as such, I don't have anything to present here. I believe you are using the 1.0 preview released in March. I would seriously recommend coding against the preview even if you do not have access to the latest build because of the tremendous number of new features in 1.0, and an equally large number of breaking changes to the previous versions. Coding against the preview would ensure you are ready for the major 1.0 release as soon as it is publicly available.

Hello Rahul,

Thanks for a quick reply.Actually i have half of my Code done.If i move to 1.0 how much changes will occur.Will it effect my previous Code or not?

Thanks n Best Regards

Hardeep Singh Bhullar

rahul's picture

The best answer to your query would be the official 1.0 Change Log itself, which is attached with this comment. This is the latest list of 1.0 changes as of now.

Hello Rahul,

Hope You are fine there.
Actually I m trying to open a webform in ext:TabPanel.How is it possible? I need your hel.

Thanks n Best Regards.
Hardeep Singh Bhullar

rahul's picture

Hello Hardeep, the best place for getting such sort of assistance would be Coolite forums:

Sir, I am Gururaj RB,
Please tell me how to handle event of CheckBoxXolumn of GridPanel in a JAVASCRIPT
Selected row is checked or Unchecked in a Javascript
I want to display alert message of Checked and Unchecked

rahul's picture

Hi Gururaj, Did you check the docs:

See the rowselect and selectionchange events in the Events section of the page towards the bottom. This post is turning out to be a support thread, rather than a blog post...

Hi Rahul,

You are doing great job and I love reading your posts.

I just have a small query.. (I am new to coolite)

How to add a text box column in gridpanel. Gridpanel Editor shows textbox only on double click. But I want the textbox to be visible always.


rahul's picture

Hi Shankar, I am not too sure why would you want to keep a textbox always visible in a GridPanel column. You might be interested in knowing that the GridPanel has a ClicksToEdit property. Set this to 1, and your GridPanel would switch to edit mode on a single click.

However, if you for some reason always want to display a textbox there, then the only solution I can currently imagine is to specify a Renderer for the appropriate column, and return a <input type="text" /> tag from there. I have not tested this, but it should work.

Hi Rahul,

Awesome solution. I had a very unique requirement and was wondering how to implement. Never thought of returning textbox using renderer. You are smart Smile

I didnt get an email notification about your reply. So I started searching for a solution today and fortunately found the reply to my question through Google Smile

Thanks for this Rahul and this saved lot of my time.



Hi Rahul,

Do you know where community members of coolite can download the examples project of Ext.Net.

I just downloaded the preview release but they don't have examples project in that.


rahul's picture

Hi Shankar, you can browse the examples at: http://examples.ext.net. However, I cannot help you with anything that Ext.Net team does not provide you through its site.

I understand Rahul. I am new to Ext.Net and was not sure if they have it somewhere. Geoffrey from Ext.Net team said they will release the example explorer with the next release.

Thanks for your prompt response.

i need to to bind data in the combination of entry and exit plazano and id the fare amts coming in to the matrix table

it looks like this   entry/exit:

101                                                  105      110     250

fare var tot fare1  vat2 tot  gtotal

101             5   10  15   10     20   40    55
110                10  10  20   5   5    10       30

this example is for 1 cel of comination 101 101  plaza nos ,

the fare comes from database with 7 columns to show in 1 cell

please help me in giving a proper code


on selecting the date and type of payment , the data is bind on reven button 1 click

the data in rows need to come from database with the combination of row and col
this trafcollorign shows matrix row and col  coming from a table
with this combination of row and col the data of 6 col comes and added as grandtotal
  entry/exit      101                                                 105                                          110 ......... 250    ----------->  binded from differnet table first  row/col
                   sp  sv  t     op     ov   t   gt      sp  sv  t     op     ov   t   gt                           ONLY        1 row for heading of 7 colum each in 1 cell
101             10  10  20    5    10   15  35      20  20  40    5    20   25  65                     sp,sv,op,ov are fields that has data in table and binds here
depending on the combination of plaza nos of entry/exit and id

FROM other table 2
105            20  20  40    5    20   25  65 
110           20  20  40    5    20   25  65

in the send code got the matrix from diff table now need to bind the data from table 2 in the colums

rahul's picture

Hi, I am afraid, but I was not able to understand your problem clearly. Moreover, this does not looks like to be associated to Ext.Net/ExtJs. Please keep your comments related to the post.

Hi Rahul How Are You?

Wheneevr i have problem i knock ur door. This time i need to bind a tree panel from database actually i don't want to bind it using  loop bcoz it makes tree too slow.

So please help me how to make it faster by binding direct from databse without any loop.


rahul's picture

Hi Hardeep, I am glad to help. However, I have created dedicated forums for providing help to users for my site, so that I can keep my blog comments related to blog topic being discussed. Please see the following:

http://www.rahulsingla.com/chit-chat/2010/07/general-help-and-support I appreciate you seeking help, but please post your question in the appropriate forum (http://ike.co.in/forum/net/extnet), and I will definitely reply to it.

I have already created a username for you at the forums and I am mailing your password to you separately in a mail.