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

Insert with Tooltip

Next database reset in 0 hours, 11 minutes, 6 seconds
 SupplierIDCompanyName ContactNameContactTitlePhone 
123
 Page 1 of 3, items 1 to 10 of 29.
18Aux joyeux ecclésiastiquesGuylène NodierSales Manager(1) 03.83.00.68 Add Products to Supplier
 
Product name Quantity per unitUnits in stockUnits on order
Chartreuse verte750 cc per bottle690
Côte de Blaye12 - 75 cl bottles170
16Bigfoot BreweriesCheryl SaylorRegional Account Rep.(503) 555-9931 Add Products to Supplier
5Cooperativa de Quesos 'Las Cabras'Antonio del Valle SaavedraExport Administrator(98) 598 76 54 Add Products to Supplier
27Escargots NouveauxMarie DelamareSales Manager85.57.00.07 Add Products to Supplier
1Exotic LiquidsCharlotte CooperPurchasing Manager(171) 555-2222 Add Products to Supplier
29Forêts d'érablesChantal GouletAccounting Manager(514) 555-2955 Add Products to Supplier
14Formaggi Fortini s.r.l.Elio RossiSales Representative(0544) 60323 Add Products to Supplier
28Gai pâturageEliane NozSales Representative38.76.98.06 Add Products to Supplier
24G'day, MateWendy MackenzieSales Representative(02) 555-5914 Add Products to Supplier
3Grandma Kelly's HomesteadRegina MurphySales Representative(313) 555-5735 Add Products to Supplier

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.

  • DefaultCS.aspx
  • AddProductsCS.ascx
    • AddProductsCS.ascx
    • NewProductFormCS.ascx
  • AddProductsCS.ascx.cs
    • AddProductsCS.ascx.cs
    • DefaultCS.aspx.cs
    • NewProductFormCS.ascx.cs
<%@ Page Language="C#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.Integration.ToolTipGrid.DefaultCS" %>

<%@ Register Src="AddProductsCS.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 to Supplier"
                                    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