3.2.0
Forum Demo Guide API Store

Rollover on grid row make images in cell move 2-3 pixel to left

Hello
I'm using Tabs. For each tab, i have a Div that I display or hide. In each div there is a Grid. In 2 columns I have an image diplayed using 
grid.setCellTemplate(new AW.Templates.Image, colNum)
and then 
grid.setCellImage("myImage", colNum, rowNum);

I also use 
grid.getRowTemplate().setClass("text", "wrap");

to have text wrap in grid.

The problem is that 'wrap' style make a strange behavour when I rollover the row. The images in the grid move 2-3 pixel to the left. If I click on the selected tab, the images move back to the right.
I noticed that if I remove text wrap, this bug disappears.

I'm using version 2.0.2 Standard Developer

Thanks for your help. AciveWidget is really a nice tool.
Rod
April 24,
Sorry, cannot reproduce this - could you post an example?
Alex (ActiveWidgets)
April 26,
Hi Alex

Here is the code that reproduce the bug. In fact there are 2 bug.
1. The one described before
2. On column resizing I got an infinite horizontal scroll bar
Note that these 2 bugs appear only on IE, not on FireFox

To run the code you need to put 2 small images 16x16px named image_1.gif and image_2.gif. Thes 2 images should appear in the 2 first columns in the grid

Thanks to look at it 

<html>
    <head>
        
        <script src="./runtime/lib/aw.js"></script>
        <link href="./runtime/styles/xp/aw.css" rel="stylesheet"></link>

    <script>
    
    AW.UI.TabsEnhanced = AW.UI.Tabs.subclass();
    AW.UI.TabsEnhanced.create = function()
    {
      var obj = this.prototype;
    
      obj.isEnabled = function(col)
      {
        if  (typeof this.getItemTemplate(col).getAttribute('isEnabled') == 'undefined')
          return true
        else
          return (this.getItemTemplate(col).getAttribute('isEnabled'))
      }
      obj.setTabEnabled = function(tabIndex, enabled)
      {
        if (enabled == true)
        {
          this.getItemTemplate(tabIndex).setAttribute('isEnabled', true);
          this.getItemTemplate(tabIndex).setClass("extension", "tabs-enabled")
        }
        else
        {
          this.getItemTemplate(tabIndex).setAttribute('isEnabled', false);
          this.getItemTemplate(tabIndex).setClass("extension", "tabs-disabled")
        }
      }
      obj.onItemClicked = function(event, index)
      {
        if (this.isEnabled(index) == false)
          return true;
      }
    }
    
    var tabs;
    var tabContentDiv;
    var tabLabels = [];
    var tabLabelsInvisible = [];
    var activeTab;
    
    var divIds = [];	// store ids of content DIVs
    var grids = []; // store grids reference
    var lastMessages = [];
    var hourGlassCursor = false;
    
    // Tabs 
    
    var ID_MAIN = 0;
    var ID_NOTES = 1;
    var ID_HISTORY = 2;
    
    var TAB_MAIN_LABEL = "Main";
    var TAB_NOTES_LABEL = "Notes";
    var TAB_HISTORY_LABEL = "History";
    
    var TAB_LABELS_STR = [TAB_MAIN_LABEL, TAB_NOTES_LABEL, TAB_HISTORY_LABEL];
    
    var TAB_MAIN_VISIBLE = true;
    var TAB_NOTES_VISIBLE = true;
    var TAB_HISTORY_VISIBLE = false;
    
    var TABS_INIT_VISIBLE_STATE = [TAB_MAIN_VISIBLE, TAB_NOTES_VISIBLE, TAB_HISTORY_VISIBLE];
    
    var TAB_CONTENT_DIV_WIDTH = "100%";
    
    
    // Grids
    
    var GRID_HEIGHT = "500px";
    var GRID_WIDTH = "100%";
    
    var NUM_COL = 8;
    var ROW_HEIGHT = 32;
    
    var COL_ICON = 0;
    var COL_FLAG = 1;
    var COL_TITLE = 2;
    var COL_EDITION = 3;
    var COL_PUBLISHED = 4;
    var COL_NOTES = 5;
    var COL_HISTORY = 6;
    var COL_MSGID = 7;
    
    var COL_ICON_WIDTH = "35";
    var COL_FLAG_WIDTH = "35";
    var COL_TITLE_WIDTH = "240";
    var COL_EDITION_WIDTH = "170";
    var COL_PUBLISHED_WIDTH = "100";
    var COL_NOTES_WIDTH = "155";
    var COL_HISTORY_WIDTH = "45";
    var COL_MSGID_WIDTH = "0";
    
    var HEADER_MSG_TYPE = "";
    var HEADER_MSG_FLAG = "";
    var HEADER_MSG_TITLE = "Title";
    var HEADER_MSG_EDITION = "Edition";
    var HEADER_MSG_PUBLISHED = "Published";
    var HEADER_MSG_NOTES = "Notes";
    var HEADER_MSG_HISTORY = "History";
    var HEADER_MSG_ID = "";
    
    var HEADERS = [HEADER_MSG_TYPE, HEADER_MSG_FLAG, HEADER_MSG_TITLE, HEADER_MSG_EDITION, HEADER_MSG_PUBLISHED,
         HEADER_MSG_NOTES, HEADER_MSG_HISTORY, HEADER_MSG_ID];
    
    
    function doParseMessageList() 
    {
        insertMessageInGrid(TAB_MAIN_LABEL);
    }
    
    
    function doInit()
    {
        for (var i = 0;  i < TAB_LABELS_STR.length ; i++)
        {
            var isTabVisible = TABS_INIT_VISIBLE_STATE[i];
            var tabLabel = TAB_LABELS_STR[i];
            
            if(isTabVisible == true)
            {
                tabLabels.push(tabLabel);
                
                buildTabContent(tabLabel, i);
            }
            else
            {
                tabLabelsInvisible.push(tabLabel);
                
                buildTabContent(tabLabel, i);
            }
        }
        
        document.write(tabContentDiv);
        
        initializeTabs();
    }
    
    
    function buildTabContent(tabLabel, i)
    {
        // AW.HTML.DIV
        var d = new AW.HTML.DIV;
        var id = "div" + i;
        d.setId(id);
        d.setStyle("width", TAB_CONTENT_DIV_WIDTH);
        divIds.push(id);
        
        // AW.UI.Grid
        var grid = new AW.UI.Grid;
        gridId = tabLabel;
        grid.setId(gridId);
        grid.setStyle("width", GRID_WIDTH);
        grid.setStyle("height", GRID_HEIGHT);
        
        // Text wrap in grids rows
        grid.getRowTemplate().setClass("text", "wrap");
        grid.setRowHeight(ROW_HEIGHT);
        grid.setRowCount(0);
        grid.setSelectionMode("single-row");
        
        grid.setHeaderText(HEADERS);
        
        // Cell formating
        var str = new AW.Formats.String;
        var num = new AW.Formats.Number;
        var date = new AW.Formats.Date;
        date.setDataFormat("ISO8601");
        date.setTextFormat("dd-mmm hh:mm");
        
        // Columns
        grid.setColumnCount(NUM_COL);
        
        grid.setCellFormat([str, str, str, str, date, str, str, num]);
        grid.setCellTemplate(new AW.Templates.Image, COL_ICON); // display image in first cell
        grid.setCellTemplate(new AW.Templates.Image, COL_FLAG);
        grid.setCellTemplate(new AW.Templates.Image, COL_HISTORY); 
        
        if(tabLabel == TAB_MAIN_LABEL)
            grid.setColumnIndices([COL_ICON, COL_FLAG, COL_TITLE, COL_EDITION, COL_PUBLISHED, COL_NOTES, COL_HISTORY]); // hide 8th column containing message ids
        else
            grid.setColumnIndices([COL_ICON, COL_FLAG, COL_TITLE, COL_EDITION, COL_PUBLISHED, COL_NOTES]); // hide history column too
            
        grid.setColumnWidth(COL_ICON_WIDTH, COL_ICON);
        grid.setColumnWidth(COL_FLAG_WIDTH, COL_FLAG);
        grid.setColumnWidth(COL_TITLE_WIDTH, COL_TITLE);
        grid.setColumnWidth(COL_EDITION_WIDTH, COL_EDITION);
        grid.setColumnWidth(COL_PUBLISHED_WIDTH, COL_PUBLISHED);
        grid.setColumnWidth(COL_NOTES_WIDTH, COL_NOTES);
        grid.setColumnWidth(COL_HISTORY_WIDTH, COL_HISTORY);
        grid.setColumnWidth(COL_MSGID_WIDTH, COL_MSGID);
        
        grid.setColumnResizable(false, COL_ICON);
        grid.setColumnResizable(false, COL_FLAG);
        grid.setColumnResizable(true, COL_TITLE);
        grid.setColumnResizable(true, COL_EDITION);
        grid.setColumnResizable(false, COL_PUBLISHED);
        grid.setColumnResizable(true, COL_NOTES);
        grid.setColumnResizable(false, COL_HISTORY);
        grid.setColumnResizable(false, COL_MSGID);
          
        // AW.UI.Grid events
        //grid.onRowDoubleClicked = processRowDoubleClicked;
        //grid.onCellClicked = processCellClicked;
        //grid.onHeaderClicked = processHeaderClicked;
        grid.onColumnWidthChanged = processColumnWidthChanged;
        
        // Store a grid reference
        grids.push(grid);
        
        // Add Grid in DIV
        d.setContent(grid.getId(), grid);
        
        // Put the DIV in the global DIV
        tabContentDiv.setContent(d.getId(), d);
    }
    
    
    function processColumnWidthChanged(value, index)
    { 
        // When a column is resized in a grid, the same column is resized in other invisible grids
        for(var i = 0 ; i < grids.length ; i++)
        {
            grids[i].onColumnWidthChanged = function(value, index){return;};
            grids[i].setColumnWidth(value, index);
            grids[i].onColumnWidthChanged = processColumnWidthChanged;
        }
    }
    
    
    // Initialize tabs
    function initializeTabs()
    {
        tabs.setItemText(tabLabels);
        tabs.setItemValue(divIds); // store ids of content DIVs
        tabs.setItemCount(tabLabels.length);
        
        tabs.setTabEnabled(ID_HISTORY, false);
        
        tabs.refresh();
        
        // Tabs event
        tabs.onSelectedItemsChanged = processTabsSelectedItemsChanged;
    
        tabs.setSelectedItems([ID_MAIN]);
        activeTab = ID_MAIN;
        
        doParseMessageList();
    }
    
    function processTabsSelectedItemsChanged(selected)
    {
        var i, divs = document.getElementById("content").childNodes;
    
        for(i = 0 ; i < divs.length ; i++ )
        {
            if(divs[i].style)
            {
                divs[i].style.display = "none"; // hide all elements
            }
        }
    
        var index = selected[0];
        activeTab = index;
        
        var value = this.getItemValue(index);
        
        // Trick to get the getElementById working
        var divName = divId + "-" + value;
        document.getElementById(divName).style.display = "block"; // show selected
    }
    
    
    function insertMessageInGrid(tabid)
    {
        var msgid = 1234;
        var msgType = "test";
        var msgIcon = "pdf";
        
        var msgName = "title";
        var msgStartDateValue = 12342342;
        var msgStartDate = giveDate(msgStartDateValue);
        var msgFlag = "redx";
        var msgFlagValue = getFlagValue(msgFlag);
        var msgEdition = "edition content";
        var msgNotes = "notes content";
        
        // Get the grid for this groupName
        var g = getGrid(tabid);
         
        // Get the grid's rowcount
        var rowcount = g.getRowCount();
        var newRowIndex = rowcount++;
        
        // Add row
        g.addRow(newRowIndex);
        
        // Populate row
        g.setCellImage(msgIcon, COL_ICON, newRowIndex); // Image is referenced in ssActiveWidgetsLib.css (.aw-image-...)
        g.setCellValue(msgIcon, COL_ICON, newRowIndex); // Set icon column a text value to make it sortable
        g.setCellImage(msgFlag, COL_FLAG, newRowIndex);
        g.setCellValue(msgFlagValue, COL_FLAG, newRowIndex);
        g.setCellText(msgName, COL_TITLE, newRowIndex);
        g.setCellText(msgEdition, COL_EDITION, newRowIndex);
        g.setCellText(msgStartDate, COL_PUBLISHED, newRowIndex);
        g.setCellValue(msgStartDateValue, COL_PUBLISHED, newRowIndex);
        g.setCellText(msgNotes, COL_NOTES, newRowIndex);
        g.setCellText(msgid, COL_MSGID, newRowIndex);
        
        g.sort(COL_PUBLISHED, "descending");
        
        g.refresh();   
    }
    
    
    function getGrid(id)
    {
        var g = null;
        for(var i = 0 ; i < grids.length ; i++)
        {
            if(grids[i].getId() == id)
            {
                g = grids[i];
                return g;
            }
            else
            {
            }
        }
        return g;
    }
    
    
    function giveDate(sec)
    {
    
        var d = new Date();
        var millsec = sec * 1000;
        
        d.setTime(millsec);
        
        var min = d.getMinutes();
        if(min < 10)
            min = "0" + min ;
            
        var hours = d.getHours();
        if(hours < 10)
            hours = "0" + hours ;
            
        var day = d.getDate();
        if(day < 10)
            day = "0" + day ;
            
        var month = d.getMonth();
        var mon = getMonthStr(month);
            
        //var year = d.getYear();
        
        return day + '-' + mon + ' ' + hours + ':' + min ;
    }
    
    
    function getMonthStr(num)
    {
        switch(num)
        {
            case 0:
                return "Jan";
                break;
            case 1:
                return "Feb";
                break; 
            case 2:
                return "Mar";
                break;
            case 3:
                return "Apr";
                break;
            case 4:
                return "May";
                break;
            case 5:
                return "Jun";
                break; 
            case 6:
                return "Jul";
                break;
            case 7:
                return "Aug";
                break;
            case 8:
                return "Sep";
                break;
            case 9:
                return "Oct";
                break; 
            case 10:
                return "Nov";
                break;
            case 11:
                return "Dec";
                break;
        }
    }
    
    
    function getFlagValue(msgFlag)
    {
        switch(msgFlag)
        {
            case "excla":
            case "excla16":
            case "excla32":
                var value = "a";
                break;
            case "redx":
            case "redx16":
            case "redx32":
                var value = "b";
                break;
            case "":
                var value = "c";
                break;
            default :
                var value = "c";
        }
        
        return value;
    }
    
    
    function doInitView()
    {
        registerEventHandlers();
    }
    
    var timeoutID    = new Number(0);
    var windowWidth  = new Number(0);
    var windowHeight = new Number(0);
    
    function registerEventHandlers()
    {
        window.onresize = doOnResize;
    }
    
    function doOnResize()
    {
        if(timeoutID) 
            window.clearTimeout(timeoutID)  // clear old timeout 
        timeoutID = window.setTimeout("doResize()", 50);
    }
    
    function doResize()
    {
        windowWidth  = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
        
        grids[ID_MAIN].setStyle("height", windowHeight - 100);
        grids[ID_NOTES].setStyle("height", windowHeight - 100);
        grids[ID_HISTORY].setStyle("height", windowHeight - 100);
    }
    
    </script>

    <style>
    .aw-ui-tabs .aw-item-box
    {
        width: 75px
    }
     
    /* Icons */  
    .aw-image-pdf
    {
        background: url(image_1.gif);
        width: 16px;
        height: 16px
    }
    .aw-image-redx
    {
        background: url(image_2.gif);
        width: 16px;
        height: 16px
    }
    /* Tab enabled-disabled style */						
    .aw-extension-tabs-enabled {color:black;}
    .aw-extension-tabs-disabled {color:gray; background-position: 100% 0px!important;}
    .aw-extension-tabs-disabled .aw-item-box {color:gray; background-position: 0px -50px!important;}
    
    /* Selected row in grid */
    .aw-grid-control .aw-cells-selected, .aw-grid-control .aw-rows-selected {color:#000;background:#DDDDDD}
    </style>       
    </head>
    
    <body onLoad="doInitView();" oncontextmenu="return false;">

        <div class="TopElement">
        
            <!-- Tabs -->
            <div>
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <script>
                            var tabs = new AW.UI.TabsEnhanced; 
                            var tabsId = "tabs";
                            tabs.setId(tabsId);
                            tabs.setStyle("width", "100%");
                            document.write(tabs);
                            </script>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- End Tabs -->
            
            <!-- Tabs content global Div -->
            <div>
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <script>
                            var tabContentDiv = new AW.HTML.DIV;
                            var divId = "content"; 
                            tabContentDiv.setId(divId);
                            tabContentDiv.setStyle("width", "100%");
                            tabContentDiv.setStyle("border", "1px solid #aaa");
                            </script>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- End Tabs content global Div -->
            
            <script>

                doInit();
                
            </script>
            
          </div>
        <!-- End TopElement -->
    </body>
</html>
Rod
April 27,
No idea ?
Rod
May 7,
1). Scrollbar problem - the grid does not initialize correctly in IE when the grid is inserted into the composite AW object with setContent() method. The possible workaround would be to insert the grid html using the function,

d.setContent(grid.getId(), function(){return grid.toString()});

instead of

d.setContent(grid.getId(), grid);

line 217 in your example code.

2). 2-3 pixel image shift on mouseover - this is a bug related to text-wrap setting, you can fix it adding the following CSS rules to your stylesheet -

.aw-ie .aw-text-wrap .aw-item-image {
left: -2px;
margin-left: 0px;
margin-right: 2px;
}

The problem was due to the negative margin-left value in combination with float:left.

Alex (ActiveWidgets)
May 15,

This topic is archived.

See also:

This example shows how to Drag and Drop Rows in a v2.0 Grid to change the row order Rob Francis (59)
Grid Cell Not Displaying White Spaces Jez (True Track Software) (24)
tabbing from cell to cell Josh (22)
how to make a master cell for the rest of the cells in the same column c_figer (14)
Grid in Grid - Inner grid lacks scroolbars Diego Vilar (13)
Search Grid Column For Match Joe (45)
2.0 - I need a Grid inside a Grid Rob Francis (17)
How do you add an image to the first column in a grid? L. Aragon (17)
Bug in 2.0.1 - grid top row disappears Alex (ActiveWidgets) (13)
[Please comment] Cell editing, changing API (2.0) Alex (ActiveWidgets) (21)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us