CODEWITHSUNDEEP
javascriptjspdatagriddojo
Eduardo
Eduardo

Reputation: 15

Delete instance of DataGrid (Dojo) and table (DataGrid) show correctly

sorry about my english. I am programming a web application as a jsp / servlet application. This is a kind of statistics tool, where the user can make settings in a form and then charts and a table will be displayed. The charts (Dojo) and table are realized in single JS script. The table I created with Dojo DataGrid:

define([
    'dojo/_base/lang', 
    'dojox/grid/DataGrid', 
    'dojo/data/ItemFileWriteStore', 
    'dojo/dom', 
    'dojo/domReady!'
],
     function(lang, DataGrid, ItemFileWriteStore, dom){

        return {
            setTabelle: function(response) {    


                var data = {
                  identifier: "id",
                  items: []
                };


                var data_list = new Array(response.summeArray.length);
                var spalten = new Array(4 /*TODO*/);

                var trainer = response.trainer;
                var abfrage = response.abfrage;



                if((trainer == "sql-trainer") && (abfrage == 0 || abfrage == 1)) {
                    for(var i = 0; i < response.summeArray.length; i++){
                        data_list[i] = { col1: "normal", col2: response.summeArray[i].id, col3: response.summeArray[i].summe };
                    }
                }
                    else {
                    for(var i = 0; i < response.summeArray.length; i++){
                        data_list[i] = { col1: "normal", col2: response.summeArray[i].id, col3: response.summeArray[i].inhalt, col4: response.summeArray[i].summe };
                    }
                    }

                for(var i = 0; i < response.summeArray.length; i++){
                    data.items.push(lang.mixin({ id: i+1 }, data_list[i]));
                }

                var store = new ItemFileWriteStore({data: data});

                var inhalt;

                if((trainer == "sql-trainer") && (abfrage == 0 || abfrage == 1)) {
                    spalten = [[
                              {'name': 'Pos.', 'field': 'id', 'width': '70px'},
                              {'name': 'Schema', 'field': 'col2', 'width': '670px'},
                              {'name': 'Anzahl', 'field': 'col3', 'width': '100px'}
                            ]];
                }
                    else {

                    if(trainer == "alle") {
                        if(abfrage == 4) {
                            inhalt = 'Sprache';
                        }
                        else {
                            inhalt = 'Tool';
                        }
                    }
                    else if(trainer == "mct"){
                        if(abfrage == 0) {
                            inhalt = 'Hochschule';
                        }
                        else if(abfrage == 9 || abfrage == 10) {
                            inhalt = 'Kategorie';
                        }
                        else {
                            inhalt = 'Aufgabe';
                        }
                    }
                    else if(trainer == "sqlopt") {
                        if(abfrage == 4 || abfrage == 5) {
                            inhalt = 'Aufgabe';
                        }
                        else {
                            inhalt = 'Schema';
                        }
                    }
                    else {
                        if(abfrage == 0 || abfrage == 1) {
                            inhalt = 'Schema';
                        }
                        else {
                            inhalt = 'Aufgabe';
                        }
                    }

                    spalten = [[
                              {'name': 'Pos.', 'field': 'id', 'width': '70px'},
                              {'name': 'ID', 'field': 'col2', 'width': '100px'},
                              {'name': inhalt, 'field': 'col3', 'width': '570px'},
                              {'name': 'Anzahl', 'field': 'col4', 'width': '100px'}
                            ]];
                  }

                var grid = new DataGrid({
                    id: 'grid',
                    store: store,
                    structure: spalten,
                    autoWidth: true,
                   // autoHeight: true,
                    rowSelector: '20px'
                  });


                    grid.placeAt("statsTabelleDiagramm");

                    grid.startup();     

            }
        };
});

The problem is that the table will no longer be displayed in a second embodiment of the tool. The error is here:

var grid = new DataGrid({…. });

Probably because an instance of the DataGrid already exists. I have the same problem with the legend. I then fixed with:

                var legend = dijit.byId("legende");
            if (legend) {
               legend.destroyRecursive(true);
            }

            var legend = new dojox.charting.widget.Legend({ chart: kreisDiag1, horizontal: false }, "legende");

This does not work with the DataGrid. I know that you can dynamically change when DataGrid columns and rows, but I find it easy to create an appropriate instance to the user's data. How can I check if an instance of the DataGrid already exists and delete this?

My second problem is with the display of the table. In the tool, the user can select by clicking on the buttons, which chart or table to appear. I have solved this with a JS function:

function diagAuswaehlen(ausgewaehltesDiag) {

document.getElementById("statsKurvenDiagramm").style.visibility = 'hidden';
document.getElementById("statsKreisDiagramm").style.visibility = 'hidden';
document.getElementById("statsStabDiagramm").style.visibility = 'hidden';
document.getElementById("statsTabelleDiagramm").style.visibility = 'hidden';


switch(ausgewaehltesDiag){
    case 0: 
        document.getElementById("statsKurvenDiagramm").style.visibility = 'visible';    
        break;
    case 1: 
        document.getElementById("statsKreisDiagramm").style.visibility = 'visible'; 
        break;              
    case 2: 
        document.getElementById("statsStabDiagramm").style.visibility = 'visible';
        break;
    case 3: 
        document.getElementById("statsTabelleDiagramm").style.display='visible';
        break;
}

}

First, the table shows, and then the user can select a diagram. Here's the problem, when I select a chart, it is displayed, but when I want to go back to the table, the table is no longer displayed. Why? In the JSP file I have done so:

require(["dojo/dom", 
                 "dojo/on", 
                 "dojo/request", 
                 "dojo/dom-form",
                 "statsDiagramme/kurvenDiagramm",
                 "statsDiagramme/kreisDiagramm",
                 "statsDiagramme/stabDiagramm",
                 "statsDiagramme/tabelle",
                 "dojo/json", 
                 "dojox/json/query", 
                 "dijit/Dialog", 
                 "dijit/form/Button",
                 "dojo/domReady!"],

            function(dom, on, request, domForm, kurvendiagramm, kreisdiagramm, stabdiagramm, tabelle, json){

                var form = dom.byId('sqlOptForm');       // Legt fest, welches Formular behandelt wird.

                on(form, "submit", function(evt){       // Funktion on() behandelt das Ereignis nach Submit des Formulars

                    evt.stopPropagation();      // verhindert die Ausbreitung der Ereignis im DOM-Dokument                  
                    evt.preventDefault();       // blockiert die Aktionen der Ereignis, damit Daten an Servlet gesendet werden 

                    request.post("ServletStatsSQLOPT", {        // Daten werden ueber HTTP-Post an das Servlet gesendet

                        data: domForm.toObject("sqlOptForm"),   // Daten vom Formular
                        handleAs: "json"

                    }).then(function(response){

                        var fehler = dojox.json.query("fehlermeldung", response);

                        if(fehler == ""){
                            if(response.datenArray.length == 0){
                                var dialog13a = new dijit.Dialog({
                                    title: "Fehler",
                                    style: "width:500px;",
                                    content: "F&uuml;r diese Abfrage liegen keine Daten vor.<p /><div class=\"buttonSchliessen\"><button data-dojo-type=\"dijit/form/Button\" type=\"submit\">Schlie&szlig;en</button></div>"
                                });
                                dialog13a.show();
                            }
                            else {
                                // Aktueller Inhalt der Divs entfernen
                                dojo.html._emptyNode("statsKreisDiagramm");
                                dojo.html._emptyNode("statsKurvenDiagramm");
                                dojo.html._emptyNode("statsStabDiagramm");
                                dojo.html._emptyNode("statsTabelleDiagramm");
                                dojo.html._emptyNode("legende");
                                //dojo.html._emptyNode("statsMenuButton");

                                // Statistik-Daten (response) an Module weiterleiten, um die Diagramme zu erstellen.
                                stabdiagramm.setStabDiagramm(response); 
                                kreisdiagramm.setKreisDiagramm(response);
                                kurvendiagramm.setKurvenDiagramm(response);
                                tabelle.setTabelle(response);

                                dom.byId("statsKreisDiagramm").style.visibility = 'hidden';
                                dom.byId("statsKurvenDiagramm").style.visibility = 'hidden';
                                dom.byId("statsStabDiagramm").style.visibility = 'hidden';
                                dom.byId("statsTabelleDiagramm").style.visibility = 'visible';
                                dom.byId("statsMenuButton").style.visibility = 'visible';
                                dom.byId("legendeTitel").style.visibility = 'visible';
                            }
                        }
                        else {

                            // Fehlermeldung ausgegeben                                                     
                            var dialog13 = new dijit.Dialog({
                                title: "Fehler",
                                style: "width:500px;",
                                content: fehler + "<p /><div class=\"buttonSchliessen\"><button data-dojo-type=\"dijit/form/Button\" type=\"submit\">Schlie&szlig;en</button></div>"
                            });
                            dialog13.show(); //
                        }

                    }, function(error) {    
                        // Dialogfenster erstellen und Fehlermeldung ausgegeben                                                     
                        var dialog14 = new dijit.Dialog({
                            title: "Fehler",
                            style: "width:500px;",
                            content: error + "<p /><div class=\"buttonSchliessen\"><button data-dojo-type=\"dijit/form/Button\" type=\"submit\">Schlie&szlig;en</button></div>" 
                        });
                        dialog14.show();
                    });
                });
            }
        );

I hope that everything is clear and someone can help me. I thank you in advance. Eduardo

Upvotes: 0

Views: 1108

Answers (1)

MiBrock
MiBrock

Reputation: 1100

When i understand you correctly you became an error when you load the grid a second time, right?

I had to face nearly the same Problem short time ago. My Problem was the widget itself, it was already registered and blocked the loading of the grid.

When you want to call the same grid a second time you only need to reload the store, that's what helps me.

Have a look:

//Checks if the widget is already registered
if(!registry.byId("GraphGrid")){ 
        grid = new EnhancedGrid({
                    id: 'GraphGrid',
                    store: GraphicStore,
                    query: { ident: "*" },
                    structure: layout,
                    rowSelector: '20px',
                    keepSelection: false,
                    plugins: {
                        indirectSelection: {
                        headerSelector:false, 
                        width:"40px", 
                        styles:"text-align: center;"
                        }}                          
                    },"GridGraphicInMap");

                /*Call startup() to render the grid*/
                grid.startup();
                //Festlegen was beim Click auf eine Reihe passieren soll
                grid.on("rowClick", function(evt){
                    var idx = evt.rowIndex,
                        item = this.getItem(idx);
                    //  get a value out of the item
                    var value = this.store.getValue(item, "geom");
                    highlightGeometry(value,true);
                });
                //Wenn die Checkbox selektiert wurde, wird der entsprechende Grideintrag
                //gelöscht
                dojo.connect(grid.selection, 'onSelected', getSelectedItems);

                }
                else {
                    //If the grid allready exists, just refresh the store

                    setTimeout(function(){
                    grid.setStore(GraphicStore);
                    grid.rowSelectCell.toggleAllSelection(false);
                    }, 500);
                }

Regards, Miriam

Upvotes: 2

Related Questions