3.2.0
Forum Demo Guide API Store

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,
http://www.activewidgets.com/javascript.forum.25546.5/image-on-the-right-of.html
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:

This example shows how to Drag and Drop Rows in a v2.0 Grid to change the row order Rob Francis (59)
Search Grid Column For Match Joe (45)
Grid in Grid - Inner grid lacks scroolbars Diego Vilar (13)
2.0 - I need a Grid inside a Grid Rob Francis (17)
Refresh Grid joe (27)
Grid Cell Not Displaying White Spaces Jez (True Track Software) (24)
Correct way to update table model in Extended Grid Curt K. (19)
Example - saving editable grid data to the server Alex (ActiveWidgets) (18)
How do you add an image to the first column in a grid? L. Aragon (17)
After grid sort how to get display column values? JohnnyA (8)

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