I have been through the different examples of using MasterPages and UserControls with RadAjax for a couple of days. I have gotten pretty far. Here is my masterpage (relevant sections only):
Here is my Default.aspx:
Default.aspx.cs:
And the user control MyGrid.ascx:
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableHistory="True" /> |
| <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" height="75px" width="75px" Transparency="10"> |
| <asp:Image ID="Image1" ImageUrl="~/Img/Loading.gif" BorderWidth="0px" AlternateText="Loading" |
| runat="server" Style="margin-top: 45px;"></asp:Image> |
| </telerik:RadAjaxLoadingPanel> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%"> |
| <telerik:RadPane ID="navigationPane" runat="server" Height="100%" Width="150"> |
| <!-- Navigation elements --> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="NavigationSplitBar" runat="server" CollapseMode="Forward"></telerik:RadSplitBar> |
| <telerik:RadPane ID="contentPane" runat="server" Scrolling="none"> |
| <telerik:RadSplitter ID="MasterDetailSplitter" runat="server" Orientation="Horizontal"> |
| <telerik:RadPane ID="topPane" runat="server"> |
| <asp:ContentPlaceHolder ID="MainPlaceHolder" runat="server" /> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="MasterDetailSplitBar" runat="server" CollapseMode="Both" Height="50%"></telerik:RadSplitBar> |
| <telerik:RadPane ID="bottomPane" runat="server" Height="50%"> |
| <asp:ContentPlaceHolder ID="DetailPlaceHolder" runat="server" /> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
Here is my Default.aspx:
| <asp:Content ContentPlaceHolderID="MainPlaceHolder" ID="Content1" runat="server"> |
| <uc1:MyGrid ID="MyGrid" runat="server"/> |
| </asp:Content> |
| <asp:Content ContentPlaceHolderID="DetailPlaceHolder" ID="Content2" runat="server"> |
| <asp:Panel ID="DetailPanel1" runat="server" /> |
| </asp:Content> |
Default.aspx.cs:
| RadAjaxManager ajaxManager = Master.FindControl("RadAjaxManager1") as RadAjaxManager; |
| Control mainPlaceHolder = Master.FindControl("MainPlaceHolder"); |
| Control personnelGroupsGrid = mainPlaceHolder.FindControl("PersonnelGroupGrid1"); |
| Control detailPlaceHolder = Master.FindControl("DetailPlaceHolder"); |
| Control detailPanel = detailPlaceHolder.FindControl("DetailPanel1"); |
| RadAjaxLoadingPanel ajaxLoadingPanel = Master.FindControl("RadAjaxLoadingPanel1") as RadAjaxLoadingPanel; |
| ajaxManager.AjaxSettings.AddAjaxSetting(personnelGroupsGrid, detailPanel, ajaxLoadingPanel); |
| //Render user control |
| if (IsPostBack) |
| { |
| Control c = GetRequiredPostBackControl(this); |
| if (c.ID == "btnEdit") |
| { |
| LoadUserControl("~/UserControls/MyGrid.ascx", detailPanel); |
| } |
| } |
And the user control MyGrid.ascx:
| <radG:RadGrid ID="MyGrid1" runat="server" AutoGenerateColumns="False" GridLines="Horizontal" |
| PageSize="4" AllowMultiRowEdit="True" AllowAutomaticDeletes="True" |
| Width="476px" DataSourceID="XmlDataSource1" EnableAJAX="False"> |
| <MasterTableView CommandItemDisplay="Top" TableLayout="Fixed" DataSourceID="XmlDataSource1"> |
| <CommandItemTemplate> |
| <!-- Command bar and tool tips --> |
| <asp:ImageButton ID="btnNew" runat="server" CausesValidation="false" ImageUrl="../Img/Add_Image.png" /> |
| <!-- snip --> |
| </CommandItemTemplate> |
| <ExpandCollapseColumn Resizable="False" Visible="False"> |
| <HeaderStyle Width="20px" /> |
| </ExpandCollapseColumn> |
| <RowIndicatorColumn Visible="False"> |
| <HeaderStyle Width="20px" /> |
| </RowIndicatorColumn> |
| <Columns> |
| <radG:GridBoundColumn DataField="name" HeaderText="Name" SortExpression="name" UniqueName="name"> |
| </radG:GridBoundColumn> |
| <radG:GridBoundColumn DataField="description" HeaderText="Description" SortExpression="description" UniqueName="description"> |
| </radG:GridBoundColumn> |
| </Columns> |
| </MasterTableView> |
| <ClientSettings> |
| <ClientEvents OnRowSelected="RowSelected" /> |
| <Selecting AllowRowSelect="True" /> |
| </ClientSettings> |
| <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle> |
| </radG:RadGrid> |