CODEWITHSUNDEEP
extjs
Victor
Victor

Reputation: 17107

EXT js grid having one column of radio buttons

I have an ext js grid like below: 

var grid = new Ext.grid.GridPanel({
columns: [
{header: 'Account Id',dataIndex:'accountId' },
{header: 'Account NUmber',dataIndex:'accountNumber' }
]
})

Now I need to show Account Id column as a column of radio buttons. So from the grid user can select one Account Id and submit. When the user reloads the page, that account id should be preselected.

I need some help on how to proceed on this. Do I need to write a renderer on Account Id column? Or is there an easier way.

EDIT: I did like this: 

{header: 'Account Id',dataIndex:'accountId',renderer: function(value) {
return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
 }},

What is the syntax to add an onclick event or onchange event to the radio group?

Upvotes: 5

Views: 11437

Answers (2)

Sean Adkinson
Sean Adkinson

Reputation: 8615

Building off the previous answer, yes, I think using a renderer for your column is the correct solution. I think you should go about the click event differently than J. Bruni suggested though. I'd recommend a click listener on your grid panel that checks if you clicked a radio button, and delegates to a method in your GridPanel.

Something like this:

MyRadioGrid = Ext.extend(Ext.grid.GridPanel, {
    columns: [
        {header: 'Account Id',dataIndex:'accountId', renderer: function(value) {
            return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
        }},
        {header: 'Account NUmber',dataIndex:'accountNumber' }
    ],

    afterRender: function() {
        MyRadioGrid.superclass.afterRender.apply(this, arguments);
        this.el.on('click', this.checkRadioClick, this);
    },

    checkRadioClick: function(event) {
        if (event.getTarget('input[type="radio"]')) {
            //radio clicked... do something
        }
    }
});

Upvotes: 8

J. Bruni
J. Bruni

Reputation: 20490

You did well on showing Account Id column as a column of radio buttons, by using a renderer function.

Regarding the onclick event for these, you may simply add the onclick attribute in the HTML tag:

return "<input onclick='my_function()' type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";

Upvotes: 3

Related Questions