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

Insert in RadGrid with Tooltip

 SupplierIDCompanyName ContactNameContactTitlePhone 
123
 Page 3 of 3, items 21 to 29 of 29.
26Pasta Buttini s.r.l.Giovanni GiudiciOrder Administrator(089) 6547665 Add Products
7Pavlova, Ltd.Ian DevlingMarketing Manager(03) 444-2343 Add Products
9PB Knäckebröd ABLars PetersonSales Agent031-987 65 43 Add Products
12Plutzer Lebensmittelgroßmärkte AGMartin BeinInternational Marketing Mgr.(069) 992755 Add Products
10Refrescos Americanas LTDACarlos DiazMarketing Manager(11) 555 4640 Add Products
8Specialty Biscuits, Ltd.Peter WilsonSales Representative(161) 555-4448 Add Products
17Svensk Sjöföda ABMichael BjörnSales Representative08-123 45 67 Add Products
4Tokyo TradersYoshi NagaseMarketing Manager(03) 3555-5011 Add Products
22Zaanse SnoepfabriekDirk LuchteAccounting Manager(12345) 1212 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