jQuery UI Widgets Forums Grid three columns with checkbox, want only one to enable at a time

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 6 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • omnisri
    Participant

    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.


    Hristo
    Participant

    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


    omnisri
    Participant

    Hi Hristo,

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

    -Valandas.


    Hristo
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.