Lost filters

[tf-julienParticipant]

Hi,

When i use the grid widget with custom filter,
work fine with one filter but not combine filters.
The problem is when i select a filter, the filter work but i think it’s not keep on filter selection.

I follow my code :

$(document).ready(function() {
            localizationobj.filterselectstring = 'Filtrer';
            localizationobj.filterchoosestring = 'Choix';
            bootbox.setDefaults({locale: "fr"});

                                    
            var url = "/app_dev.php/rh/reel/action/303/session/list/ajax";
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id', type: 'number' },
                    { name: 'sessionNumber', type: 'string' },
                    { name: 'sessionDates', type: 'string' },
                    { name: 'numberPers', type: 'int' },
                    { name: 'dispo', type: 'int' },
                    { name: 'place', type: 'string' },
                    { name: 'status', type: 'string' },
                    { name: 'sessionActions', type: 'string' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: "100%",
                autorowheight: true,
                autoheight: true,
                source: dataAdapter,
                sortable: true,
                pageable: true,
                altrows: true,
                enabletooltips: false,
                selectionmode: 'checkbox',
                localization: localizationobj,
                columns: [
                  { text: 'N° Session', datafield: 'sessionNumber', width: "18%" },
                  { text: 'Dates', datafield: 'sessionDates', cellsalign: 'center', align: 'center', width: "18%" },
                  { text: 'Stagiaires', datafield: 'numberPers', cellsalign: 'center', align: 'center', width: "8%" },
                  { text: 'Dispo', datafield: 'dispo', cellsalign: 'center', align: 'center', width: "8%" },
                  { text: 'Lieu', datafield: 'place', cellsalign: 'center', align: 'center', width: "18%" },
                  { text: 'Statut', datafield: 'status', cellsalign: 'center', align: 'center', width: "14%" },
                  { text: '', datafield: 'sessionActions', cellsalign: 'center', align: 'center', width: "14%" }
                ],
            });
            $('#jqxgrid').jqxGrid({ showemptyrow: false});
            $("#jqxgrid").on("bindingcomplete", function (event) {
                var localizationobj = {};
                localizationobj.pagergotopagestring = "Aller à la page :";
                localizationobj.pagershowrowsstring = "Nombre de lignes :";
                localizationobj.pagerrangestring = " sur ";
                                $("#jqxgrid").jqxGrid('localizestrings', localizationobj);
            });
            
            
            $('#new-session').on('click', function(e) {
                e.preventDefault();
                var link = $(this);
                
                $.ajax({
                    url: link.attr('href'), 
                    type: 'GET',
                    success: function(data) {
                        $('#form-div').html(data);
                        
                        submitForm();
                    },
                    error: function() {
                        $('#form-div').html("<div class='alert alert-danger'>Une erreur est survenue</div>");
                    }
                });
            });
            
                        
            $('#jqxgrid').on('click', '.edit-btn', function(e) {
                e.preventDefault();
                var $this = $(this);

                $.ajax({
                    url: $this.attr('href'), 
                    type: 'GET',
                    success: function(data) {
                        $('#form-div').html(data);
                        $('html,body').animate({scrollTop: $("#form-div").offset().top});

                        submitForm();
                        salariesTable();
                    },
                    error: function() {
                        $('#form-div').html("<div class='alert alert-danger'>Une erreur est survenue</div>");
                    }
                });
            });
            
            function submitForm() {
                $('#formatio_reelbundle_sessionreel_submit, #formatio_reelbundle_sessionreel_saveAndSynchronise').on('click', function(e) {
                    e.preventDefault();
                    var form = $(this).parents('form').first();
                    var data = form.serializeArray();
                    if($(this).attr('id') == 'formatio_reelbundle_sessionreel_saveAndSynchronise') {
                        data.push( {'name':$(this).attr('name')});
                        
                        if($(this).data('warning') == 1) {
                            bootbox.confirm("Des jours de formation existent déjà. Souhaitez-vous réellement les remplacer ?", function(result) {
                                if(result === true) {
                                    ajaxForm(form, data);
                                }
                            });
                        }
                        else
                            ajaxForm(form, data);
                    }
                    else
                        ajaxForm(form, data);
                });
            
                $('#formatio_reelbundle_sessionreel_formateurs').select2();
                $('#formatio_reelbundle_sessionreel_place').select2({
                    placeholder: "Rechercher un lieu",
                    minimumInputLength: 1,
                    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
                        url: "/app_dev.php/rh/reel/place/search/ajax",
                        dataType: 'json',
                        data: function (term, page) {
                            return {
                                q: term, // search term
                                page_limit: 10,
                            };
                        },
                        results: function (data, page) { // parse the results into the format expected by Select2.
                            // since we are using custom formatting functions we do not need to alter remote JSON data
                            return {results: data};
                        }
                    },
                    initSelection: function(element, callback) {
                        if(element.val()) {
                            var place = {id: element.val(), name: element.data('name')};
                            callback(place);
                        }
                    },
                    createSearchChoice: function(term) { return {id: term, name: term} },
                    formatResult: placeFormat,
                    formatSelection: placeFormat,
                    formatNoMatches: function (term) { return "Aucun résultat trouvé pour \"" + term + "\""; },
                    formatSearching: function () { return "Recherche en cours"; },
                    formatInputTooShort: function (term, minLength) { return "Veuillez entrer au moins " + minLength + " caractère"; },
                    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
                    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
                });
            
                $('#formatio_reelbundle_sessionreel_room').select2({
                    placeholder: "Rechercher une salle",
                    minimumInputLength: 1,
                    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
                        url: "/app_dev.php/rh/reel/room/search/ajax",
                        dataType: 'json',
                        data: function (term, page) {
                            return {
                                q: term, // search term
                                page_limit: 10,
                                place: $('#formatio_reelbundle_sessionreel_place').val()
                            };
                        },
                        results: function (data, page) { // parse the results into the format expected by Select2.
                            // since we are using custom formatting functions we do not need to alter remote JSON data
                            return {results: data};
                        }
                    },
                    initSelection: function(element, callback) {
                        if(element.val()) {
                            var place = {id: element.val(), name: element.data('name')};
                            callback(place);
                        }
                    },
                    formatResult: roomFormat,
                    formatSelection: roomFormat,
                    formatNoMatches: function (term) { return "Aucun résultat trouvé pour \"" + term + "\""; },
                    formatSearching: function () { return "Recherche en cours"; },
                    formatInputTooShort: function (term, minLength) { return "Veuillez entrer au moins " + minLength + " caractère"; },
                    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
                    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
                });
                
                                
                $('#formatio_reelbundle_sessionreel_hotel').select2({
                    placeholder: "Rechercher un hotel",
                    minimumInputLength: 1,
                    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
                        url: "/app_dev.php/rh/reel/place/search/ajax/hotel",
                        dataType: 'json',
                        data: function (term, page) {
                            return {
                                q: term, // search term
                                page_limit: 10,
                            };
                        },
                        results: function (data, page) { // parse the results into the format expected by Select2.
                            // since we are using custom formatting functions we do not need to alter remote JSON data
                            return {results: data};
                        }
                    },
                    initSelection: function(element, callback) {
                        if(element.val()) {
                            var place = {id: element.val(), name: element.data('name')};
                            callback(place);
                        }
                    },
                    formatResult: placeFormat,
                    formatSelection: placeFormat,
                    formatNoMatches: function (term) { return "Aucun résultat trouvé pour \"" + term + "\""; },
                    formatSearching: function () { return "Recherche en cours"; },
                    formatInputTooShort: function (term, minLength) { return "Veuillez entrer au moins " + minLength + " caractère"; },
                    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
                    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
                });
            }
            
            function placeFormat(place) {
                var string = place.name;
                if(place.city || place.zip)
                    string += ", " + place.zip + " " + place.city;
                
                return  string;
            }
            
            function roomFormat(room) {
                var string = room.name;
                
                return  string;
            }
            
            function ajaxForm(form, data) {
                $.ajax({
                    url: form.attr('action'),
                    type: form.attr('method'),
                    data: data,
                    success: function(data) {
                        if(data == "success") {
                            allowPrompt = false;
                            location.reload();
                        }
                        else {
                            $('#form-div').html(data);
                            submitForm();
                        }
                    }
                });
            }
            
            function salariesTable() {
                var axeFilterItems = [ "CDP\x20BATIMENT", "CDP\x20BOIS", "CDP\x20INSTALLATEURS", "CDP\x20MAINTENANCE", "CDP\x20METAL", "CDP\x20MULTI\x20ACTIVITES", "CDP\x20PL", "CDP\x20VL", "CDP\x20WF\x20EXTERNE", "CDP\x20WF\x20INTERNE", "EXTERNE", "INTERNE", "LDV\x20ADMIN", "LDV\x20BAT\x20CHANTIER", "LDV\x20BATIMENT", "LDV\x20BOIS", "LDV\x20INSTALLATEURS", "LDV\x20INSTALLATEURS\x20EFFICACE", "LDV\x20MAINTENANCE", "LDV\x20MAINTENANCE\x20HDS", "LDV\x20MAINTENANCE\x20METAL", "LDV\x20MAINTENANCE\x20USINE", "LDV\x20MECABOAT", "LDV\x20METAL", "LDV\x20METAL\x20MAINTENANCE", "LDV\x20METAL\x20MECABOAT", "LDV\x20MULTI\x20ACTIVITES", "LDV\x20PL", "LDV\x20PL\x20AGRI", "LDV\x20PL\x20BE", "LDV\x20PL\x20CARGO", "LDV\x20PL\x20TP", "LDV\x20VL", "LDV\x20VL\x20AUTO", "LDV\x20VL\x20BE", "LDV\x20VL\x20SPECIALISTES", "LDV\x20WEASY", "LDV\x20WF\x20EXTERNE", "LDV\x20WF\x20INTERNE", "LDV\x20WOW", "LDV\x20WURTH\x20EQUIP\x20SUPRA", "LDV\x20WURTH\x20ORSY\x20MOBIL\x20SUPRA", "ZONE\x200", "ZONE\x201", "ZONE\x202", "ZONE\x203", "ZONE\x205" ];
                var action_id = 303;
                var url = Routing.generate('reel_session_salaries_ajax_list', {action_id: action_id, id: $("#jqxgrid-salaries").attr('data-id')});
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id', type: 'number' },
                        { name: 'name', type: 'string' },
                        { name: 'surname', type: 'string' },
                        { name: 'entite', type: 'string' },
                        { name: 'superieur', type: 'string' },
                        { name: 'service', type: 'string' },
                        { name: 'axe', type: 'string' },
                        { name: 'convocation', type: 'boolean' },
                        { name: 'absence', type: 'boolean' },
                                                { name: 'salarieActions', type: 'string' }
                    ],
                    id: 'id',
                    url: url,
                    type: 'POST',
                    filter: function () {
                        // update the grid and send a request to the server.
                        $("#jqxgrid-salaries").jqxGrid('updatebounddata');
                    },
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                var tooltiprenderer = function (element) {
                    $(element).parent().jqxTooltip({ position: 'mouse', content: $(element).text() });
                };
                // initialize jqxGrid
                $("#jqxgrid-salaries").jqxGrid(
                {
                    width: "100%",
                    autorowheight: true,
                    autoheight: true,
                    source: dataAdapter,
                    sortable: true,
                    filterable: true,
                    showfilterrow: true,
                    rendergridrows: function() {
                        return dataAdapter.records;
                    },
                    virtualmode: true,
                    altrows: true,
                    enabletooltips: false,
                    selectionmode: 'checkbox',
                    localization: localizationobj,
                    columns: [
                        { text: 'Nom', datafield: 'name', width: 100, filterable: false },
                        { text: 'Prénom', datafield: 'surname', cellsalign: 'center', align: 'center', width: 120, filterable: false },
                        { text: 'Entité', datafield: 'entite', cellsalign: 'center', align: 'center', width: 100, filterable: false },
                        { text: 'N+1', datafield: 'superieur', cellsalign: 'center', align: 'center', width: 120, filterable: false },
                        { text: 'Service', datafield: 'service', cellsalign: 'center', align: 'center', width: 100, filterable: false },
                        { text: 'Axes', datafield: 'axe', cellsalign: 'center', align: 'center', filtertype: 'checkedlist', filteritems: axeFilterItems },
                        { text: 'Convocation', datafield: 'convocation', rendered: tooltiprenderer, cellsalign: 'center', align: 'center', width: 50, cellsrenderer: booleanrenderer, filterable: false },
                        { text: 'Absence', datafield: 'absence', rendered: tooltiprenderer, cellsalign: 'center', align: 'center', width: 50, cellsrenderer: booleanrenderer, filterable: false },
                                                { text: '', datafield: 'salarieActions', cellsalign: 'center', align: 'center', width: 150, filterable: false }
                    ],
                });
                $('#jqxgrid-salaries').jqxGrid({ showemptyrow: false});
                $("#jqxgrid-salaries").on("bindingcomplete", function (event) {
                    var localizationobj = {};
                    localizationobj.pagergotopagestring = "Aller à la page :";
                    localizationobj.pagershowrowsstring = "Nombre de lignes :";
                    localizationobj.pagerrangestring = " sur ";
                                        $("#jqxgrid-salaries").jqxGrid('localizestrings', localizationobj);
                });
                
                // Dialog click
                $("#jqxgrid-salaries").on('click', '.delete_link', function(e) {
                    e.preventDefault();
                    deleteLink = $(this).attr("href"); // Storing delete href
                    $('#dialog_delete').dialog('open'); // open dialog modal
                    return false;
                });

                // Dialog click
                $("#jqxgrid-salaries").on('click', '.absence_link', function(e) {
                    e.preventDefault();
                    var absenceLink = $(this).attr("href"); // Storing delete href

                                        bootbox.prompt({
                        autoOpen : false,
                        width : 600,
                        resizable : false,
                        modal : true,
                        title : "<div class='widget-header'><h4>"+Translator.trans("Voulez-vous définir le salarié comme absent ?")+"</h4></div>",
                        inputType: 'checkbox',
                        inputOptions: [
                            {
                                text: Translator.trans("Supprimer le salarié des sessions suivantes"),
                                value: 'deleteFromNextSessions',
                            },
                            {
                                text: Translator.trans("Reprogrammer le salarié sur la prochaine session disponible"),
                                value: 'reassigneOnNextSession',
                            },
                        ],
                        callback: function (result) {
                            if(result) {
                                var form = '<form action="'+absenceLink+'" method="POST">';
                                for(var i=0; i < result.length; i++) {
                                    form += '<input type="hidden" name="'+result[i]+'" value="1">'
                                }
                                form += '</form>'
                                $(form).appendTo('#absenceDiv').submit();
                            }
                        },
                        buttons: {
                            cancel: {
                                label: "<i class='fa fa-times'></i>&nbsp; "+Translator.trans('views.recordactions.cancel', {}, 'LbddCrudBundle')
                            },
                            confirm: {
                                label: '<i class="fa fa-check"></i>&nbsp; '+Translator.trans("Confirmer l'absence")
                            }
                        },
                    });
                    
                    return false;
                });

                // Dialog click
                $("#jqxgrid-salaries").on('click', '.absence_comment_link', function(e) {
                    e.preventDefault();
                    var absenceCommentLink = $(this).attr("href"); // Storing delete href
                    
                    $.get(absenceCommentLink, function(data) {
                        $("#modals").html(data);

                        // Displaying the modal
                        $('#modals #absence-comment-modal').modal('show');
                    });

                    return false;
                });
                
                $('#delete-multiple-salaries').on('click', function(e) {
                    e.preventDefault();
                    var selectedIndexes = $('#jqxgrid-salaries').jqxGrid('getselectedrowindexes');
                    var selectedIds = [];
                    
                    if(selectedIndexes.length <= 0) {
                        $.SmartMessageBox({
                            title : "Aucun salarié sélectionné",
                            content : "Veuillez sélectionner au moins un salarié",
                            buttons : '[Ok]'
                        });
                    }
                    else {
                        for(var i = 0; i < selectedIndexes.length; i++) {
                            var selectedRowData = $('#jqxgrid-salaries').jqxGrid('getrowdata', selectedIndexes[i]);
                            if(selectedRowData.id != "")
                                selectedIds.push(selectedRowData.id);
                        }
                        
                        bootbox.confirm({
                            message: "Voulez-vous supprimer ces salariés ?",
                            buttons: {
                                confirm: {
                                    label: 'Oui',
                                    className: 'btn-success'
                                },
                                cancel: {
                                    label: 'Annuler',
                                    className: 'btn-danger'
                                }
                            },
                            callback: function (result) {
                                if(result === true) {

                                    $.ajax({
                                        url: "/app_dev.php/rh/reel/action/303/salarie/delete-multiple",
                                        type: 'POST',
                                        data: {shsIds: selectedIds},
                                        success: function(data) {
                                            allowPrompt = false;
                                            location.reload();
                                        },
                                        error: function() {
                                            $('#form-div').html("<div class='alert alert-danger'>Une erreur est survenue</div>");
                                        }
                                    });
                                }
                            }
                        });
                    }
                });
                
                $('#send-convocations').on('click', function(e) {
                    e.preventDefault();
                    var selectedIndexes = $('#jqxgrid-salaries').jqxGrid('getselectedrowindexes');
                    var selectedIds = [];
                    
                    if(selectedIndexes.length <= 0) {
                        $.SmartMessageBox({
                            title : "Aucun salarié sélectionné",
                            content : "Veuillez sélectionner au moins un salarié",
                            buttons : '[Ok]'
                        });
                    }
                    else {
                        for(var i = 0; i < selectedIndexes.length; i++) {
                            var selectedRowData = $('#jqxgrid-salaries').jqxGrid('getrowdata', selectedIndexes[i]);
                            if(selectedRowData.id != "")
                                selectedIds.push(selectedRowData.id);
                        }
        
                                                    bootbox.prompt({
                                autoOpen : false,
                                width : 600,
                                resizable : false,
                                modal : true,
                                title : "<div class='widget-header'><h4>"+Translator.trans("Envoyer des convocations")+"</h4></div>",
                                inputType: 'checkbox',
                                    inputOptions: [
                                        {
                                            text: Translator.trans("Afficher l'ensemble des dates du parcours"),
                                            value: 'displayAllParcoursDates',
                                        },
                                ],
                                callback: function (result) {
                                    if(result) {
                                        $('#convocationForm input[name="salariesIds"]').val(selectedIds);
                                        $('#convocationForm input[name="options"]').val(result);
                                        $('form#convocationForm').submit();
                                    }
                                },
                                buttons: {
                                    cancel: {
                                        label: "<i class='fa fa-times'></i>&nbsp; "+Translator.trans('views.recordactions.cancel', {}, 'LbddCrudBundle')
                                    },
                                    confirm: {
                                        label: '<i class="fa fa-check"></i>&nbsp; '+Translator.trans("OK")
                                    }
                                },
                            });
                                            }
                });
                
                $('#reassign-salaries').on('click', function(e) {
                    e.preventDefault();
                    var selectedIndexes = $('#jqxgrid-salaries').jqxGrid('getselectedrowindexes');
                    var selectedIds = [];
                    
                    if(selectedIndexes.length <= 0) {
                        $.SmartMessageBox({
                            title : "Aucun salarié sélectionné",
                            content : "Veuillez sélectionner au moins un salarié",
                            buttons : '[Ok]'
                        });
                    }
                    else {
                        for(var i = 0; i < selectedIndexes.length; i++) {
                            var selectedRowData = $('#jqxgrid-salaries').jqxGrid('getrowdata', selectedIndexes[i]);
                            if(selectedRowData.id != "")
                                selectedIds.push(selectedRowData.id);
                        }
                        
                        var session_id = $(this).data('session');
                        $.ajax({
                            url: Routing.generate('reel_session_reassign_salaries', {action_id: 303, id: session_id}),
                            type: 'POST',
                            data: {shsIds: selectedIds},
                            success: function(data) {
                                $('#modals').html(data);
                                $('#modals #reassign-modal').modal('show');
                            },
                            error: function() {
                                $('#form-div').html("<div class='alert alert-danger'>Une erreur est survenue</div>");
                            }
                        });
                    }
                });
            }
            
                        $('#split-session').on('click', function(e) {
                e.preventDefault();
                var selectedIndexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
                var selectedIds = "";
                
                if(selectedIndexes.length == 0) {
                    $.SmartMessageBox({
                        title : "Aucune session sélectionnée",
                        content : "Veuillez sélectionner au moins une session",
                        buttons : '[Ok]'
                    });
                }
                else if(selectedIndexes.length > 0) {
                    for(var i = 0; i < selectedIndexes.length; i++) {
                        var selectedRowData = $('#jqxgrid').jqxGrid('getrowdata', selectedIndexes[i]);
                        if(selectedRowData.id != "")
                            selectedIds += selectedRowData.id+";";
                    }
                    
                    $('#split-modal form[name="formatio_reelbundle_split_action"] input[name="sessions-ids"]').val(selectedIds);
                    $('#split-modal').modal('show');
                }
            });
        });
        
        $('#change-status ul li a').on('click', function() {
            var selectedIndexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
            var selectedIds = "";
            var status = $(this).data('status-key');
            
            if(selectedIndexes.length == 0) {
                    $.SmartMessageBox({
                        title : "Aucune session sélectionnée",
                        content : "Veuillez sélectionner au moins une session",
                        buttons : '[Ok]'
                    });
            }
            else if(selectedIndexes.length > 0) {
                for(var i = 0; i < selectedIndexes.length; i++) {
                    var selectedRowData = $('#jqxgrid').jqxGrid('getrowdata', selectedIndexes[i]);
                    if(selectedRowData.id != "")
                        selectedIds += selectedRowData.id+";";
                }

                bootbox.confirm({
                    message: "Voulez-vous changer le statut des sessions sélectionnées ?",
                    buttons: {
                        confirm: {
                            label: 'Oui',
                            className: 'btn-success'
                        },
                        cancel: {
                            label: 'Annuler',
                            className: 'btn-danger'
                        }
                    },
                    callback: function (result) {
                        if(result === true) {
                            $.ajax({
                                url: "/app_dev.php/rh/reel/action/303/session/status/change",
                                type: 'POST',
                                data: {sessions: selectedIds, status: status},
                                success: function(data) {
                                    allowPrompt = false;
                                    location.reload();
                                },
                                error: function() {
                                    $('#form-div').html("<div class='alert alert-danger'>Une erreur est survenue</div>");
                                }
                            });
                        }
                    }
                });
            }
        });

Thank for your futur helping

[StanislavParticipant]

Hello tf-julien,

Can you please send us a more clear example, please?
Try making it as basic as you possibly can, enough to showcase the issue.

Best Regards,
Stanislav

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

[Author]

Posts