DatasTable with Radio Buttons and EndEditCell problems

[safragaParticipant]

Hello,
I’ am trying to make presence control windows with one dataTable, RadioButtons and edit cell for comment on each line.

STEP ONE: Load the grid with participants three radioButtons and comment columns
This step work fine.

STEP TWO: On radioButtons change => update database with new value and on cellEndEdit update database.
This step works until I add comment in last cell of the row. after that all radio Buttons stop working.

Thank you for help to make radioButtons function available after cellEndEdit.
Best regards

This is the code of the presence control window.

$("#addPresList").on('click', function () {
        $.ajax({
            type: "POST",
            url: "api/editListes.php",
            data: {
                partApptId: partApptId,
                startDate: SelectedStartDate,
                endDate: SelectedEndDate,
                subject: SelectedSubject,
                apptType: apptType
            },
            success: function(datas){
                var participants = datas;
                $.ajax({
                    type: "POST",
                    url: "templates/presences.php",
                    data: {
                        participants: participants
                    },
                    success: function (content) {
                        $("#insertModalDatas").html(content);
                        $("#listMangement").jqxWindow({
                            theme: theme,
                            width: 600,
                            height: 480,
                            draggable: true,
                            resizable: true,
                            isModal: true,
                            keyboardNavigation: false,
                            cancelButton: $("#cancelButton"),
                            initContent: function () {
                                var participantsSource = {
                                    datatype: 'json',
                                    datafield: [
                                        { name: 'id', type: 'string' },
                                        { name: 'nom', type: 'string' },
                                        { name: 'presence', type: 'string' },
                                        { name: 'remarques', type: 'string' }
                                    ],
                                    localData: participants
                                };
                                var participantAdapter = new $.jqx.dataAdapter(participantsSource);
                                $('#participantListe').jqxDataTable({
                                    theme: theme,
                                    source: participantAdapter,
                                    height: '300px',
                                    width: '100%',
                                    columnsHeight: 25,
                                    sortable: true,
                                    editable: true,
                                    editSettings: {
                                        saveOnPageChange: true,
                                        saveOnBlur: true,
                                        saveOnSelectionChange: true,
                                        cancelOnEsc: true,
                                        saveOnEnter: true,
                                        editSingleCell: true,
                                        editOnDoubleClick: true,
                                        editOnF2: true
                                    },
                                    enableBrowserSelection: true,
                                    selectionMode: 'singleRow',
                                    rendered: function () {
                                        var rows = $("#participantListe").jqxDataTable('getRows');
                                        for (var i = 0; i < rows.length; i++) {
                                            var grpName = "pre_" + i;
                                            $('#present'+i).jqxRadioButton({
                                                theme: theme,
                                                groupName : grpName,
                                                width: 25,
                                                height: 25,
                                                animationShowDelay: 500,
                                            });
                                            $('#excuse'+i).jqxRadioButton({
                                                theme: theme,
                                                groupName : grpName,
                                                width: 25,
                                                height: 25,
                                                animationShowDelay: 500,
                                            });
                                            $('#absent'+i).jqxRadioButton({
                                                theme: theme,
                                                groupName : grpName,
                                                width: 25,
                                                height: 25,
                                                animationShowDelay: 500,
                                            });
                                            var check = rows[i].presence;
                                            if(check === 'Présent'){
                                                $('#present'+i).jqxRadioButton({ checked: true });
                                            } else if(check === 'Excusé'){
                                                $('#excuse'+i).jqxRadioButton({ checked: true });
                                            } else if(check === 'Absent'){
                                                $('#absent'+i).jqxRadioButton({ checked: true });
                                            } else {
                                                $('#present'+i).jqxRadioButton({ checked: false });
                                                $('#excuse'+i).jqxRadioButton({ checked: false });
                                                $('#absent'+i).jqxRadioButton({ checked: false });
                                            }
                                        }
                                        $('#participantListe').on('rowClick', function (event){
                                            var args = event.args;
                                            var key = args.key;
                                            var row = args.row;
                                            var dataField = args.dataField;

                                            if(dataField === 'remarques'){
                                                $("#participantListe").jqxDataTable('beginCellEdit', key, dataField);
                                            }
                                        });
                                    },
                                    columns: [
                                        {text: 'Participants', datafield: 'nom', width: 250, editable: false },
                                        {text: 'Présences', datafield: 'presence', width: 100, editable: false, cellsRenderer: function (row, column, value)
                                            {
                                                return '<div data-row="'+row+'" title="Présent" id="present'+row+'" class="leftFloated"' +
                                                    ' style="float:left;"></div>' +
                                                    '<div data-row="'+row+'" title="Excusé" id="excuse'+row+'" class="leftFloated"' +
                                                    ' style="float:left;"></div>' +
                                                    ' <div data-row="'+row+'" title="Absent" id="absent'+row+'" class="leftFloated"' +
                                                    ' style="float:left;"></div>'
                                            }
                                        },
                                        {text: 'Remarques', datafield: 'remarques' },
                                    ]
                                });
                                $('#participantListe').on('cellEndEdit', function (event) {
                                    var args = event.args;

                                    var funcType = 'updateRem';
                                    var presenceId = args.row.id;
                                    var remarque = args.row.remarques;

                                    $.ajax({
                                        type: 'POST',
                                        url: 'api/updatePresence.php',
                                        data: {
                                            funcType: funcType,
                                            presenceId: presenceId,
                                            remarque: remarque,
                                        },
                                    });
                                    $.ajax({
                                        type: "POST",
                                        url: "api/editListes.php",
                                        data: {
                                            partApptId: partApptId,
                                            startDate: SelectedStartDate,
                                            endDate: SelectedEndDate,
                                            subject: SelectedSubject,
                                            apptType: apptType
                                        }
                                    });
                                });
                                $('.leftFloated').on('change', function (event) {
                                    var rowKey = event.target.getAttribute('data-row');
                                    var rows = $("#participantListe").jqxDataTable('getRows');
                                    var row = rows[rowKey];

                                    var funcType = 'updatePres';
                                    var presenceId = row.id;
                                    var presence = event.target.title;

                                    $.ajax({
                                        type: 'POST',
                                        url: 'api/updatePresence.php',
                                        data: {
                                            funcType: funcType,
                                            presenceId: presenceId,
                                            presence: presence,
                                        }
                                    });
                                });
                                $("#membreListe").jqxInput({
                                    theme: theme,
                                    maxLength: 100,
                                });
                                $('#addMember').jqxButton({
                                    theme: 'energyblue',
                                    width: '80px',
                                    disabled: false
                                });
                                $('#saveButton').jqxButton({
                                    theme: 'energyblue',
                                    width: '80px',
                                    disabled: false
                                });
                                $('#cancelButton').jqxButton({
                                    theme: 'energyblue',
                                    width: '80px',
                                    disabled: false
                                });
                                $('#listMangement').on('close', function (event) {
                                    $('#listMangement').jqxWindow('destroy');
                                });
                            }
                        });
                    }
                })
            }
        });
    });

Code for window template

<div id="listMangement" >
    <div id="listMangementHeader">
        <span id="captureContainer" style="float: left">Liste de présence </span>
    </div>
    <div id="listContent">
        <div class="uk-panel uk-panel-box">
            <div id="participantListe" style="width: 100%">

            </div>
        </div>
        <div class="uk-panel uk-panel-box-primary" style="height: 50px">
            <div class="uk-align-left uk-margin-top" style="padding-left: 15px">
                <input style="font-size: 11px" type="text" value="" id="membreListe" />
                <input style="font-size: 11px" type="button" value="Ajouter" id="addMember" />
            </div>
            <div class="uk-align-right uk-margin-top" style="padding-right: 15px">
                <input style="font-size: 11px" type="button" value="Enregistrer" id="saveButton" />
                <input style="font-size: 11px" type="button" value="Fermer" id="cancelButton" />
            </div>
        </div>

    </div>
</div>

[HristoParticipant]

Hello safraga,

I would like to mention a few things that I saw.
You create the initialization of these widgets inside the “click” event.
It seems that this could be invoked many times which is not correct.
Because the initialization of the widgets should happen just once.
You could create the widgets outside of this and after that just update them with their methods and properties.
Also, you do this initialization in one AJAX call and after that another one which is asynchronously operations.
Why do you need to do this?
You create the jqxDataTable inside the “initContent” callback function of the jqxWindow which is the correct approach.
This also could cause many issues.
Please, try to clear this.

The “rendering” callback could be included here to clear unnecessary elements and create them inside the “rendered” callback as in this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-command-column.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts