jQuery UI Widgets Forums DataTable DatasTable with Radio Buttons and EndEditCell problems

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 2 weeks, 1 day ago.

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

  • safraga
    Participant

    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>
    

    Hristo
    Participant

    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

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

You must be logged in to reply to this topic.