Telerik UI for ASP.NET AJAX

This online example demonstrates integration between RadGrid, RadToolTip and RadAjax. The example shows how to insert several new records in the grid with a single button click using Ajax requests.

The control, containing the fields for the new records is added to the content of the RadToolTip when the OnAjaxUpdate event of the RadToolTipManager fires. Once the user hits the [Add Products] button, the new records are inserted into the datatable, the active tooltip is closed and the the appropriate nested table is rebound.

As you cannot display RadAjax loading panel when you are using the RadToolTipManager in this case and generate dynamically the tooltip content, you can display a separate RadAjaxLoadingPanel when you are making Ajax requests.


In order to see the new records, you have to expand the corresponding item in the MasterTableView.

Below are the code snippets from the demo referred above:

<asp:Button ID="btnAddNewProduct" runat="server" Text="Add more" UseSubmitBehavior="false"
  OnClick="btnAddNewProduct_Click" /><br />
  <br />
  <span style="color: Red">You must fill all inputs before adding extra fields or inserting
    the product</span>
  <br />
  <br />
  <asp:Panel ID="pNewProducts" runat="server" Width="200px" Style="float: left;">
  <div style="clear: both; height: 1px; margin-bottom: -1px;">
    <!-- -->
  <br />
<asp:Button ID="btnAddProducts" runat="server" Text="Add products" OnClick="btnAddProducts_Click"
  UseSubmitBehavior="false" />