jqGrid colonne editable

Version imprimable

Bonjour à tous,

Je tiens tout d'abord à préciser que j'ai passé pas mal du temps en cherchant une solution à mon problème avant de poster
Je suis débutant en jQuery, je trouve ce framework vraiment pratique.

Mon problème est le suivant :
Je souhaite créer une grid avec jqGrid afin de pouvoir charger des données dans cette grid a partir d'une base sql server et les modifier.
J'arrive a créer ma grid et a charger mes données par contre j'ai pas pu obtenir les colonnes modifiables (tous les colonnes sont en read only)

Voici mon code

Code:

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
<script type="text/javascript">
    $(function () {
        $("#list").jqGrid({
            url: '<%= Url.Action("JsonListeCotisation", "Index", new {}) %>', 

            datatype: 'json',
            mtype: 'GET',
            colNames: ['id', 'Num contrat', 'Raison sociale', 'Echéance', 'Montant', 'Mode réglement', 'Relance déclaration', 'Relance paiement', 'Mise en demeure'],
            colModel: [
                    { name: 'Id', index: 'id', width: 30, hidden: true },                    
                    { name: 'Numero', index: 'Numero', width: 120, align: 'left' },
                    { name: 'RaisonSociale', index: 'RaisonSociale', width: 200, align: 'left',  editable: true },
                    { name: 'DateEcheance', index: 'DateEcheance', width: 120, align: 'center' },
                    { name: 'Montant', index: 'Montant', width: 100, align: 'center' },
                    { name: 'ModeReglement', index: 'ModeReglement', width: 120, align: 'left' },              
                    { name: 'DateRelanceDeclaration', index: 'DateRelanceDeclaration', width: 120, align: 'left' },
                    { name: 'DateRelancePaiement', index: 'DateRelancePaiement', width: 120, align: 'left' },
                    { name: 'DateMiseEnDemeure', index: 'DateMiseEnDemeure', width: 120, align: 'left' }

                 ],
            pager: '#pager',
            rowNum: 10,
            rowList: [10, 20, 30],
            imgpath: '<%= Url.Content("~/Scripts/css/redmond/images") %>',
            multiselect: true,
            sortname: 'Id',
            sortorder: 'desc',
            viewrecords: true,
            caption: 'Liste des relances',
            //width: 500,
            height: 'auto'
        });
    });



    function findListRelance() {

        var typeRelance = document.getElementById('typeRelance').value;
        var IpId = null;
        jQuery("#list").setGridParam({ datatype: "json", url: '../Relance.aspx/JsonListeCotisation/?typeRelance=' + typeRelance });
        jQuery("#list").trigger('reloadGrid');
    }


    </script>

je veux que la colonne en rouge 'RaisonSociale' soit editale.

Je vous remercie d'avance.

Cordialement,
Bilel.

29/08/2011, 17h29
charlingals1

Si ton problème est toujours d'actualité, tu peux essayer d'insérer ce code dans le code génération de ta grid

Code:

onSelectRow: function(id){ if(id && id!==lastSel){ jQuery('#Magrid').restoreRow(lastSel); lastSel=id; } jQuery('#Magrid').editRow(id, true); },

N'oublis pas de déclarer lastSel et de modifier Magrid par le nom de ta grid

Bon courage

Citation:

Envoyé par charlingals1

Si ton problème est toujours d'actualité

Ou si tu génères ta grid en php, voici une liste d'option que j'ai récoltée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$grid->setGridOptions(array(
    "caption"=>"Titre",  
    //"rownumbers"=>true,                   // affiche numéros de ligne
	"rowNum"=>10,                         // Nombre de lignes par défaut
	"width"=>'auto',
	"height"=>'auto',
    "sortname"=>"id",                     // Classement par défaut
	"sortorder"=>"desc",					
    "hoverrows"=>true,                    // highlight la ligne survolée
	"altRows"=>false,                     // couleur differente 1 ligne/2
	//"multiselect"=>true,                  // affiche cases à cocher
	"ignoreCase"=>true,                   //ignores capitlization when sorting
	"scrollrows"=>true,                   // ?
    "rowList"=>array(5,10,20,50,100),
	"ignoreCase"=>true,                    //To make the local search and sorting not case sensitive 
 
	// "hiddengrid"=>true,                   // tableau replié
	// "cellEdit"=> true						// Edition directe dans le tableau
 
    ));

sans oublier les options de :

Code:

$grid->setNavOptions('navigator', array("pdf"=>true,"csv"=>true,"excel"=>false,"add"=>false, "edit"=>false, "del"=>false, "search"=>false,"cloneToTop"=>true));