Welcome Guest Search | Active Topics | Sign In | Register

On Client side, change background and/or text color on a grid TextBoxColumn single cell Options
Tom K.
Posted: Wednesday, November 11, 2009 10:15:23 AM
Rank: Advanced Member
Groups: Member

Joined: 9/14/2009
Posts: 29
*** Web Grid control question ***

I have a successful ClientSideEndEdit event firing when I leave a cell that is part of a TextBoxColumn type.

In this client side event based on some data validating and upon leaving the cell, I want to change the background color and text color of the cell.

In your cell-based conditional formatting example, a StaticColumn is used instead of a TextBoxColumn and server side code is being used instead of client side code.

In my Java script, I tried using gridCell.overrideStyle but nothing changes. Do I need to some how get a handle to the embedded edit control first and, if so, how do I do this?

I would really appreciate your help on this.


Thank you very much,

Tom

eo_support
Posted: Wednesday, November 11, 2009 11:50:26 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

overrideStyle is to set style for non-editing mode (once the textbox disappears). There is no public interface for you to change anything dynamically with JavaScript with the textbox.

Thanks!
Tom K.
Posted: Wednesday, November 11, 2009 12:13:56 PM
Rank: Advanced Member
Groups: Member

Joined: 9/14/2009
Posts: 29
Thanks for the reply.

Actually changing the cell style is what I really need and I had some better luck.

First I included a CellStyle tag under my TextBoxColumn to make the text green as follows:

<eo:TextBoxColumn ClientSideEndEdit="OnAfterCellEdit" DataField="UnitCost" DataFormat="" HeaderText="Unit Cost" Name="UnitCost"
Width="90">
<CellStyle CssText="color: green" />
</eo:TextBoxColumn>

Next, in my ClientSideEndEdit event, I included the gridCell.overrideStyle call after my alert message to attempt to turn the text red as follows:

// Display invalid data entered alert
window.alert("Invalid Data Entered!");

// Change the text red
gridCell.overrideStyle("color: red");

For some reason, by calling gridCell.overrideStyle above, the green text does not change to red but instead it turns black as if no cell style is set or that I called gridCell.overrideStyle with a null parameter.

Should this approach work and, if so, Am I calling gridCell.overrideStyle correctly?


Thanks very much in advance,

Tom



eo_support
Posted: Wednesday, November 11, 2009 1:14:42 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

overrideStyle takes a css class name. So in your case you will need to do something like this:

Code: CSS
.red_text
{
    color: red;
}


Code: JavaScript
gridCell.overrideStyle("red_text");


Thanks!
Tom K.
Posted: Wednesday, November 11, 2009 1:19:25 PM
Rank: Advanced Member
Groups: Member

Joined: 9/14/2009
Posts: 29
Sounds good...I'll give it a shot!


Thanks again,

Tom
Tom K.
Posted: Wednesday, November 11, 2009 1:36:33 PM
Rank: Advanced Member
Groups: Member

Joined: 9/14/2009
Posts: 29
It worked like a charm!

Thanks for the great support!!!



Regards,

Tom
eo_support
Posted: Wednesday, November 11, 2009 1:45:26 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Great. Glad that it worked for you!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.