radion button inside jqxgrid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular grid, Context Menu, createeditor, createwidget, custom editor, get selected value, get selection, geteditorvalue, getselectedrowindex, grid, initeditor, initwidget, jquery grid, jqxgrid, radio button editor, radio button selection

This topic contains 9 replies, has 3 voices, and was last updated by Dimitar 7 years, 9 months ago.

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

Author

radion button inside jqxgrid Posts
July 13, 2016 at 4:59 pm radion button inside jqxgrid #85719

GabrielCostaAlves
Participant

Hi, I have column radiobutton. But I can´t get the selected value, always empty value.

My code:

var jsonData = [
{
“12”: “Smartphone”,
“5111”: null
}
];
var source = {
dataType: “json”,
dataFields: [
{ name: “12”, type: “string” },
{ name: “5111”, type: “string” }
],
localData: jsonData
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxGrid”).jqxGrid(
{
source: dataAdapter,
editable: true,
width: “100%”,
height: “250px”,
sortable: true,
selectionmode: “none”,
editmode: “selectedrow”,
columnsResize: true,
columns: [
{ text: “Descrição”, width: “100”, dataField: “12” },
{ text: “Controle Estoque”, width: “100”, dataField: “5111”, columntype: ‘custom’,createeditor: function (row, column, editor) {var element = $(‘<div id=\’jqxRadioButtonTrue7\’>Sim</div><div id=\’jqxRadioButtonFalse7\’>Não</div>’);editor.append(element); element.jqxRadioButton({ groupName: “Group2”});}}
]});

//Get columns value
var data = $(‘#jqxGrid’).jqxGrid(‘getrowdata’, row);

July 14, 2016 at 5:26 am radion button inside jqxgrid #85731

Dimitar
Participant

Hello GabrielCostaAlves,

Please try the following, alternative, implementation of radio button selection in jqxGrid that works fine: https://www.jseditor.io/?key=jqxgrid-radio-button-selection. In it, you can get the selected row with the method getselectedrowindex.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

July 14, 2016 at 3:04 pm radion button inside jqxgrid #85758

GabrielCostaAlves
Participant

Hi Dimitar,

As can you see my code, I have two raddiobuttos in same column,then I need get value what radiobutton is selected jqxRadioButtonTrue7 or jqxRadioButtonFalse7

Best Regards.

July 15, 2016 at 6:00 am radion button inside jqxgrid #85762
Dimitar
Participant
Hi GabrielCostaAlves,

Here is a complete, working example based on your code. We hope it is helpful to you:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var jsonData = [{
                "12": "Smartphone",
                "5111": null
            }];
            var source = {
                datatype: "json",
                datafields: [{
                    name: "12",
                    type: "string"
                }, {
                    name: "5111",
                    type: "string"
                }],
                localdata: jsonData
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxGrid").jqxGrid({
                source: dataAdapter,
                editable: true,
                width: "100%",
                height: "250px",
                rowsheight: 40,
                sortable: true,
                selectionmode: "singlerow",
                editmode: "selectedrow",
                columnsresize: true,
                columns: [{
                    text: "Descrição",
                    width: 100,
                    datafield: "12"
                }, {
                    text: "Controle Estoque",
                    width: 1000,
                    datafield: "5111",
                    columntype: 'custom',
                    createeditor: function (row, column, editor)
                    {
                        var element = $('<div id=\'jqxRadioButtonTrue7\'>Sim</div><div id=\'jqxRadioButtonFalse7\'>Não</div>');
                        editor.append(element);
                        element.jqxRadioButton({
                            groupName: "Group2"
                        });
                    },
                    initeditor: function (row, cellvalue, editor, celltext, pressedChar)
                    {
                        if (cellvalue) {
                            var radioButtons = editor.children();
                            for (var i = 0; i < radioButtons.length; i++) {
                                if ($(radioButtons[i]).text() === cellvalue) {
                                    $(radioButtons[i]).val(true);
                                    break;
                                }
                            }
                        }
                    },
                    geteditorvalue: function (row, cellvalue, editor)
                    {
                        var radioButtons = editor.children(),
                            firstRadioButton = $(radioButtons[0]),
                            secondRadioButton = $(radioButtons[1]);
                        if (firstRadioButton.val() === true) {
                            return firstRadioButton.text();
                        } else {
                            return secondRadioButton.text();
                        }
                    }
                }]
            });
            //Get columns value
            //var data = $('#jqxGrid').jqxGrid('getrowdata', row);
        });
    </script>
</head>
<body class='default'>
    <div id="jqxGrid"></div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
July 15, 2016 at 2:45 pm radion button inside jqxgrid #85788

GabrielCostaAlves
Participant

Hi Dimitar,

Works for me.

Perfect!

Best Regards

June 20, 2017 at 9:29 am radion button inside jqxgrid #94436

Shamine
Participant

HI,

How to add a radiobutton group in a jqxGrid , which is editable without any row selection or click.
I need to select radio button and right click and open a popup displaying the selected radio button.

Regards,
Shamine Dsouza

June 21, 2017 at 4:47 am radion button inside jqxgrid #94447

Dimitar
Participant

Hi Shamine Dsouza,

By implementing the column callback functions createwidget and initwidget, you can display radio buttons directly in jqxGrid cells (without the need to enter cell edit mode). Here is a demo showing how these functions can be used: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?light. And the following example shows how to implement a context menu which is shown when a grid cell is right-clicked: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/contextmenu.htm?light.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

June 21, 2017 at 10:49 am radion button inside jqxgrid #94454

Shamine
Participant

Hi,

The radio button is visible on the grid column without any selection or click event required.
However it does not remain selected once a radio control of a different row is selected.

The functionality that i am looking for is bulk edit and submit . So i will be selecting the required radio control in the radio group of all the rows and submitting it on an external button click.
Also it should load data and select the radio button according to the value in the data adapter. Currently while loading it shows radio control selected for only the last row of the grid .

Regards,
Shamine Dsouza

June 21, 2017 at 10:50 am radion button inside jqxgrid #94455

Shamine
Participant

Thanku Dimitar , the control is visible as desired .

However it does not remain selected once a radio control of a different row is selected.

The functionality that i am looking for is bulk edit and submit . So i will be selecting the required radio control in the radio group of all the rows and submitting it on an external button click.
Also it should load data and select the radio button according to the value in the data adapter. Currently while loading it shows radio control selected for only the last row of the grid .

Regards,
Shamine Dsouza

June 22, 2017 at 4:51 am radion button inside jqxgrid #94471

Dimitar
Participant

Hi Shamine Dsouza,

If you wish, you can share your current implementation (as a jsEditor or a JSFiddle example) so that we can test it and provide you with suggestions on how to solve your issue.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

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

You must be logged in to reply to this topic.