Discussion :

[boobs60]

Bonjour à toutes et à tous.

J'ai un soucis avec des boutons radios dans un tableau JQGrid.

Je charge côté serveur toute les données dont j'ai besoin puis je construit mon JQGrid.
Je souhaite que tout les traitements soient fait côté client (tri, suppression, modification).
Une fois que j'ai réalisé toutes les modifications dont j'avais besoin,
je sauvegarde et je récupère le JQGrid côté serveur pour traitement et enregistrement en base.


J'ai dans mon JQGrid une colonne contenant un bouton radio :


Ces boutons radios doivent être exclusif, c'est-à-dire qu'un seul bouton ne peut être sélectionné.
Donc je leur donne le même "NAME" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type='radio' id='" +  EntityId + "' name='isReferent' class='switch-input' >

Mais, lors de la pagination, je rencontre un problème.
Lorsque je clique sur un bouton radio, qu'ensuite je pagine, puis que je reviens sur la page précédente,
les boutons radios on retrouvés leur état d'origine

Voici le code de mon JQGrid :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
$(function () {
            //affichage d'un message custom dans le grid quand il n'y a rien à afficher
            var emptyMsgDiv = $("<div style='text-align:center;padding:10px 0;'><span>0 records found</span></div>"); 
            var info = $(".ui-paging-info");
 
            $("#grid").jqGrid({
                url: "/User/GetEntityListForUser", //Chargement des données côté serveur
                datatype: 'json',
                mtype: 'GET',
                postData: {userId : Id}, //Paramètre envoyé au serveur pour chargement des données
                colNames: ["Id", "Nom", "EstRéférent", "Date d'activation", "Action"],
                colModel: [
                    { name: 'EntityId', index: 'EntityId', key: true, sorttype: 'int', width: '70', align: 'center', resizable: false },
                    { name: 'EntityName', index: "EntityName", align: 'center', resizable: false },
                    { name: 'IsReferent', index: "IsReferent", align: 'center', formatter: formatImage, resizable: false },
                    { name: 'ActivationDate', index: 'ActivationDate', formatter: 'date', formatoptions: { newformat: "d/m/Y h:i:s" }, align: 'center', resizable: false },
                    { name: 'Action', formatter: actions, align: 'center', resizable: false } //Colonne custom de suppression
                ],
                pager: '#pager',
                rowNum: 20,
                rowList: [10, 20, 30, 40, 50, 100],
                altRows: true,
                sortorder: 'asc',
                height: '100%',
                autowidth: true,
                viewrecords: true,
                gridview: true,
                regional: 'fr',
                caption: '',
                loadonce: true,
                multiselect: false,
                loadComplete: function () { //Fonction permettant d'afficher le message si rien à afficher
                    var ts = this;
                    if (ts.p.reccount === 0) {
                        $(this).hide();
                        emptyMsgDiv.show();
                    } else {
                        $(this).show();
                        emptyMsgDiv.hide();
                    }
                },
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    id: 'EntityId'
                }
            }).navGrid('#pager', { edit: false, add: false, del: false, search: false, refresh: true });
 
            emptyMsgDiv.insertAfter($("#grid").parent());
            info.insertAfter($("#grid").parent());
 
            $("#lui_grid").removeClass('ui-widget-overlay jqgrid-overlay');
        });
 
        function actions(cellvalue, options, rowObject) { //affichage d'une image dans ma colonne custom
            return "<img src='../../../../Content/custom/poubelle.gif' onclick='deleteAction(" +  rowObject.EntityId + ")' style='cursor: pointer;' />"
        }
 
        function deleteAction(rowId) { //Suppression de la ligne sélectionnée
            $("#grid").jqGrid('delRowData',rowId);
        }
 
        function formatImage(cellvalue, options, rowObject) { //bouton Radio Custom
            if (cellvalue == 0)
                return "<label class='switch'><input type='radio' id='" +  rowObject.EntityId + "' name='isReferent' class='switch-input' ><span class='switch-label' data-on='On' data-off='Off'></span><span class='switch-handle'></span></label>";
            else
                return "<label class='switch'><input type='radio' id='" +  rowObject.EntityId + "' name='isReferent' class='switch-input' checked='checked'><span class='switch-label' data-on='On' data-off='Off'></span><span class='switch-handle'></span></label>";
        }

Je débute avec ce plugin et ai fait de nombreuses recherches sur internet sans trouver mon bonheur

Donc si quelqu'un a une idée je l'en remercie d'avance

Bien amicalement Boobs60

[boobs60]

Re tout le monde.

Bon je n'ai pas réussi à résoudre mon problème.
Je l'ai donc contourné en affichant tout mes enregistrements sur une seul page avec une navigation scroll.

Voilà

Amicalement Boobs60