Insert in Grid with Tooltip
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:ScriptManager ID="ScriptManager1" runat="server" />
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" Width="700px"
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" />
</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>
<ExpandCollapseColumn Visible="False">
<HeaderStyle Width="19px" />
</ExpandCollapseColumn>
<RowIndicatorColumn Visible="False">
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<EditFormSettings>
<EditColumn UniqueName="EditCommandColumn1">
</EditColumn>
</EditFormSettings>
</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>
<ExpandCollapseColumn>
<HeaderStyle Width="19px" />
</ExpandCollapseColumn>
<RowIndicatorColumn Visible="False">
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
</MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Suppliers">
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Products WHERE (SupplierID = @SupplierID)">
<SelectParameters>
<asp:SessionParameter Name="SupplierID" SessionField="SupplierID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" runat="server" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate"
RelativeTo="Element" Width="225px" Height="390px" style="z-index: 31000" Position="BottomLeft" HideEvent="ManualClose"
Title="Products" ShowEvent="OnClick">
</telerik:RadToolTipManager>
</ContentTemplate>
</asp:UpdatePanel>
private Hashtable supplierIDs = new Hashtable();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
RadGrid1.SelectedIndexes.Add(0, 0, 0);
}
}
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
{
Control hpAddProducts = e.Item.FindControl("hlAddProducts");
if (!Object.Equals(hpAddProducts, null))
{
if (!Object.Equals(this.RadToolTipManager1, null))
{
this.RadToolTipManager1.TargetControls.Add(hpAddProducts.ClientID, true);
DataRowView currentRow = (DataRowView)e.Item.DataItem;
if (!this.supplierIDs.ContainsKey(hpAddProducts.ClientID))
{
this.supplierIDs.Add(hpAddProducts.ClientID, currentRow.Row["SupplierID"].ToString());
}
}
}
}
}
protected void RadToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
{
AddProductsCS ctrlAddProducts = (AddProductsCS)Page.LoadControl("AddProductsCS.ascx");
Hashtable sessionSupplierIDs = (Hashtable)Session["supplierIDs"];
_currentSupplier = sessionSupplierIDs[e.TargetControlID].ToString();
ctrlAddProducts.ID = _currentSupplier;
e.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrlAddProducts);
}
protected void RadGrid1_DataBound(object sender, EventArgs e)
{
Session["supplierIDs"] = this.supplierIDs;
}
private string _currentSupplier = null;
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
if (!Object.Equals(_currentSupplier, null))
{
this.SessionDataSource2.SelectParameters["SupplierID"].DefaultValue = _currentSupplier;
}
}
protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)
{
base.RaisePostBackEvent(source, eventArgument);
if (this.RadGrid1.Equals(source) && eventArgument.IndexOf("DetailTableUpdated") != -1)
{
int index = -1;
//The lenght of the string "DetailTableUpdated" is 18.
string keyValue = eventArgument.Substring(19);
foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
{
string keyValues = item.KeyValues;
if (keyValues.IndexOf("SupplierID") != -1 && keyValues.Substring(13, keyValues.Length - 15).Equals(keyValue))
{
index = item.ItemIndex;
break;
}
}
if (index != -1)
{
GridTableView nestedTableView = (RadGrid1.MasterTableView.Items[index] as GridDataItem).ChildItem.NestedTableViews[0];
nestedTableView.Rebind();
}
}
}
Private supplierIDs As New Hashtable()
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If Not Page.IsPostBack Then
RadGrid1.SelectedIndexes.Add(0, 0, 0)
End If
End Sub
Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
If e.Item.ItemType = GridItemType.Item OrElse e.Item.ItemType = GridItemType.AlternatingItem Then
Dim hpAddProducts As Control = e.Item.FindControl("hlAddProducts")
If Not [Object].Equals(hpAddProducts, Nothing) Then
If Not [Object].Equals(Me.RadToolTipManager1, Nothing) Then
Me.RadToolTipManager1.TargetControls.Add(hpAddProducts.ClientID, True)
Dim currentRow As DataRowView = DirectCast(e.Item.DataItem, DataRowView)
If Not Me.supplierIDs.ContainsKey(hpAddProducts.ClientID) Then
Me.supplierIDs.Add(hpAddProducts.ClientID, currentRow.Row("SupplierID").ToString())
End If
End If
End If
End If
End Sub
Protected Sub RadToolTipManager1_AjaxUpdate(ByVal sender As Object, ByVal e As ToolTipUpdateEventArgs)
Dim ctrlAddProducts As AddProductsVB = DirectCast(Page.LoadControl("AddProductsVB.ascx"), AddProductsVB)
Dim sessionSupplierIDs As Hashtable = DirectCast(Session("supplierIDs"), Hashtable)
_currentSupplier = sessionSupplierIDs(e.TargetControlID).ToString()
ctrlAddProducts.ID = _currentSupplier
e.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrlAddProducts)
End Sub
Protected Sub RadGrid1_DataBound(ByVal sender As Object, ByVal e As EventArgs)
Session("supplierIDs") = Me.supplierIDs
End Sub
Private _currentSupplier As String = Nothing
Protected Overloads Overrides Sub OnPreRender(ByVal e As EventArgs)
MyBase.OnPreRender(e)
If Not [Object].Equals(_currentSupplier, Nothing) Then
Me.SessionDataSource2.SelectParameters("SupplierID").DefaultValue = _currentSupplier
End If
End Sub
Protected Overloads Overrides Sub RaisePostBackEvent(ByVal source As IPostBackEventHandler, ByVal eventArgument As String)
MyBase.RaisePostBackEvent(source, eventArgument)
If Me.RadGrid1.Equals(source) AndAlso eventArgument.IndexOf("DetailTableUpdated") <> -1 Then
Dim index As Integer = -1
Dim keyValue As String = eventArgument.Substring(19)
For Each item As GridDataItem In RadGrid1.MasterTableView.Items
Dim keyValues As String = item.KeyValues
If keyValues.IndexOf("SupplierID") <> -1 AndAlso keyValues.Substring(13, keyValues.Length - 15).Equals(keyValue) Then
index = item.ItemIndex
Exit For
End If
Next
If index <> -1 Then
Dim nestedTableView As GridTableView = (TryCast(RadGrid1.MasterTableView.Items(index), GridDataItem)).ChildItem.NestedTableViews(0)
nestedTableView.Rebind()
End If
End If
End Sub
<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;">
</asp:Panel>
<div style="clear: both; height: 1px; margin-bottom: -1px;">
<!-- -->
</div>
<br />
<asp:Button ID="btnAddProducts" runat="server" Text="Add products" OnClick="btnAddProducts_Click"
UseSubmitBehavior="false" />
private int _loadedControls = 0;
private bool _isPostBack = false;
protected void Page_Load(object sender, EventArgs e)
{
if (!_isPostBack)
{
AddInitialNewProducts();
}
}
protected void AddInitialNewProducts()
{
this.pNewProducts.Controls.Add(LoadProduct(LoadedControls));
LoadedControls++;
this.pNewProducts.Controls.Add(LoadProduct(LoadedControls));
LoadedControls++;
}
protected void btnAddNewProduct_Click(object sender, EventArgs e)
{
this.pNewProducts.Controls.Add(LoadProduct(LoadedControls));
LoadedControls++;
}
protected void btnAddProducts_Click(object sender, EventArgs e)
{
ControlCollection newProductsFields = this.pNewProducts.Controls;
ArrayList newProducts = new ArrayList();
foreach (Control newProduct in newProductsFields)
{
if ((newProduct is NewProductFormCS) && ((NewProductFormCS)newProduct).ProductName != String.Empty)
{
newProducts.Add(newProduct);
}
}
if (newProducts.Count > 0)
{
foreach (Control newProduct in newProducts)
{
NewProductFormCS product = (NewProductFormCS)newProduct;
SessionDataSource products = (SessionDataSource)Page.FindControl("SessionDataSource2");
if (products != null)
{
IDataSource dataSource = (IDataSource)products;
DataSourceView view = dataSource.GetView("DefaultView");
IOrderedDictionary data = new OrderedDictionary();
data.Add("ProductName", product.ProductName);
data.Add("QuantityPerUnit", product.QuantityPerUnit);
data.Add("UnitsInStock", product.UnitsInStock);
data.Add("UnitsOnOrder", product.UnitsOnOrder);
data.Add("SupplierID", this.ID);
view.Insert(data, new DataSourceViewOperationCallback(OnDataSourceOperationComplete));
}
}
}
//Close the active ToolTip.
ScriptManager.RegisterClientScriptBlock(
this.Page,
this.GetType(),
"WebUserControlSript",
"CloseActiveToolTip('" + this.ID + "')",
true);
}
private bool OnDataSourceOperationComplete(int count, Exception e)
{
if (e != null)
{
throw e;
}
return true;
}
private Control LoadProduct(int index)
{
Control product = Page.LoadControl("NewProductFormCS.ascx");
product.ID = "MyControl" + index.ToString();
return product;
}
protected override void LoadViewState(object savedState)
{
object[] state = (object[])savedState;
LoadedControls = (int)state[0];
string controlID = (string)state[1];
if (controlID == this.ID)
{
for (int i = 0; i < LoadedControls; i++)
{
pNewProducts.Controls.Add(LoadProduct(i));
}
_isPostBack = true;
}
else
{
_loadedControls = 0;
_isPostBack = false;
}
base.LoadViewState(state[2]);
}
protected override object SaveViewState()
{
object[] state = new object[] {
LoadedControls,
this.ID,
base.SaveViewState()
};
return state;
}
public int LoadedControls
{
get
{
return _loadedControls;
}
set
{
_loadedControls = value;
}
}
Private _loadedControls As Integer = 0
Private _isPostBack As Boolean = False
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If Not _isPostBack Then
AddInitialNewProducts()
End If
End Sub
Protected Sub AddInitialNewProducts()
Me.pNewProducts.Controls.Add(LoadProduct(LoadedControls))
LoadedControls += 1
Me.pNewProducts.Controls.Add(LoadProduct(LoadedControls))
LoadedControls += 1
End Sub
Protected Sub btnAddNewProduct_Click(ByVal sender As Object, ByVal e As EventArgs)
Me.pNewProducts.Controls.Add(LoadProduct(LoadedControls))
LoadedControls += 1
End Sub
Protected Sub btnAddProducts_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim newProductsFields As ControlCollection = Me.pNewProducts.Controls
Dim newProducts As New ArrayList()
For Each newProduct As Control In newProductsFields
If (TypeOf newProduct Is NewProductFormVB) AndAlso DirectCast(newProduct, NewProductFormVB).ProductName <> [String].Empty Then
newProducts.Add(newProduct)
End If
Next
If newProducts.Count > 0 Then
For Each newProduct As Control In newProducts
Dim product As NewProductFormVB = DirectCast(newProduct, NewProductFormVB)
Dim products As SessionDataSource = DirectCast(Page.FindControl("SessionDataSource2"), SessionDataSource)
If products IsNot Nothing Then
Dim dataSource As IDataSource = DirectCast(products, IDataSource)
Dim view As DataSourceView = dataSource.GetView("DefaultView")
Dim data As IOrderedDictionary = New OrderedDictionary()
data.Add("ProductName", product.ProductName)
data.Add("QuantityPerUnit", product.QuantityPerUnit)
data.Add("UnitsInStock", product.UnitsInStock)
data.Add("UnitsOnOrder", product.UnitsOnOrder)
data.Add("SupplierID", Me.ID)
view.Insert(data, New DataSourceViewOperationCallback(AddressOf OnDataSourceOperationComplete))
End If
Next
End If
'Close the active ToolTip.
ScriptManager.RegisterClientScriptBlock(Me.Page, Me.[GetType](), "WebUserControlSript", "CloseActiveToolTip('" & Convert.ToString(Me.ID) & "')", True)
End Sub
Private Function OnDataSourceOperationComplete(ByVal count As Integer, ByVal e As Exception) As Boolean
If e IsNot Nothing Then
Throw e
End If
Return True
End Function
Private Function LoadProduct(ByVal index As Integer) As Control
Dim product As Control = Page.LoadControl("NewProductFormVB.ascx")
product.ID = "MyControl" & index.ToString()
Return product
End Function
Protected Overrides Sub LoadViewState(ByVal savedState As Object)
Dim state As Object() = DirectCast(savedState, Object())
LoadedControls = CInt(state(0))
Dim controlID As String = DirectCast(state(1), String)
If controlID = Me.ID Then
For i As Integer = 0 To LoadedControls - 1
pNewProducts.Controls.Add(LoadProduct(i))
Next
_isPostBack = True
Else
_loadedControls = 0
_isPostBack = False
End If
MyBase.LoadViewState(state(2))
End Sub
Protected Overrides Function SaveViewState() As Object
Dim state As Object() = New Object() {LoadedControls, Me.ID, MyBase.SaveViewState()}
Return state
End Function
Public Property LoadedControls() As Integer
Get
Return _loadedControls
End Get
Set(ByVal value As Integer)
_loadedControls = value
End Set
End Property