Dojo-DataGrid :: Comment faire pour récupérer dynamiquement les valeurs que les options d'une zone de sélection dans Dojo DataGrid

J'ai un Dojo-DataGrid qui est peuplée par programmation comme ci-dessous :

var jsonStore = new dojo.data.ItemFileWriteStore({ url: "json/gaskets.json" });
var layout= [
                { field: "description", width: "auto", name: "Tier/Description", editable:true },
                { field: "billingMethod", width: "auto", name: "Billing Method", editable: true,
                    type: dojox.grid.cells.Select, options: [ '0', '1' ]  },
                { field: "offeringComponents", width: "auto", name: "Offering Component", editable: true,
                    type: dojox.grid.cells.Select, options: [ '0', '1' ] },
                { field: "serviceActivity", width: "auto", name: "Service Activity", editable: true,
                    type: dojox.grid.cells.Select, options: [ '0', '1' ] },
                { field: "hours", width: "auto", name: "Hours" },
                { field: "rate", width: "auto", name: "Rate <br/> (EUR)" },
                { field: "cost", width: "auto", name: "Cost <br/> (EUR)" },
                { field: "price", width: "auto", name: "Price <br/> (EUR)" },
                { field: "gvn", width: "auto", name: "Gvn" }
            ];

            grid = new dojox.grid.DataGrid({
                query: { description: '*' },
                store: jsonStore,
                structure: layout,
                rowsPerPage: 20
            }, 'gridNode');

Les options pour le champ billingMethod (Actuellement défini comme dojox.de la grille.les cellules.Sélectionnez) sont codés en dur en ce moment, mais je voudrais obtenir ces valeurs de façon dynamique depuis le backend de JSON. Mais dojox.de la grille.les cellules.Sélectionnez actuellement(je suis en utilisant Dojo 1.5) n'est pas une option pour définir un "magasin".

Je suis en train d'utiliser bibliothèque dijit.forme.FilteringSelect, mais il faut un id d'une balise Div) pour son constructeur et je ne peut pas spécifier un comme cette boîte de sélection de la grille, plutôt que séparément, DIV.

Merci
Sandeep

InformationsquelleAutor Sandeep | 2011-07-18
  1. 2

    Votre réponse fonctionne très bien, le problème est que dans la liste déroulante, l'utilisateur peut sélectionner Un, mais une fois le combo de perdre le focus, la valeur 1 sera montré. Il y a quelques mois j'ai eu le même problème, et j'ai obtenu une solution de KGF sur #dojo. L'idée est d'avoir un formateur sur la cellule qui crée un élément SPAN, et ensuite, elle appelle une requête sur le magasin pour obtenir le label de l'élément sélectionné et le mettre sur la DURÉE. J'ai modifié votre exemple, à obtenir que le travail.

    dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Select");

dojo.require('dojox.grid.cells.dijit');
dojo.require('dijit.form.FilteringSelect');

var grid;
var jsonStore;

dojo.addOnLoad(function() {

    jsonStore = new dojo.data.ItemFileWriteStore({
        data: {
            "identifier": "identify",
            "label": "description",
            "items": [
                {
                "identify": 123,
                "description": "Project Manager"},
            {
                "identify": 234,
                "description": "Developer"},
            {
                "identify": 536,
                "description": "Developer",
                "billingMethod":2}
            ]
        }
    });

    var myStore = new dojo.data.ItemFileReadStore({
        data: {
            identifier: 'value',
            label: 'name',
            items: [{
                value: 1,
                name: 'A',
                label: 'A'},
            {
                value: 2,
                name: 'B',
                label: 'B'},
            {
                value: 3,
                name: 'C',
                label: 'C'}]
        }
    });

      //[kgf] callback referenced by formatter for FilteringSelect cell
      function displayValue(nodeId, store, attr, item) {
        if (item != null) { //if it's null, it wasn't found!
          dojo.byId(nodeId).innerHTML = store.getValue(item, attr);
        }
      }

    var layout = [
        {
        field: "identify",
        width: "auto",
        name: "Id 2 Hide",
        hidden: true},
    {
        field: "description",
        width: "auto",
        name: "Tier/Description",
        editable: true},
    {
        field: 'billingMethod',
        name: 'Billing Method',
        editable: true,
        required: true,
        width: '150px',
        type: dojox.grid.cells._Widget,
        widgetClass: dijit.form.FilteringSelect,
        widgetProps: {
            store: myStore
        },
        formatter: function(data, rowIndex) { //[kgf]
            //alert("data "+data)
                var genId = 'title' + rowIndex;
            var store = this.widgetProps.store;
            var attr = "label";

            setTimeout(function() {
                store.fetchItemByIdentity({
                    identity: data,
                    onItem: dojo.partial(displayValue, genId, store, attr)
                });
                }, 50);
            //for now return a span with a predetermined id for us to populate.
            return '<span id="' + genId + '"></span>';
        }    
    }
    ];

    grid = new dojox.grid.DataGrid({
        query: {
            description: '*'
        },
        store: jsonStore,
        singleClickEdit: true,
        structure: layout,
        rowsPerPage: 20
    }, 'gridNode');

    grid.startup();

});
    • Merci pour parfaire le code, mais j'ai remarqué que le formateur en fonction supprime l'élément qui a été définie comme valeur par défaut(en Venant de jsonStore) dans mon exemple et affiche un vide. Comment pouvons-nous résoudre ce problème? Veuillez consulter ci-dessous le code à jour avec ur formateur. ** mise à Jour de Code Sans défaut affiché ** j'ai donné une valeur par défaut "exemple" pour la colonne Méthode de Facturation, mais il est remplacé par le formateur, je suppose.
    • Eh bien, le problème ici est que "l'Échantillon" n'est pas dans les valeurs acceptées par le combo, et, par conséquent, le formateur ne parvient pas à le trouver sur le store et il ne peut pas le mettre sur la DURÉE. J'ai fait une modification, donc, si l'élément n'est pas trouvé, mais il y a une valeur, il montre la valeur. Vous pouvez le voir sur jsfiddle.net/zsvvt/4
    • Merci pour la réponse rapide. Fonctionne parfaitement. Petite question, lorsque je clique sur la valeur par défaut dans le 1er rang en vertu de la méthode de facturation de la colonne, la valeur affichée disparaît et présente à moi avec un filtrage de la sélection. Est-il de toute façon je peux conserver la valeur et de montrer jusqu'à ce que l'utilisateur sélectionne une nouvelle valeur dans la liste déroulante.
    • Je ne suis pas un expert du tout, mais je ne pense pas que c'est possible, car lorsque vous cliquez sur la Grille remplace le contenu de la cellule avec un combo, ce que vous voyez dans la cellule n'est pas une cellule vide, mais un vide combo(elle va être comblée lorsque vous sélectionnez une valeur). Je ne sais pas si un FilteringSelect a un EmptyValue ou quelque chose comme ça pour indiquer "Sélectionnez une méthode". Si oui, je dirais de travailler de cette façon.
    • J'ai eu à retoucher ce code pour qu'il fonctionne. Nécessaire à la compréhension du code.
    InformationsquelleAutor Jose L Martinez-Avial
  2. 0

    J'ai finalement été en mesure de comprendre cela..au Cas où quelqu'un veut mettre en œuvre même genre de choses à l'aide de DOJO Datagrid+FilteringSelect.

    Exemple De Code

    dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Select");

dojo.require('dojox.grid.cells.dijit');
dojo.require('dijit.form.FilteringSelect');

var grid;
var jsonStore;

dojo.addOnLoad(function() {

    jsonStore = new dojo.data.ItemFileWriteStore({
        data: {
            "identifier": "identify",
            "label": "description",
            "items": [
                {
                "identify": 123,
                "description": "Project Manager"},
            {
                "identify": 234,
                "description": "Developer"},
            {
                "identify": 536,
                "description": "Developer"}
            ]
        }
    });

    var myStore = new dojo.data.ItemFileReadStore({
        data: {
            identifier: 'value',
            label: 'name',
            items: [{
                value: 1,
                name: 'A',
                label: 'A'},
            {
                value: 2,
                name: 'B',
                label: 'Y'},
            {
                value: 3,
                name: 'C',
                label: 'C'}]
        }
    });


    var layout = [
        {
        field: "identify",
        width: "auto",
        name: "Id 2 Hide",
        hidden: true},
    {
        field: "description",
        width: "auto",
        name: "Tier/Description",
        editable: true},
    {
        field: 'billingMethod',
        name: 'Billing Method',
        editable: true,
        required: true,
        width: '150px',
        type: dojox.grid.cells._Widget,
        widgetClass: dijit.form.FilteringSelect,
        widgetProps: {
            store: myStore
        }}
    ];

    grid = new dojox.grid.DataGrid({
        query: {
            description: '*'
        },
        store: jsonStore,
        singleClickEdit: true,
        structure: layout,
        rowsPerPage: 20
    }, 'gridNode');

    grid.startup();

});
    InformationsquelleAutor Sandeep