Loading ...
Sorry, an error occurred while loading the content.

37074Yui 2.5.2 Datatable IE render only on mouse over

Expand Messages
  • vincenzo.amoruso
    Sep 2, 2008
    • 0 Attachment

      Hi to all,

      i'm trying to loading data in a YAHOO datatable using yui.

      2000 records are readed by JSON,

      after data are  loaded columns and row are visible but renderd in a wrong way.

      for example columns widths are not correct, but when i move mouse over datatable component

      all data are  rendered in right way!

      This is my code :

      <!--Script and CSS includes for YUI dependencies on this page-->
      <link rel="stylesheet" type="text/css" href="./ajax/YAHOO/build/fonts/fonts.css" />
      <link rel="stylesheet" type="text/css" href="./ajax/YAHOO/build/menu/assets/skins/sam/menu.css" />
      <link rel="stylesheet" type="text/css" href="./ajax/YAHOO/build/datatable/assets/skins/sam/datatable.css" />
      <link rel="stylesheet" type="text/css" href="./ajax/YAHOO/build/button/assets/skins/sam/button.css" />
      <link rel="stylesheet" type="text/css" href="./ajax/YAHOO/build/container/assets/skins/sam/container.css" />
      <link rel="stylesheet" type="text/css" href="./ajax/YAHOO/build/resize/assets/skins/sam/resize.css" />
      <link rel="stylesheet" type="text/css" href="./ajax/YAHOO/build/layout/assets/skins/sam/layout-skin.css" />
      <script type="text/javascript" src="./ajax/YAHOO/build/yahoo.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/container/container_core-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/menu/menu-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/yuiloader/yuiloader-beta-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/event/event-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/connection/connection-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/json/json-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/dom/dom-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/element/element-beta-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/utilities/utilities.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/datasource/datasource-beta-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/datatable/datatable-beta-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/button/button-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/container/container-min.js"></script>
      <!-- layout js- -->
      <script type="text/javascript" src="./ajax/YAHOO/build/dragdrop/dragdrop-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/resize/resize-beta-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/animation/animation-min.js"></script>
      <script type="text/javascript" src="./ajax/YAHOO/build/layout/layout-beta-min.js"></script>
      .............................

              this.formatUnescape= function(elCell, oRecord, oColumn, oData) {
            while (oData.indexOf("+")>0)
          {
              oData=oData.replace("+", " ")
          }
             elCell.innerHTML = unescape(oData);  
               }; 
        
        

        var UtentiColonneDefs = [
                  {key:"utente",label:"Username",formatter:this.formatUnescape,width:100,resizeable:true,sortable:true},
         {key:"password",label:"Password",formatter:YAHOO.widget.DataTable.formatNumber,width:50,resizeable:true,sortable:true},
              {key:"administrator",label:"Admin",formatter:"checkbox",width:10,resizeable:true,sortable:true},
         {key:"descrizione",label:"Descrizione",width:250,resizeable:true,sortable:true},
         {key:"email",label:"E-Mail",formatter:YAHOO.widget.DataTable.formatEmail,width:150,resizeable:true,sortable:true},
         {key:"entita",label:"Tabella",width:150,resizeable:true},
         {key:"entita_campo",label:"Campo Tabella",width:150,resizeable:true},
         {key:"condizione",label:"Condizione",width:150,resizeable:true},
         {key:"valore_condizione",label:"Valore",width:150,resizeable:true}
              ];
        
        
       
        this.UtentiDataSource = new YAHOO.util.DataSource("UtentiXQuery?");
              this.UtentiDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;  
        this.UtentiDataSource.connXhrMode = "queueRequests";          
         this.UtentiDataSource.responseSchema = {
         resultsList: "ResultSet.Result", 
                  fields: ["utente",
                   "password",
             "descrizione",
             "administrator",
             "email",
             "entita",
             "entita_campo",
             "condizione",
             "valore_condizione"
             ]
             };
        
        var UtentiDataTableConfigs = {initialRequest:"dummy=0",
                  sortedBy:{key:"utente",dir:"asc"},
            paginator: new YAHOO.widget.Paginator({  
                       containers  : 'pagUtenti',
           rowsPerPage: 25, 
           firstPageLinkLabel : "<img src='./images/top_sm.gif'>",
              previousPageLinkLabel : "<img src='./images/prev_sm.gif'>",  
                nextPageLinkLabel : "<img src='./images/next_sm.gif'>",
              lastPageLinkLabel : "<img src='./images/bottom_sm.gif'>",
           template: UtentiToolBar,
           updateOnChange : false,
                 pageLinks: 5  
                   }),
         caption:UtentiHeader, 
         selectionMode:"single",
         scrollable:true,
                  height:"15em",
         width:"75em"
              }
        
        this.UtentiDataTable = new YAHOO.widget.DataTable("utenti", UtentiColonneDefs, this.UtentiDataSource, UtentiDataTableConfigs); 
        this.UtentiDataTable.subscribe("rowMouseoverEvent", this.UtentiDataTable.onEventHighlightRow);  
              this.UtentiDataTable.subscribe("rowMouseoutEvent", this.UtentiDataTable.onEventUnhighlightRow);  
             
         
        
        callbackUtentiDataTable = {  
                 success : this.UtentiDataTable.onDataReturnReplaceRows,
                  failure : this.UtentiDataTable.onDataReturnReplaceRows,
                  scope : this.UtentiDataTable  
              };
        
        
        
          this.UtentiDataTable.subscribe("rowClickEvent", this.UtentiDataTable.onEventSelectRow);  
             
        UtentiDataSourceTemp=this.UtentiDataSource;
        
               // Programmatically select the first row  
              this.UtentiDataTable.selectRow(this.UtentiDataTable.getTrEl(0));  
        
        
         this.onContextMenuClick = function(p_sType, p_aArgs, p_DataTable) {  
                   var task = p_aArgs[1];  
                    if(task) {  
                       // Extract which TR element triggered the context menu  
                       var elRow = this.contextEventTarget;  
                       elRow = p_DataTable.getTrEl(elRow);  
                 if(elRow) {  
               switch(task.index) { 
                // Caricamento liste navigazione Top-Down
                               case 0:     //
                                  var record = p_DataTable.getRecord(elRow);
             p_DataTable.unselectAllRows();
             p_DataTable.selectRow(p_DataTable.getTrEl(elRow));
             if (p_DataTable.getId()=="yui-dt0") {
              }
                   
          
                           }  
                       }  
                   }  
               };  
        
        
         // Menu di contesto
        
         this.UtentiContextMenu = new YAHOO.widget.ContextMenu("UtentiContextMenu",  
                       {trigger:this.UtentiDataTable.getTbodyEl()});  
               this.UtentiContextMenu.addItem("Lista Funzioni");  
               this.UtentiContextMenu.addItem("...");  
               this.UtentiContextMenu.addItem("Zoom Cliente");  
               this.UtentiContextMenu.addItem("Nuova Funzione");  
               // Render the ContextMenu instance to the parent container of the DataTable  
               this.UtentiContextMenu.render("utenti");  
             
         this.UtentiContextMenu.clickEvent.subscribe(this.onContextMenuClick, this.UtentiDataTable);
        
       

      Thanks in advance

      Ragards

      Vincenzo

       

    • Show all 3 messages in this topic