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:
- Your Grid should be an instance of Ext.net.GridPanel (and not the core ExtJs Ext.grid.GridPanel)
- 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.
- 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.
Hi Hardeep, multiple points to take care of for you:
http://www.extjs.com/deploy/dev/docs/
Therefore, any time you want to access data, turn to the Store directly (the attached file demonstrates this).
If you test the second Grid carefully, it’s rows would not get de-selected when you click on any row inside it.
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
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
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
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.
Regards,
Shankar
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.
Regards,
Shankar
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
!
!
250
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
thanks
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
250
in the send code got the matrix from diff table now need to bind the data from table 2 in the colums
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.