New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Insert with Tooltip

Next database reset in 0 hours, 15 minutes, 0 seconds
 SupplierIDCompanyName ContactNameContactTitlePhone 
123
 Page 2 of 3, items 11 to 20 of 29.
11Heli Süßwaren GmbH & Co. KGPetra WinklerSales Manager(010) 9984510 Add Products
23Karkki OyAnne HeikkonenProduct Manager(953) 10956 Add Products
20Leka TradingChandra LekaOwner555-8787 Add Products
21LyngbysildNiels PetersenSales Manager43844108 Add Products
25Ma MaisonJean-Guy LauzonMarketing Manager(514) 555-9022 Add Products
6Mayumi'sMayumi OhnoMarketing Representative(06) 431-7877 Add Products
19New England Seafood CanneryRobb MerchantWholesale Account Agent(617) 555-3267 Add Products
2New Orleans Cajun DelightsShelley BurkeOrder Administrator(100) 555-4822 Add Products
13Nord-Ost-Fisch Handelsgesellschaft mbHSven PetersenCoordinator Foreign Markets(04721) 8713 Add Products
15Norske MeierierBeate VileidMarketing Manager(0)2-953010 Add Products

This example demonstrates integration between RadGrid, RadToolTip and RadAjaxLoadingPanel. 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 AjaxUpdate 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.

For initiating the insert you have to click on the "Add Products to Supplier" hyperlink, which will open the RadToolTip with the insert form.

As you cannot use the Ajax of the RadGrid when you are using the RadToolTipManager, you can display a separate RadAjaxLoadingPanel when you are making Ajax requests.

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

  • DefaultVB.aspx
  • AddProductsVB.ascx
    • AddProductsVB.ascx
    • NewProductFormVB.ascx
  • AddProductsVB.ascx.vb
    • AddProductsVB.ascx.vb
    • DefaultVB.aspx.vb
    • NewProductFormVB.ascx.vb
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.ToolTip.Integration.ToolTipGrid.DefaultVB" %>

<%@ Register Src="AddProductsVB.ascx" TagName="AddProducts" TagPrefix="uc2" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <style type="text/css">
      div.RadToolTip_Material {
            height :600px !important;
           
        }
      div.RadToolTip_Bootstrap {
            height :550px !important;
           
        }
      
        
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadCodeBlock runat="server" ID="RadCodeBlock">
        <script type="text/javascript">
            function CloseActiveToolTip(supplierID)
            {
                var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
                if (tooltip) tooltip.hide();

                if (supplierID)
                {
                    //Rebind the DetailTable.
                    setTimeout(function ()
                    {
                        __doPostBack("<%= RadGrid1.UniqueID %>", "DetailTableUpdated:" + supplierID);
                    }, 100);
                }
            }     

        </script>
    </telerik:RadCodeBlock>
<div class="demo-container no-bg">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" Width="100%"
                AutoGenerateColumns="False" PageSize="10" AllowSorting="True" AllowPaging="True"
                GridLines="None" ShowStatusBar="true" OnItemDataBound="RadGrid1_ItemDataBound"
                OnDataBound="RadGrid1_DataBound">
                <PagerStyle Mode="NumericPages"></PagerStyle>
                <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="SupplierID" AllowMultiColumnSorting="True"
                    Width="100%" HierarchyLoadMode="ServerOnDemand">
                    <DetailTables>
                        <telerik:GridTableView DataKeyNames="ProductID" DataSourceID="SqlDataSource2" Width="100%"
                            runat="server">
                            <ParentTableRelation>
                                <telerik:GridRelationFields DetailKeyField="SupplierID" MasterKeyField="SupplierID">
                                </telerik:GridRelationFields>
                            </ParentTableRelation>
                            <Columns>
                                <telerik:GridBoundColumn SortExpression="ProductName" HeaderText="Product name" HeaderButtonType="TextButton"
                                    DataField="ProductName" UniqueName="ProductName">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn SortExpression="QuantityPerUnit" HeaderText="Quantity per unit"
                                    HeaderButtonType="TextButton" DataField="QuantityPerUnit" UniqueName="QuantityPerUnit">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn SortExpression="UnitsInStock" HeaderText="Units in stock"
                                    HeaderButtonType="TextButton" DataField="UnitsInStock" UniqueName="UnitsInStock">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn SortExpression="UnitsOnOrder" HeaderText="Units on order"
                                    HeaderButtonType="TextButton" DataField="UnitsOnOrder" UniqueName="UnitsOnOrder">
                                </telerik:GridBoundColumn>
                            </Columns>
                            <SortExpressions>
                                <telerik:GridSortExpression FieldName="ProductName"></telerik:GridSortExpression>
                            </SortExpressions>
                        </telerik:GridTableView>
                    </DetailTables>
                    <Columns>
                        <telerik:GridBoundColumn DataField="SupplierID" DataType="System.Int32" HeaderText="SupplierID"
                            SortExpression="SupplierID" UniqueName="SupplierID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName"
                            UniqueName="CompanyName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName"
                            UniqueName="ContactName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle"
                            UniqueName="ContactTitle">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Phone" HeaderText="Phone" SortExpression="Phone"
                            UniqueName="Phone">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn UniqueName="AddProducts">
                            <ItemTemplate>
                                <asp:HyperLink runat="server" NavigateUrl="#" onclick="return false;" Text="Add Products"
                                    ID="hlAddProducts">
                                </asp:HyperLink>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                    <SortExpressions>
                        <telerik:GridSortExpression FieldName="CompanyName"></telerik:GridSortExpression>
                    </SortExpressions>
                </MasterTableView>
            </telerik:RadGrid>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
                SelectCommand="SELECT * FROM [Suppliers]"></asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
                SelectCommand="SELECT * FROM [Products] WHERE (SupplierID = @SupplierID)" InsertCommand="INSERT INTO [Products] ([SupplierID], [ProductName], [QuantityPerUnit], [UnitsInStock], [UnitsOnOrder]) VALUES (@SupplierID, @ProductName, @QuantityPerUnit, @UnitsInStock, @UnitsOnOrder)">
                <SelectParameters>
                    <asp:Parameter Name="SupplierID" Type="Int32"></asp:Parameter>
                </SelectParameters>
                <InsertParameters>
                    <asp:Parameter Name="SupplierID" Type="Int32"></asp:Parameter>
                    <asp:Parameter Name="ProductName" Type="String"></asp:Parameter>
                    <asp:Parameter Name="QuantityPerUnit" Type="String"></asp:Parameter>
                    <asp:Parameter Name="UnitsInStock" Type="Int32"></asp:Parameter>
                    <asp:Parameter Name="UnitsOnOrder" Type="Int32"></asp:Parameter>
                </InsertParameters>
            </asp:SqlDataSource>
                   <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" runat="server" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate"
                RelativeTo="Element" Width="235px" Height="500px" Style="z-index: 31000" Position="BottomLeft"
                HideEvent="ManualClose" Title="Products" ShowEvent="OnClick">
            </telerik:RadToolTipManager>
        </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance