Welcome Guest Search | Active Topics | Sign In | Register

Update Cell Options
Ian Kelly
Posted: Thursday, March 3, 2011 4:18:23 PM
Rank: Member
Groups: Member

Joined: 1/21/2011
Posts: 11
Hi There,
I have 3 columns in my grid. 1 is static, 1 is a textbox and the last is a custom column. The value of the custom column is a percentage calculation of the other two columns. I use the "ClientSideGetText" function of the custom column to populate the percentage on load and "ClientSideEndEdit" of the textbox column to update the custom column after the user changes it's value.

The issue I am having is that the custom column does not show the new value right away. If I click into the textbox column, make a change and then click out the custom column is not updated. But if I then click back in the textbox column and back out with no changes, the custom column is updated. There is no postback happening here, I am not in full row edit mode. How can I force the grid to show the change immediately? The function is below:

function CalcGP(oCell,newValue) {
var oItem = oCell.getItem();
var nPrice = parseFloat(newValue);
var nCost = oItem.getCell(5).getValue();

if (!isNaN(nCost)) {
if (!isNaN(nPrice)) {
if (nPrice != 0) {
oItem.getCell(6).setValue(parseInt(((nPrice - nCost) / nPrice) * 10000) / 100 + "%");
}
}
}
return nPrice;
}

Thanks
Ian
eo_support
Posted: Thursday, March 3, 2011 4:37:42 PM
Rank: Administration
Groups: Administration

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

I believe you can call refresh on the cell force the cell to update. It will be something like this:

oItem.getCell(cellIndex).refresh();

Thanks!

Ian Kelly
Posted: Thursday, March 3, 2011 4:56:20 PM
Rank: Member
Groups: Member

Joined: 1/21/2011
Posts: 11
Hi,
Thanks for the reply, unfortunately this didn't work. I checked the documentation for mention of that function as well and couldn't find anything about it it for the gridCell object.
Ian
eo_support
Posted: Thursday, March 3, 2011 5:31:11 PM
Rank: Administration
Groups: Administration

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

It should work. Please check whether you have the latest version. refresh was not there initially but was later added. It is not documented.

Thanks!
Ian Kelly
Posted: Friday, March 4, 2011 10:41:44 AM
Rank: Member
Groups: Member

Joined: 1/21/2011
Posts: 11
Hi There,
I downloaded and installed the latest version, 8.0.51 according to the grid editor and the dll version info in windows explorer.

I put the refresh() method in as instructed:
function CalcGP(oCell,newValue) {
var oItem = oCell.getItem();
var nPrice = parseFloat(newValue);
var nCost = oItem.getCell(5).getValue();

if (!isNaN(nCost)) {
if (!isNaN(nPrice)) {
if (nPrice != 0) {
oItem.getCell(6).setValue(parseInt(((nPrice - nCost) / nPrice) * 10000) / 100 + "%");
oItem.getCell(6).refresh(); }
}
}
return nPrice;
}

After making a change to the price column I have to click out of that cell, click back in, and then out again before the change is reflected in the grid. Once again, no postback is ocurring.
Ian
eo_support
Posted: Friday, March 4, 2011 10:49:17 AM
Rank: Administration
Groups: Administration

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

I am not sure what you meant by "reflected in the Grid". refresh refreshes the UI, it has nothing to do with post back. Also if you are already calling setValue, then you do not need to call refresh again because setValue already calls refresh.

The main purpose of refresh is to refresh the value of a CustomColumn. For example, if you have column A, B and C. A and B are regular columns each with an integer value. C is a custom column which automatically displays the sum of A and B by implementing a ClientSideGetText handler on C, which retrieves value from A and B and calculate the sum. In this case you would call C.refresh() to instruct it call ClientSideGetText again to so that user will see the new sum in cell C after they modified cell A or B.

Thanks
Ian Kelly
Posted: Friday, March 4, 2011 11:55:08 AM
Rank: Member
Groups: Member

Joined: 1/21/2011
Posts: 11
Ok, Thanks for the reply. The grid is still not displaying the updated results but now I know why, just not how to fix it.

I changed the "ClientSideEndEdit" function of the price column (A) to simply call a refresh of the custom column (C). This does fire the "ClientSideGetText" function of the custom column (C). The issue is that the "getValue" method is returning the underlying value of the price column (A) not the "newvalue".

Ian
eo_support
Posted: Friday, March 4, 2011 12:10:25 PM
Rank: Administration
Groups: Administration

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

There are two different aspects of a custom grid cell:

1. The cell data. This only changes when you call setValue. You do not "see" the data directly;

2. The cell text. This is returned by ClientSideGetText. refresh causes ClientSideGetText to be called. It does not change the data;

Usually you would code your ClientSideGetText as such so that it visualizes your underlying data (which you would get by calling getValue). For example, you can visualize a percentage value by formating it as a percentage number, or display a color bar, or even draw a pie. It's totally up to you. The key you need to understand is ClientSideGetText does not change your data.

To put it in another way:

1. In order for the Grid cell to display something different, ClientSideGetText needs to be called (this is where refresh is useful) and it needs to return something different;
2. In order for getValue to return something different, you need to call setValue.
3. These two are related only if you code to make them related.

Hope this clears up.

Thanks
Ian Kelly
Posted: Friday, March 4, 2011 1:20:34 PM
Rank: Member
Groups: Member

Joined: 1/21/2011
Posts: 11
Hi,
I am obviously not explaining this correctly. So let me try again.
1) I have 3 columns A, B, C.
2) Column A holds a price that the user can change.
3) Column B holds a cost that the user cannot change.
4) Colunmn C is a Gross Profit calculation using column A & B. The user cannot directly change this column.

So to be clear, the only column that the user can change is A. Column C is unbound and only the "ClientSideGetText" function changes what it displays.

When the user changes column A, Column A's "ClientSideEndEdit" function call's Column C's refresh method which triggers Column C's "ClientSideGetText" function. When this happens, this "ClientSideGetText" function uses getValue() to get the value of Column A so ti can do it's calculation. The problem is getValue is returning the value of Column A BEFORE the user changed it, not AFTER.

How do I get "ClientSideGetText" to grab the NEW value of Column A, not the old?
Ian
eo_support
Posted: Friday, March 4, 2011 1:26:15 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
I see. That's very clear now. ClientSideEndEdit is called before the new value has been submitted so that you have a chance to cancel it, at which moment the Grid cell value has not been updated so getValue will give you the old value. The new value is passed to you through the second argument of your ClientSideEndEdit handler (the first argument is the cell object).

Thanks!
Ian Kelly
Posted: Friday, March 4, 2011 1:36:33 PM
Rank: Member
Groups: Member

Joined: 1/21/2011
Posts: 11
Hi,
Thanks for the response. Is there an Event that is fired AFTER the grid cell has been updated? I need the custom column to update after Column A has been modified. If I use the setValue in ClientSideEndEdit of Column A it triggers the refresh of column C, which still can't see the new value.

Ian
eo_support
Posted: Friday, March 4, 2011 2:43:23 PM
Rank: Administration
Groups: Administration

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

No. There isn't one. What you can do is to use setTimeout to delay your code. It will be something like this:

setTimeout(function()
{
....your code here....
}, 10);

That way the calling code will finish first and your code will be called later.

Thanks!
Ian Kelly
Posted: Friday, March 4, 2011 2:59:30 PM
Rank: Member
Groups: Member

Joined: 1/21/2011
Posts: 11
Perfect! That did it! Thanks for your help. I am noticing that the cell that the user edits loses its formatting (currency). Is there a way around this?
Ian
eo_support
Posted: Friday, March 4, 2011 4:14:32 PM
Rank: Administration
Groups: Administration

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

Please provide sample code that demonstrates how you set your formatting. We won't be able to tell you what to check unless we know what you are trying to do.

Thanks!
Ian Kelly
Posted: Friday, March 4, 2011 4:18:17 PM
Rank: Member
Groups: Member

Joined: 1/21/2011
Posts: 11
Hi,
Actually all I am using to format the text is the Dataformat property.

<eo:TextBoxColumn DataField="Price" HeaderText="Flyer Price" ClientSideEndEdit="CalcGP" DataFormat="{0:c2}">
<CellStyle CssText="text-align: right" />

Once the field is edited, the right-align stays, but the data format does not.
Ian
eo_support
Posted: Friday, March 4, 2011 5:09:54 PM
Rank: Administration
Groups: Administration

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

Try to handle your column's ClientSideEndEdit and then do something like this:

Code: JavaScript
function on_end_edit(cell, newValue)
{
    //Conver the string value to number value because 
    //currency format only works on number value
    return parseFloat(newValue);
}


This converts new value from "string" to "float". This should take care of it for you.

Thanks!
Ian Kelly
Posted: Monday, March 7, 2011 3:44:02 PM
Rank: Member
Groups: Member

Joined: 1/21/2011
Posts: 11
HI There,
Just got back to this. Your suggestion worked perfectly! Thanks a lot for all of your help!
Ian
eo_support
Posted: Monday, March 7, 2011 4:14:17 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
You are very welcome. Glad to hear that it works 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.