In this example we have one grid that is in 'callback' mode and is doing inserts and deletes. We need to rebind a second grid when the first finishes its insert/delete
The core functionality involves placing a ComponentArt Callback control on the form, and placing the second grid within it, like so:
<ComponentArt:CallBack ID="Callback1" runat="server">
<LoadingPanelClientTemplate>
<table cellspacing="20" cellpadding="0" border="0" style="background-color: White; border:solid 1px black ">
<tr>
<td style="font-size: 10px;">
Loading... </td>
<td>
</td alt="loading..." src="../images/spinner.gif" mce_src="../images/spinner.gif" width="16" height="16" border="0">
</tr>
</table>
</LoadingPanelClientTemplate>
<Content>
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<ComponentArt:Grid ID="Grid2"
RunningMode="Callback" Visible="true"
CssClass="Grid"
ShowHeader="false"
SearchTextCssClass="GridHeaderText" HeaderCssClass="GridHeader" FooterCssClass="GridFooter"
GroupByCssClass="GroupByCell" GroupByTextCssClass="GroupByText" PageSize="15"
PagerStyle="Numbered" PagerTextCssClass="GridFooterText" GroupingPageSize="5"
PreExpandOnGroup="true" ImagesBaseUrl="~/images/" TreeLineImagesFolderUrl="~/images/lines/"
TreeLineImageWidth="22" TreeLineImageHeight="19" IndentCellWidth="22" GroupingNotificationTextCssClass="GridHeaderText"
Width="300px"
runat="server">
<Levels>
<ComponentArt:GridLevel DataKeyField="dex_row_id"
ShowTableHeading="false" ShowSelectorCells="false"
RowCssClass="Row" ColumnReorderIndicatorImageUrl="reorder.gif" DataCellCssClass="DataCell"
HeadingCellCssClass="HeadingCell" HeadingCellHoverCssClass="HeadingCellHover"
AllowGrouping="false" HeadingCellActiveCssClass="HeadingCellActive" HeadingRowCssClass="HeadingRow"
HeadingTextCssClass="HeadingCellText" SelectedRowCssClass="SelectedRow" GroupHeadingCssClass="GroupHeading"
SortAscendingImageUrl="asc.gif" SortDescendingImageUrl="desc.gif" SortImageWidth="10"
SortImageHeight="5"
>
<Columns>
<ComponentArt:GridColumn DataField="dex_row_id" Visible="false" />
<ComponentArt:GridColumn DataField="locncode" HeadingText="Location" Visible="true" />
<ComponentArt:GridColumn DataField="lotnumbr" HeadingText="Lot" Visible="true" />
<ComponentArt:GridColumn DataField="qtyAvail" HeadingText="Qty Available" Visible="true" />
</Columns>
</ComponentArt:GridLevel>
</Levels>
</ComponentArt:Grid>
</asp:PlaceHolder>
</Content>
</ComponentArt:CallBack>
Then, place the following javascript on the form. Most of it is required for the grid1's 'callback' functionality, but the references to callback1 are added. More on that in a minute
<script type="text/javascript">
function Grid1_onItemBeforeDelete(sender, eventArgs)
{
if (!confirm("Delete record?"))
eventArgs.set_cancel(true);
}
function insertRow()
{
Grid1.editComplete();
<%= Callback1.ClientObjectId %>.Callback(1);
}
function deleteRow(rowId)
{
Grid1.deleteItem(Grid1.getItemFromClientId(rowId));
<%= Callback1.ClientObjectId %>.Callback(1);
}
function Grid1_onCallbackError(sender, eventArgs)
{
if (confirm('Invalid data has been entered. View details?')) alert(eventArgs.get_errorMessage());
Grid1.page(0);
}
</script>
Last, we put the following code in the code behind and we're done.
Note that in the code above we do 'Callback(1); ', the '1' is a parameter. That could be any param that you want to pass to the callback function, it is retrieved using 'e.parameter' in the Callback1_callback function.
Public Sub CallBack1_Callback(ByVal sender As Object, ByVal e As ComponentArt.Web.UI.CallBackEventArgs) Handles Callback1.Callback
'the user has chosen a new group, render the grid
bindGrid2()
Grid2.RenderControl(e.Output)
End Sub