Client-side calculation in RadGrid edit mode

[Paul Wood]

I am attempting to do a simple Javascript calculation in the insert and edit forms of a RadGrid without success either by using RadAjax or the client-side API (both of which I am new to anyway). Basically OnTextChanged of field X I would like to update the value of field Y with the result of a simple formula based on the value in X.

I really don't know where to start though having spent a few hours trying to figure out the Client-side API and then after failing there, looking at how to access those field values using RadAjax and failing even more.

If someone could talk me through the methodology with some pointers as to what methods/properties etc to use, I'd be very grateful as I'm totally stuck despite the apparent simplicity, I can do it in basic Javascript in 5 minutes, but I want to know how to do it properly with the Telerik controls and no hardcoded ClientIDs!!

Here's the my Grid in its simplest form.

<telerik:GridNumericColumnEditor ID="edtGross" runat="server" NumericTextBox-Type="Currency">

<NumericTextBox ID="tbxGrossAmount" runat="server" />

</telerik:GridNumericColumnEditor>

<telerik:GridNumericColumnEditor ID="edtNet" runat="server" NumericTextBox-Type="Currency">

<NumericTextBox ID="tbxNetAmount" runat="server" />

</telerik:GridNumericColumnEditor>

<telerik:RadGrid ID="grdAccountEntryList" runat="server" Skin="Sunset" DataSourceID="sqlAccountEntryList">

<MasterTableView DataSourceID="sqlAccountEntryList" DataKeyNames="AccountEntryID"

AutoGenerateColumns="False"

AllowFilteringByColumn="True" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"

AllowAutomaticUpdates="True" AllowPaging="True" AllowSorting="True">

<Columns>

<telerik:GridNumericColumn NumericType="Currency" DataField="GrossAmount" UniqueName="GrossAmount" HeaderText="Gross" DataType="System.Decimal"

Aggregate="Sum" DataFormatString="{0:c2}" ColumnEditorID="edtGross">

</telerik:GridNumericColumn>

<telerik:GridNumericColumn NumericType="Currency" DataField="NetAmount" UniqueName="NetAmount" HeaderText="Net"

DataFormatString="{0:c2}" Aggregate="Sum" DataType="System.Decimal" ColumnEditorID="edtNet">

</telerik:GridNumericColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

[Brian]

I am having the same problem.  I would like to update one grid cell based on the user's action of updating another cell.  Any help or direction would be great!

-Brian

[Vlad]

Hi guys,

You can use similar to this example approach:
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/GridAndInput/DefaultCS.aspx?product=grid

All the best,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Brian]

Hi Vlad,

Thanks!  This will help me in one scenario.  Do you have any examples on working with the ASP.NET controls like checkbox?  The parameter information would not be there for them...

-Brian

[Paul Wood]

Thanks that's great, gave me what I needed

[Shanda Young]

Hello,
I need to perform a client side calculation on the same row.  For example, a third column's value is equal to the sum of two other columns on the same row.  In the Blur javascript function, how can I access the other RadNumericTextBoxes on the same row to perform the calculation.  This row may not be selected if the user tabs thru the grid. 

Thanks!
Shanda

[Sebastian]

Hi Shanda,

The logic for accessing the target input which displays the calculated value should be pretty much the same as shown in the online demo (pointed by my colleague Vlad), namely intercepting the OnLoad client event of the sum input.

More generalized approach about how to access server controls in grid templates client-side is demonstrated here.

Best regards,
Stephen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Paul Wood]

Since upgrading to the latest version: 2008.2.1001.35 this client-side functionality has ceased working, the client events are not getting fired at all. Here is the code that was added to / modified the original listing, however as mentioned the client events never get fired. Is this a known bug in the new version or a change?

  <telerik:RadAjaxManager ID="ajm1" runat="server">
    <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="grdAccountEntryList">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="grdAccountEntryList" />
        </UpdatedControls>
      </telerik:AjaxSetting>
    </AjaxSettings>
  </telerik:RadAjaxManager>

  <telerik:GridNumericColumnEditor ID="edtGross" runat="server" NumericTextBox-Type="Currency">
    <NumericTextBox ID="tbxGrossAmount" runat="server">
      <ClientEvents OnBlur="blurGrossAmount" />
    </NumericTextBox>
  </telerik:GridNumericColumnEditor>
  <telerik:GridNumericColumnEditor ID="edtNet" runat="server" NumericTextBox-Type="Currency">
    <NumericTextBox ID="tbxNetAmount" runat="server">
      <ClientEvents OnLoad="setNetTarget" />
    </NumericTextBox>
  </telerik:GridNumericColumnEditor>

even when adding autopostback="true" and an OnTextChanged handler on the NumericTextBoxes and removing the AjaxManager, nothing happens. If I make the column, GridTemplateColumns then a postback will occur, however I want to use the ColumnEditors for other reasons

[Pavel]

Hello Paul,

Indeed the problem can be observed with the latest version of our controls. I will notify our developers immediately and they will look into it. Please excuse us for the temporary inconvenience. For bringing this to our attention I have updated your Telerik points.

Sincerely yours,
Pavel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Paul Wood]

Since upgrading to the latest version of the controls the issue was indeed fixed. However, I now wish to add some more complexity to the calculation involving a database lookup. With this in mind, I would like to revisit the initial idea of being able to use the AjaxManager. The following post seems to suggest it is possible to target fields within a RadGrid: http://www.telerik.com/support/kb/aspnet-ajax/grid/ajaxifying-particular-controls-in-radgrid-template-column-with-ajax-manager.aspx

However as I am using ColumnEditors in my application, I'm not sure how I can do the same without reverting to TemplateColumns. Any ideas?

[Sebastian]

Hi Paul,

Assuming that you use built-in GridDropDownColumn for your grid and want to refresh an external control with ajax request by ajaxifying merely the dropdown editor for that column, you can wire the ItemCreated event of the grid and use the following code:

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e) {
if (e.Item is GridEditableItem && e.Item.IsInEditMode)
{
 GridEditableItem editedItem = e.Item as GridEditableItem;
 GridEditManager editMan = editedItem.EditManager;

 GridDropDownListColumnEditor editor = (GridDropDownListColumnEditor)(editMan.GetColumnEditor( "<MyDropDownColumnUniqueName>"));

 DropDownList ddList = editor.DropDownListControl;
 ddList.AutoPostBack = true;
 RadAjaxManager1.AjaxSettings.AddAjaxSetting(ddList, <some_other_control>, null);
}
}

Alternatively, you can access the column editor in your column as the first control in the Controls collection of the respective column cell. See this topic from the RadGrid documentation for more details.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Paul Wood]

Thanks that's perfect, I was able to modify it meet my needs with text boxes instead of the dropdown. Exactly what I was looking for.