Call javascript when Row is Updated and Grid is Refreshed

[Jeremy Yoder]

I feel I'm doing this the hard way, and I'm hoping you can set me straight. I have a grid with EditMode="PopUp" and EditFormType="Template". In this grid's FormTemplate, I have the following save image to click...

<asp:ImageButton ID="imgSave" runat="server" TabIndex="120" AlternateText="Save"
ImageUrl="~/images/icons/save-24.jpg" ToolTip="Save"
CommandName='<%# IIf (TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>' />

Before it saves, I validate certain data. So in the grid's ItemDataBound event, I assign to the imgSave's "onclick" attribute a javascript function with various control ClientIDs in the popup. If certain conditions fail, javascript gives an alert and does "return false" to keep the popup from closing. If the data is good, I "return true" to let the popup close and refresh the grid's data. It works well.

Now this is where I've goofed up. What I want, is after the grid is rebound/refreshed, I want to highlight the edited row and display certain stats beneath the grid. I've written the code, but don't know how to call it. Is there an event I can tie to my javascript function? (I tried OnActiveRowChanged, but it didn't fire.)

To get around this, just before my "return true" that closes the popup form, I added these two lines of code...

var f = function() { UpdateStatusBar(iKey); };
setTimeout(f, 1000);
return true;

Having the 1 second delay gives the grid time to rebind/refresh before calling my UpdateStatusBar function, but that's open to timing issues. What should I do instead?

[Tsvetoslav]

Hi Jeremy,

When updating an item in the grid, the control will certainly do a postback to the server, so it is much easier to implement your logic on the server, then on the client. Just attach an event handler to grid's ItemUpdated event and update your statur bar in it. Then in the ItemDataBound event you can select the updated item as demonstrated in the attached sample.

Greetings,
Tsvetoslav
the Telerik team

[Jeremy Yoder]

I was only now able to get back to this. Thanks for the reply and sample. For some reason, my ItemUpdated event is not called. However, I'm not sure that matters given the following...

I have my statusbar update logic in javascript because whenever the user clicks a row, it calls it via OnRowSelected without doing a postback to the server. So that's the function I really want to call, but I can't figure out how to also call it after the grid has refreshed and rebound to the data, which is after the row is updated/inserted (as described in the original post). Is there no way to do it?

[Tsvetoslav]

Hello Jeremy,

If you insist on accomplishing your requirement client-side, you can register a start up script from the server passing to it the client function you have described. For example, let's say your function is UpdateStatusBar and it takes one argument - the index of the row which has been updated. Having this in mind, on the server, upon the update command you can register the startup script as follows:

protected void Page_PreRender(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, typeof(Page), "scriptKey", String.Format("UpdateStatusBar({0})", itemIndex), true);
}

Then on the client, in the UpdateStatusBar, you can get hold of the data row as follows:

$find('<%=RadGrid1.ClientID').get_masterTableView().get_dataItems()[iKey]

Hope it helps.

Greetings,
Tsvetoslav
the Telerik team

[Jeremy Yoder]

Unfortunately, the $find for my grid in javascript, when registered through the PreRender, returns null.

[Tsvetoslav]

Hello Jeremy,

I suspect the reason is due the client components of the controls not being loaded at the time when the start-up script fires. In this case, one viable solution to the problem is to add a Hidden field to the page, then server-side assign to it whatever information is needed and on the client get this information from the hidden field through dom operations.

Greetings,
Tsvetoslav
the Telerik team