Grid Cell Not Displaying White Spaces

If I add two or more white spaces (by pressing the space bar) between characters & words within the a Grid, it displays the whites spaces but looses them when I move away?

Q: Can the Grid display the white spaces after I move off a cell?

The Grid is formatted as follows: -

var html = new AW.Formats.HTML; 

obj.setCellFormat([html]);

It needs to be formatted using the HTML constructor for other reasons.

Are you using CSV data?
??
http://www.activewidgets.com/javascript.forum.3444.5/null-or-blank-value-in.html

No the grid is not populated its used for entering data that's submitted. The problem is easily replicated using the grid example on the
Activewidgets home page. Click into the "Company Name" cell enter some spaces, press enter... and it fails to display the white spaces.

No the grid is not populated its used for entering data that's submitted. The problem is easily replicated using the grid example on the
Activewidgets home page. Click into the "Company Name" cell enter some spaces, press enter... and it fails to display the white spaces.

No the grid is not populated its used for entering data that's submitted. The problem is easily replicated by using the grid example on the
Activewidgets home page. Click into "Company Name" and enter some spaces, press enter... and it fails to display the white spaces.

Or..
??
http://www.activewidgets.com/javascript.forum.12384.5/formats-applied-to-empty-cells.html
http://www.activewidgets.com/javascript.forum.24052.2/problem-in-sorting-when-some.html
http://www.activewidgets.com/javascript.forum.26074.11/grid-oncellvalidated-function-text-column.html
http://www.activewidgets.com/javascript.forum.13912.8/cell-bug.html
http://www.activewidgets.com/javascript.forum.25557.3/addrow-when-fails-datasoure-is.html

OK, sorry, I see:
You can also test it in:
http://www.activewidgets.com/aw.formats.html/
It does not works either if you put spaces in between :
"<i>this is html</i>"

And only do it by placing "&nbsp;"
<i>this is &nbsp;&nbsp;&nbsp;&nbsp; html </i>

So I guess, you need to do it this way, as posted here:
http://www.activewidgets.com/javascript.forum.11089.8/multiple-spaces-leads-to-multiple.html

Or "simply" building a special-custom html format module.

http://www.activewidgets.com/aw.formats.html/

That thread was not resolved and whilst I am now pretty conversant in AW and using AW for a number of different projects, I wouldn't know where to begin with creating a new module.

Thank you for your help on the matter..

Alex can you help because I shouldn't need to write a new module, it maybe something I am doing wrong and not doing as the case may be??

Let me help a bit more ( before Alex's response).
Because a grid is displayed in standart "<SPAN>" tags, html code are trimming correlative spaces by default, so no need of a custom format module.
You can get a cell content ( with all spaces using html format & setCellData) asking for it's value:

obj.onCellClicked = function(event,col,row){
alert( obj.getCellValue(col,row) )
}

But if you really need to show that on a cell , then either use "&nbsp;", or <PRE> tags:
http://www.codedigest.com/CodeDigest/76-Display-multiple-spaces-in-HTML.aspx
"<i><PRE>this (NORMAL SPACES HERE) is html</PRE></i>"
HTH

You can also override the dataToText, textToValue to insert/erase the<PRE> tags:
http://www.activewidgets.com/javascript.forum.16718.3/why-does-setcelltext-vs-setcelldata.html

Sorry for highjacking your post again, but trying to make a helpful sample ( for my own understanding too) I made a special format that inserts <PRE> tags based on:
http://www.activewidgets.com/aw.formats.html/
It works, but get margin/padding-top differences so I have to use:
obj.setRowHeight(50); to see the content.
How could I solve this issue ?
Any css expert out there , Alex?
Thanks.

<script>
    var myData = [["<i>this is text</i>", "<i>this     is html<i>"],];

AW.Formats.SPECIALHTML=AW.System.Format.subclass();
AW.Formats.SPECIALHTML.create=function() {
Var obj=this.prototype;
obj.dataToValue=function(data) {
return data?data.replace(AW.htmlPattern,AW.htmlReplace): ""
};
obj.dataToText=function(data) {
    return "<PRE>" + data + "</PRE>"
};
obj.textToValue=obj.dataToValue;
if("".localeCompare) {
obj.comparator=function(values,greater,less,equal,error) {
return function(i,j) {
try {
return greater *(""+values[i]).localeCompare(values[j])|| equal(i,j)
}
catch(e) {
return error(i,j,e)
}}}}};

    var text = new AW.Formats.String;
    var specialhtml = new AW.Formats.SPECIALHTML;

    // grid control
    var obj = new AW.UI.Grid;
    obj.setCellData(myData);
    obj.setCellFormat(text, 0); // text in the first column
    obj.setCellFormat(specialhtml , 1); // html in the second column
    obj.setColumnCount(2);
    obj.setRowCount(1);
obj.setRowHeight(50); //// <PRE> tags break s cell-top-marging
    document.write(obj);
obj.onCellClicked = function(event,col,row){
alert( obj.getCellValue(col,row) )
}
</script>

replace;
Var obj=this.prototype;
with;
var obj=this.prototype;

OK , after some research, found pre-tags issues for non-IE browsers, so I took some css code from:
http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/

It should be a better solution/patch, at least close ,but...
Any one inputs?
TIA

For those (like me) with poor css skils, the key is:
display: inline;
May also need some font-family / size / weight styles, and can be included in the custom format ( specially if don't want to propagate through other pre-tags ) by replacing:
return "<PRE>" + data + "</PRE>" ;
with:
return "<PRE style=\"display: inline;\">" + data + "</PRE>";

Hi C++,

Thank you for your immense effort here, only just got round to checking the post. I shall try and use your example and let you know the outcome...

Hi Jez,
I just found a easier & shorter way to do it based on:
http://www.activewidgets.com/javascript.forum.16701.14/hide-cell-data.html

Instead of build a complete new format, override the dataToText function of the standart html-format using html.dataToText1 ( a copy of that function).

So, thank you for pointing this, can also help me for future proyects.

var myData = [["<i>this is text</i>", "<i>this     is html<i>"],];
    
var text = new AW.Formats.String;
var html = new AW.Formats.HTML;

html.dataToText1 = html.dataToText; 
html.dataToText = function(data){
return data ? "<PRE style=\"display: inline;\">" + this.dataToText1(data) + "</PRE>" : ""; 
} 

    // grid control
    var obj = new AW.UI.Grid;
    obj.setCellData(myData);
    obj.setCellFormat(text, 0); // text in the first column
    obj.setCellFormat(html , 1); // html in the second column
    obj.setColumnCount(2);
    obj.setRowCount(1);
    document.write(obj);

You example appears to work only when you load the data, if you edit the cell and change the text, press enter, it strips it back to a clear string and looses the white spaces and it's showing the HTML <PRE> tags which is something I don't want

(I am not sure if that is something in my code interfering with your function??)

This is difficult because you don't know all the information.

Cell Criteria

The cell needs to not remove the white spaces after editing and it's being used is a editable cell where a user can enter text that is submitted via an HTTP Request for other data processing. The text entered can be changed after it's entered, i.e. modified and also needs to display special characters such as the GBP pound sign, quotes etc. Thus why it's HTML formatted.

I can show you a real example, if you would like, by giving you a connection to the application, but in essence I think this problem is my lack of understanding because from what I understand it's not AW but in fact the Browser that is stripping the white spaces but I am convinced we are the right track here and if not, then maybe Alex has something up his sleeve especially as I am a paying customer :)

Thanks to you C++ I have resolved it!

After looking at your code and using Firefox's firebug and delving into the cell, it showed that on line 17 of AW.CSS the white-space property is set to NOWRAP

.aw-text-normal .aw-templates-cell, .aw-text-normal .aw-templates-text, .aw-text-normal .aw-templates-link, .aw-text-normal .aw-item-box {
white-space:nowrap;
}

simply changing a number of properties on line 17 of AW.CSS to

.aw-item-box {white-space:pre}

now works and no longer strips the white spaces!

I know that editing the AW.CSS directly is not best practice but hey it works!!

Thanks for all your efforts, your coding is very strong and your help was greatly appreciated.

Well, If I where in the need of something similar , then I probably don't go for in-cell edition in this case ( specially if is large data and/or contain very special chars [ line-breaks too?]), mostly because the grid is not designed for it by default, and also because the limitation in the column-width.
I would better bet for edit in a separate DIV container with pre tags inside that loads data via http on a row-click.( and post changes on a buttom click). Or would try to do it in a drop-down ( look in the forum for -editable drop down- ).

That said, ( and as I know that user needs are avobe fiction :-) the result is....

It should be very close to this, but fails ( losing format after second edit).

obj.onCellEditStarting = function(event, column, row){
obj.setCellText( obj.getCellValue(column,row) );
}

obj.onCellValidated = function(text, column, row){
if(column==1){
obj.setCellValue(text, column, row )
var FFtext = "<PRE style=\"display: inline;\">" + text + "</PRE>";
obj.setCellText(FFtext, column, row )
}
}

Not sure if is a timing issue, or something else not related,....Sooo.. really need Alex to check whats wrong here.

UUpppsss late again.

To give you an idea of what I was trying to achieve take a look at these screen shots..

No White Space

http://www.truetracksoftware.com/images/nowhitespace.png

White Space

http://www.truetracksoftware.com/images/whitespace.png

If you could image that before it displayed the white spaces that it would still print them correctly but seeing the whites spaces in the application before you print the document is really useful.

Solved!
using setCellData to keep formating.

obj.onCellEditStarting = function(event, column, row){
this.setCellText( this.getCellValue(column,row) );
} 

obj.onCellValidated = function(text, column, row){
if(column==1){
this.setCellData("<PRE style=\"display: inline;\">"  + text +  "</PRE>", column, row );
}
}

Wow! looks very impresive,
Nice design, ( I can see the target now).
Congrats,
Cheers
LFTTYA
C++

Anyway, if you ever need to do the same in a single-cell with an editable popup div/textarea, then check this post:
http://www.activewidgets.com/javascript.forum.15537.1/version-2-0-custom-drop.html
fixed in:
http://www.activewidgets.com/javascript.forum.23974.2/can-a-grid-cell-drop.html

You wasn't giving up on that until you had solved it too! I like your focus..
The CSS change works for me but I hey it's all good stuff and hopefully someone else will find it useful.

Thanks once again for your input dude!