:: Forum >>

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
Tuesday, December 21, 2010
You need to use:
obj.getCellTemplate(1).getContent('box/text').setStyle("direction", "rtl");
instead of:
obj.getCellTemplate(1).setStyle("direction", "rtl");
C++
Wednesday, December 22, 2010
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
Wednesday, December 22, 2010
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
Wednesday, December 29, 2010
http://www.activewidgets.com/javascript.forum.25546.5/image-on-the-right-of.html
Wednesday, December 29, 2010
sorry could not figure out from the forum post how to fix it using javascript :o(
cpuri
Wednesday, December 29, 2010
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++
Thursday, December 30, 2010

This topic is archived.


Back to support forum

Forum search