3.0.0

Last Charater in Grid - rtl gets misplaced

Hi,

I have a grid whose cells are having a direction of "rtl". If the grid has the text as SAP AG (ADR) it gets displayed as (SAP AG (ADR
It is the last character that gets misplaced.

Example is as below: Observe the 3rd row in Column 'Company'
----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ActiveWidgets Examples</title>

<!-- fix box model in firefox/safari/opera -->
<style type="text/css">
body {font: 12px Tahoma}
</style>

<!-- include links to the script and stylesheet files -->
<script src="../runtime/lib/aw.js" type="text/javascript"></script>
<link href="../runtime/styles/system/aw.css" rel="stylesheet">

<!-- grid format -->
<style type="text/css">


#myGrid .aw-grid-header {color:#335C85;background:red!important;font-family:Arial;font-size:8pt;font-weight:bold;text-align:center;}
#myGrid-separator-0 .aw-grid-separator {height:100%;color:green;background:red;border-color:black;}

</style>

<!-- grid data -->
<script type="text/javascript">
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR*", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];

var myColumns = [
"Ticker", "Company", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<script type="text/javascript">

// create ActiveWidgets Grid javascript object
var obj = new AW.Grid.Extended;
obj.setId("myGrid");
obj.setStyle('width', '50%');

// define data formats
var str = new AW.Formats.String;
var num = new AW.Formats.Number;

obj.setCellFormat([str, str, num, num, num]);

// provide cells and headers text
obj.setCellText(myData);
obj.getHeadersTemplate().setClass("text", "wrap");
obj.setHeaderHeight(50);
obj.setColumnResizable(true, 0);

obj.setHeaderText(myColumns);

// set number of rows/columns
obj.setRowCount(20);
obj.setColumnCount(5);


// set row selection
obj.setSelectionMode("single-row");
obj.getCellTemplate(1).setStyle('text-align', 'RIGHT');

//------------PROBLEM AREA--------
obj.getCellTemplate(1).setStyle("direction", "rtl");
//------------

// write grid html to the page
document.write(obj);

</script>
</body>
</html>

//-----------------------------

Any quick help would be appreciated on this.
cpuri
December 21,
You need to use:
obj.getCellTemplate(1).getContent('box/text').setStyle("direction", "rtl");
instead of:
obj.getCellTemplate(1).setStyle("direction", "rtl");
C++
December 22,
Thanks this works like a charm.
Is there a logic the below line would not work ?
obj.getCellTemplate(1).setStyle("direction", "rtl");

Just trying to better understand so that I can do it better the next time.

cpuri
December 22,
When we use
obj.getCellTemplate(1).getContent('box/text').setStyle("direction", "rtl");

Although the last character issue seems to be resolved but with the cells that contain the Image and text, the image that was originally supposed to be aligned to right got moved to left with this fix.

Here is the snippet of code.
----------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ActiveWidgets Examples</title>

<!-- fix box model in firefox/safari/opera -->
<style type="text/css">
body {font: 12px Tahoma}
</style>

<!-- include links to the script and stylesheet files -->
<script src="../runtime/lib/aw.js" type="text/javascript"></script>
<link href="../runtime/styles/system/aw.css" rel="stylesheet">

<!-- grid format -->
<style type="text/css">


#myGrid .aw-grid-header {color:#335C85;background:red!important;font-family:Arial;font-size:8pt;font-weight:bold;text-align:center;}
#myGrid-separator-0 .aw-grid-separator {height:100%;color:green;background:red;border-color:black;}
.aw-image-home {background: url(home.png)}
.aw-image-DELETE {background: url(../common/images/home.png);cursor:hand;title:delete;width:10px;height:10px;margin-top:0px}
</style>

<!-- grid data -->
<script type="text/javascript">
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR*", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];

var myColumns = [
"Ticker", "Company", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<script type="text/javascript">

// create ActiveWidgets Grid javascript object
var obj = new AW.Grid.Extended;
obj.setId("myGrid");
obj.setStyle('width', '50%');

// define data formats
var str = new AW.Formats.String;
var num = new AW.Formats.Number;

obj.setCellFormat([str, str, num, num, num]);

// provide cells and headers text
obj.setCellText(myData);
obj.getHeadersTemplate().setClass("text", "wrap");
obj.setHeaderHeight(50);
obj.setColumnResizable(true, 0);

obj.setHeaderText(myColumns);

// set number of rows/columns
obj.setRowCount(20);
obj.setColumnCount(5);


// set row selection
obj.setSelectionMode("single-row");
obj.getCellTemplate(1).setStyle('text-align', 'RIGHT');

//------------PROBLEM AREA--------
obj.setCellTemplate(new AW.Templates.ImageText, 1);
obj.setCellImage("DELETE",1);
//obj.getCellTemplate(1).setStyle("direction", "rtl"); //uncomment this line and comment the next line to see the original issue
obj.getCellTemplate(1).getContent('box/text').setStyle("direction", "rtl"); //last character issue fixed but the image moved to left side of the text
//------------

// write grid html to the page
document.write(obj);

</script>
</body>
</html>

Please help.
cpuri
December 29,
December 29,
sorry could not figure out from the forum post how to fix it using javascript :o(
cpuri
December 29,
You can use getContent("box/image") to get the image positioned to the right. (i.e. css translation is):
#grid2 .aw-column-1 .aw-item-image{position:absolute;right:-4px;top:50%;margin-top:-9px};
obj.getCellTemplate(1).getContent("box/image").setStyle('position','absolute');
obj.getCellTemplate(1).getContent("box/image").setStyle('right','-4px');
obj.getCellTemplate(1).getContent("box/image").setStyle('top','50%');
obj.getCellTemplate(1).getContent("box/image").setStyle('margin-top','-9px');

and then add some right padding to the box/text element:
obj.getCellTemplate(1).getContent("box/text").setStyle('padding-right','19px');
C++
December 30,

This topic is archived.

See also:


Back to support forum

Search

Version 2

Looking for AW 2.6 ?
The old site is here.