jQuery UI Widgets Forums Grid radion button inside jqxgrid

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • 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);

    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/

    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.

    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/

    radion button inside jqxgrid #85788

    GabrielCostaAlves
    Participant

    Hi Dimitar,

    Works for me.

    Perfect!

    Best Regards

    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

    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/

    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

    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

    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/

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

You must be logged in to reply to this topic.