Welcome Guest Search | Active Topics | Sign In | Register

Change deletetext for a single row Options
Don
Posted: Monday, December 17, 2012 5:34:22 PM
Rank: Newbie
Groups: Member

Joined: 12/7/2012
Posts: 2
Hello,

I am using a grid on my page and am trying to change the deletetext of a DeleteCommandColumn based upon the value of another cell. If the other cell has been marked as completed, the text of the DeletecommandColumn should show "Completed", instead of "delete." In the javaScript, I am doing this:

var GridCell = GridItem.getCell(25);
if (GridCell.getValue() == '10') {
var delCell = GridItem.getCell(0);
delCell.Text = 'Completed';
}

I also tried changing the deletetext of the column to an HTML object like:

<eo:DeleteCommandColumn Name="Delete" DeleteText="<p id='btndelete'>Delete</p>"></eo:DeleteCommandColumn>

...and then tried using some jquery to set the html property to the text I wanted using:

$("[id*='btndelete']").html('Completed');

but that sets the text of all of the rows.

Is what I am trying to do possible? Are there any features or code snippets you could point me to? I can also run this on the server side if it is easier to get to the property from there...

Many thanks,

Don
eo_support
Posted: Monday, December 17, 2012 6:01:25 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 23,159
Hi,

There is no way for you to change DeleteText from the client side. Your idea of using JQuery could work, but as you have noticed, if you use the same id for every cell, then a single call will change all cells.

An alternative is to change cell style instead of cell text. You will do something like this:

1. Set your DeleteText to

Code: HTML/ASPX
<span class="delete">Delete</span><span class="complete">Complete</span>


This will display both "Delete" and "Complete" in your cell. This is where CSS needs to come in.

2. Define the following CSS rules:

Code: CSS
/*Rule #1*/
.complete
{
    display:none;
}

/*Rule #2*/
.complete_cell .delete
{
    display:none;
}

/*Rule #3*/
.complete_cell .complete
{
    display:inline;
}


After these CSS rules, text "Complete" will be hidden because rule #1 is automatically applied, so only "Delete" is visible now.

3. Using the following code to switch "Delete" to "Complete":

Code: JavaScript
//Apply CSS rule "complete_cell" on the grid Cell 
gridCell.overrideStyle("complete_cell");


This will apply rule #2 and #3 on the "Delete" and "Complete" text respectively, thus hide "Delete" and display "Complete".

Note the default Grid cell style (before "complete_cell" applied) may have paddings, so you may need to add paddings (or other things such as font, color, ect) in your "complete_cell" rule to compensate that. But the basic idea is to use a CSS descendant selector to switch style instead of changing text.

Hope this helps. Please let us know if you still have any more questions.

Thanks!


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.