three columns with checkbox, want only one to enable at a time

[omnisriParticipant]

Hi,
I am pretty new to this stuff, and as per requirement I went ahead with jqxgrids since it has good options for pagination, filtering, sorting, etc,.
I want something specific that I tried looking up, but unable to wrap my head around it.

there are 6 columns, where last three columns are checkbox columns. now, in each row, the user should be able to select only one checkbox at a time. (Initially I wanted radio buttons, but since jqxgrids doesn’t provide radio button columns, i went ahead with checkboxs). so, now am trying to replicate the action of radio button, where in one row only one of the checkbox should be able to be selected. if they check in column 4, the checked in column 5 and 6 should be unchecked. and when they select someothing and click submit form, I should be able to sent the value of the selected row with checked value( like ‘yes’ for YES selected, ‘no’ if selected NO and ‘null’ for MAYBE selected)

Is this really possible? Please point me to the right direction or articles. I would have loved to have some radio buttons, but checkbox that behaves similar to radio button would also work.

<div class=”template jqxgrid-angular”>
<jqxGrid #jqxgridAngular [altrows]=”true”></jqxGrid>
</div>

@ViewChild(‘jqxgridAngular’) jqxgridAngular: jqxGridComponent;

this.source = {
datatype: ‘json’,
root: ‘SampleReports’,

datafields: [
{ name: ‘Name’, type: ‘string’ },
{ name: ‘Time’, type: ‘string’ },
{ name: ‘Date’, type: ‘string’ },
{ name: ‘status’, type: ‘bool’ },
{ name: ‘status’, type: ‘bool’ },
{ name: ‘status’, type: ‘bool’ }

]
};
this.dataAdapter = new jqx.dataAdapter(this.source);

this.columns = [
{ text: ‘Name’, datafield: ‘Name’, cellsalign: ‘center’, align: ‘center’, width: ‘20%’,editable: false },
{ text: ‘Time’, datafield: ‘Time’, cellsalign: ‘center’, align: ‘center’, width: ‘16%’,editable: false },
{ text: ‘Date’, datafield: ‘Date’, cellsalign: ‘center’, align: ‘center’, width: ‘16%’,editable: false },
{ text: ‘Yes’, datafield: ‘status’, threestatecheckbox: false, columntype: ‘checkbox’, cellsalign: ‘center’, align: ‘center’, width: ‘16%’ },
{ text: ‘No’, datafield: ‘status’, threestatecheckbox: false, columntype: ‘checkbox’, cellsalign: ‘center’, align: ‘center’, width: ‘16%’ },
{ text: ‘May Be’, datafield: ‘status’, threestatecheckbox: true, columntype: ‘checkbox’, cellsalign: ‘center’, align: ‘center’, width: ‘16%’ },

];

this.jqxGridOptions = {
source: this.dataAdapter,
width: ‘100%’,
autoheight: true,
columnsresize: true,
sortable: true,
filterable: true,
editable: true,
showfilterrow: false,
rowsheight: 40,
columnsheight: 40,
filterrowheight: 47,
pageable: true,
columns: this.columns
};
}

I tried to create a plunkr but couldn’t. Sorry, am so new to this so learning so much everyday.

Thank you, in advance.

[HristoParticipant]

Hello valandas,

I would like to suggest you read this topic:
https://www.jqwidgets.com/community/topic/radiobutton-in-jqxgrid/
It is possible to check when the value in one cell is changed (clicked on radiobutton) and to clear this from other two columns – cellclick event.
As you mentioned for this purpose the setcellvalue method will be helpful.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[omnisriParticipant]

Hi Hristo,

Thank you, for the response. Will try out the setcellvalue and check it out.

-Valandas.

[HristoParticipant]

Hello Valandas,

I meant to use this way to recognize when one of three radio buttons is clicked.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts