Radwindow inside UserControl

[July]

Hi!
This is my scenario
- I have a Grid with a top menu as user control with options such as "Delete Selected"
- When user click on "Delete Selected" . a radwindows is open. The radwindow user COntentTemplate, because I need set height:150px and width.

My Grid:


the aspx of Grid:

<%@ Page Title="" Language="C#" MasterPageFile="~/UI/Doculex.Master" AutoEventWireup="true"
    CodeBehind="Fields.aspx.cs" Inherits="WebSearch.UI.Admin.Fields" %>

<%@ Register TagPrefix="UC" TagName="header" Src="~/UI/UserControls/Header.ascx" %>
<%@ Register TagPrefix="UC" TagName="AddButtons" Src="~/UI/Admin/UserControls/Grid/AddTopButtons.ascx" %>
<%@ Register TagPrefix="UC" TagName="DeleteDialog" Src="/UI/Admin/UserControls/Grid/Popups/DeleteSelected.ascx" %>
<%@ Register TagPrefix="UC" TagName="EnableDialog" Src="/UI/Admin/UserControls/Grid/Popups/EnableSelected.ascx" %>
<%@ Register TagPrefix="UC" TagName="DisableDialog" Src="/UI/Admin/UserControls/Grid/Popups/DisableSelected.ascx" %>
<%@ MasterType VirtualPath="~/UI/Doculex.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="/UI/Style/Admin/Admin.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/UI/Admin/Scripts/Form.js"></script>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">

            function showDeleteSelectedDialog() {      //OPEN DELETE SELECTED RADWINDOW


                var rgGrid = $find("<%= Grid.ClientID %>");
                var oWindow = $find('<%=DeleteSelected.ClientID%>' + "_DeleteDialog");
                if (oWindow == null)
                    oWindow = $find("ctl00_" + '<%=DeleteSelected.ClientID%>' + "_DeleteDialog");
                if (rgGrid == null || oWindow == null) return false;

                ShowDeleteSelectedDialog(rgGrid, oWindow);
                return false;
            }

          
            function ShowEditForm(id, rowIndex) {
                var grid = $find("<%= Grid.ClientID %>");
                var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
                var oWindow = window.radopen("FieldForm.aspx?ID=" + id, "FieldDialog");
                return false;
            }

            function showInsertForm() { var oWindow = window.radopen("FieldForm.aspx", "FieldDialog"); }



            function refreshGrid(arg) {

                if (arg != null) { $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(arg); }
                else {
                    if (arg) {
                        $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(arg);
                    }
                    else {
                        $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("RebindAndNavigate");
                    }
                }
            }



            function rowDblClick(sender, eventArgs) {
                editedRow = eventArgs.get_itemIndexHierarchical();
                $find("<%= Grid.ClientID %>").get_masterTableView().editItem(editedRow);
            }



            function ValueChanged(sender, args) {
                //var SenderId = sender.get_element().id;
                var SenderId = sender.get_id();

                var txtNameId = $("#" + SenderId).get(0);

                var txtName = $telerik.findTextBox(SenderId.replace("txtName", "txtName"));
                var text = txtName.get_value();
                var txtId = $telerik.findTextBox(SenderId.replace("txtName", "txtId"));


                var txtHeader = $telerik.findTextBox(SenderId.replace("txtName", "txtHeader"));
                txtHeader.set_value(text);


            }


        </script>
    </telerik:RadCodeBlock>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <telerik:RadAjaxLoadingPanel runat="server" Skin="Vista" ID="LoadginPanel1" IsSticky="true"
        CssClass="LoadingPanel" />
    <telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Grid" LoadingPanelID="LoadginPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Grid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Grid" LoadingPanelID="LoadginPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnDelete">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Grid" LoadingPanelID="LoadginPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <UC:header runat="server" ID="headerPage" />
    <div id="containerSubWHelp">
        <telerik:RadGrid ID="Grid" runat="server" AutoGenerateColumns="False" OnNeedDataSource="FieldsGrid_NeedDataSource"
            OnUpdateCommand="FieldsGrid_UpdateCommand" OnInsertCommand="FieldsGrid_InsertCommand"
            OnItemCommand="FieldsGrid_ItemCommand" OnPreRender="FieldsGrid_PreRender" OnItemCreated="FieldsGrid_ItemCreated"
            OnDeleteCommand="FieldsGrid_DeleteCommand" OnItemDataBound="FieldsGrid_ItemDataBound">
            <MasterTableView DataKeyNames="Id" ClientDataKeyNames="Id,Name,Header">
                <Columns>
                    <telerik:GridClientSelectColumn CommandName="Select" UniqueName="Select" HeaderStyle-Width="28px"
                        Resizable="false" Reorderable="false">
                    </telerik:GridClientSelectColumn>
                    <telerik:GridTemplateColumn UniqueName="IsActive" DataField="IsActive" Reorderable="false"
                        HeaderStyle-Width="55px" AllowFiltering="true" Resizable="false">
                        <ItemTemplate>
                            <asp:ImageButton ID="ActiveIcon" runat="server" CommandName="Active"></asp:ImageButton>
                            <asp:CheckBox ID="lblIsActive" runat="server" Checked='<%# (DataBinder.Eval(Container.DataItem,"IsActive") is DBNull ?false:Eval("IsActive")) %>'
                                Visible="false" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="TemplateEditColumn" HeaderStyle-Width="28px"
                        Reorderable="false" AllowFiltering="false" Resizable="false">
                        <ItemTemplate>
                            <asp:ImageButton ID="EditLink" runat="server" ImageUrl="/UI/Images/pencil.png"></asp:ImageButton>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridEditCommandColumn HeaderStyle-Width="28px" UniqueName="EditCommandColumn"
                        Reorderable="false" ButtonType="ImageButton" EditImageUrl="/UI/Images/grid_edit.png"
                        Resizable="false">
                    </telerik:GridEditCommandColumn>
                    <telerik:GridButtonColumn UniqueName="btnDelete" ConfirmDialogType="RadWindow" ButtonType="ImageButton"
                        Reorderable="false" CommandName="Delete" ConfirmDialogHeight="100px" ConfirmDialogWidth="300px"
                        HeaderStyle-Width="28px" Resizable="false" ImageUrl="/UI/Images/cross.png" />
                    <telerik:GridTemplateColumn DataField="Id" UniqueName="Id" Visible="false">
                        <InsertItemTemplate>
                            <telerik:RadTextBox ID="txtIdInsert" runat="server" Text='<%# Bind("Id") %>' ReadOnly="true"
                                Enabled="false" />
                        </InsertItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadTextBox ID="txtId" runat="server" Text='<%# Eval("Id") %>' ReadOnly="true" />
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="Name" DataField="Name">
                        <EditItemTemplate>
                            <asp:TextBox ID="txtName" Width="120px" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>'>                             
                            </asp:TextBox>
                            <br />
                            <asp:RequiredFieldValidator ID="rfName" runat="server" ErrorMessage="*" Display="Dynamic"
                                ControlToValidate="txtName" CssClass="validator" />
                            <asp:CustomValidator ID="cvName" runat="server" Display="Dynamic" CssClass="validator"
                                ControlToValidate="txtName" OnServerValidate="cvName_ServerValidate" />
                            <asp:RegularExpressionValidator ID="reName" ControlToValidate="txtName" runat="server"
                                ValidationExpression="^[0-9a-zA-Z\s]{1,125}$" CssClass="validator" Display="Dynamic" />
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="Header" DataField="Header">
                        <EditItemTemplate>
                            <asp:TextBox ID="txtHeader" Width="120px" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Header") %>' />
                            <br />
                            <asp:RequiredFieldValidator ID="RFHeader" runat="server" ErrorMessage="*" CssClass="validator"
                                ControlToValidate="txtHeader" Display="Dynamic" />
                            <asp:CustomValidator ID="cvHeader" CssClass="validator" Display="Dynamic" runat="server"
                                ControlToValidate="txtHeader" />
                            <asp:RegularExpressionValidator ID="reHeader" ControlToValidate="txtHeader" runat="server"
                                ValidationExpression="^[0-9a-zA-Z\s]{1,125}$" CssClass="validator" Display="Dynamic" />
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblHeader" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Header") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="DataType" DataField="DataType">
                        <EditItemTemplate>
                            <telerik:RadComboBox runat="server" ID="cbDataType" EnableLoadOnDemand="True" DataTextField="DataType"
                                DataValueField="Id" HighlightTemplatedItems="true" Width="150px" AutoPostBack="true" />
                            <br />
                            <asp:RequiredFieldValidator ID="frSecurity" runat="server" ErrorMessage="*" CssClass="validator"
                                Display="Dynamic" ControlToValidate="cbDataType"></asp:RequiredFieldValidator>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblDatatype" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "DataType") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="IsInput" DataField="IsInput">
                        <EditItemTemplate>
                            <asp:CheckBox ID="chkIsInput" Width="120px" runat="server" Checked='<%# (DataBinder.Eval(Container.DataItem,"IsInput") is DBNull ?false:Eval("IsInput")) %>' />
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblIsInput" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "IsInput") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="IsRequired" DataField="IsRequired">
                        <EditItemTemplate>
                            <asp:CheckBox ID="chkIsRequired" Width="120px" runat="server" Checked='<%# (DataBinder.Eval(Container.DataItem,"IsRequired") is DBNull ?false:Eval("IsRequired")) %>' />
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblIsRequired" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "IsRequired") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
                <CommandItemTemplate>
                    <UC:AddButtons ID="AddButtons" runat="server" />
                </CommandItemTemplate>
            </MasterTableView>
            <ClientSettings>
                <Resizing ResizeGridOnColumnResize="true" />
                <ClientEvents OnRowDblClick="rowDblClick" />
            </ClientSettings>
        </telerik:RadGrid>
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
            <Windows>
                <telerik:RadWindow ID="FieldDialog" runat="server" Height="600px" Width="800px" Skin="Vista"
                    BackColor="Aquamarine" ReloadOnShow="true" ShowContentDuringLoad="false" Modal="true"
                    VisibleStatusbar="false" Behaviors="Move, Close" Animation="FlyIn" />
                
            </Windows>
        </telerik:RadWindowManager>
        <UC:DeleteDialog ID="DeleteSelected" runat="server"></UC:DeleteDialog>
              
    </div>
</asp:Content>



Top Menu Ascx:
<div class="addSection">
    <div class="quickAdd">
        <asp:LinkButton ID="lnkqQuitInsert" runat="server" CommandName="InitInsert">
            <asp:ImageButton ID="imgQuickAdd" runat="server" ImageUrl="/UI/Images/add.png" />
            <asp:Label ID="lblQuickAdd" runat="server" class="TopMenuLabel" /></asp:LinkButton>&nbsp;&nbsp;
    </div>
    <div class="fullAdd" id="FullAdd" runat="server">
        <asp:LinkButton ID="lnkAdd" runat="server" CommandName="FullInsert">
            <asp:ImageButton ID="imgAddFull" runat="server" ImageUrl="/UI/Images/add.png" />
            <asp:Label ID="lblFullAdd" runat="server" class="TopMenuLabel"/>
        </asp:LinkButton></div>
    <div class="quickAdd">
        <asp:LinkButton ID="lnkDeleteSelected" runat="server"  OnClientClick="javascript:showDeleteSelectedDialog();"
>
            <asp:ImageButton ID="imgDeleteSelected" runat="server" ImageUrl="/UI/Images/cross.png" />
            <asp:Label ID="lblDeleteSelected" runat="server" class="TopMenuLabel"/></asp:LinkButton>&nbsp;&nbsp;
    </div>

    <div class="quickAdd">
        <asp:LinkButton ID="lnkEnabled" runat="server" OnClientClick="javascript:showEnableSelectedDialog();" >
            <asp:ImageButton ID="imgEnabled" runat="server" ImageUrl="/UI/Images/active.png" />
            <asp:Label ID="lblEnableSelected" runat="server" class="TopMenuLabel"/></asp:LinkButton>&nbsp;&nbsp;
    </div>

    
    <div class="quickAdd">
        <asp:LinkButton ID="lnkDiabled" runat="server" OnClientClick="javascript:showDisableSelectedDialog();">
            <asp:ImageButton ID="imgDisable" runat="server" ImageUrl="/UI/Images/notActive.png" />
            <asp:Label ID="lblDisableSelected" runat="server" class="TopMenuLabel"/></asp:LinkButton>&nbsp;&nbsp;
    </div>
       
       
</div>

The RadWindow as userControl ( I use this controls in every page)

      <script type="text/javascript" src="/UI/Admin/Scripts/Form.js"></script>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">

        function closeAndRebindDelete(args) {
          
         CloseAndRebindTopMenu(args); }

     function cancel() {    CancelTopMenu(); }    
    </script>
</telerik:RadCodeBlock>
<telerik:RadWindow ID="DeleteDialog" runat="server" Skin="Vista" BackColor="Aquamarine"
    ReloadOnShow="true" ShowContentDuringLoad="false" Modal="true" VisibleStatusbar="false"
    Behaviors="Move, Close" Animation="FlyIn" Width="550px" Height="100px">
    <ContentTemplate>
        <div class="information">
            <center>
                <asp:Label ID="lblDeleteSelectInformation" CssClass="fontLabel" runat="server">
                </asp:Label>
            </center>
        </div>
        <br />
        <div style="width: 100%; text-align: center;">
            <telerik:RadButton ID="btnMarkForDelete" runat="server" Skin="Vista" Width="140px"
                OnClick="btnMarkForDelete_Click">
                <Icon PrimaryIconUrl="/UI/Images/markForDelete.png" PrimaryIconWidth="21px" PrimaryIconHeight="25px"
                    PrimaryIconTop="3px" PrimaryIconLeft="9px" />
            </telerik:RadButton>
            <telerik:RadButton ID="btnDeleteNow" runat="server" Skin="Vista" Width="140px" OnClick="btnDeleteNow_Click">
                <Icon PrimaryIconUrl="/UI/Images/cross.png" PrimaryIconWidth="21px" PrimaryIconHeight="25px"
                    PrimaryIconTop="3px" PrimaryIconLeft="9px" />
            </telerik:RadButton>
            <telerik:RadButton ID="btnCancel" runat="server" Skin="Vista" Width="100px" CausesValidation="False"
                ToolTip="Cancel" OnClientClicked="cancel">
                <Icon PrimaryIconUrl="/UI/Images/cancel.png" PrimaryIconWidth="21px" PrimaryIconHeight="25px"
                    PrimaryIconTop="3px" PrimaryIconLeft="9px" />
            </telerik:RadButton>
        </div>
    </ContentTemplate>
</telerik:RadWindow>


Form.js:

function GetRadWindow() {     //if I call this function to close an rebind I get an error window.radwindow == null
    var oWindow = null;
    if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog
    else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)

    return oWindow;
}

function Cancel() {
    GetRadWindow().close();
    return;
}



function CloseAndRebind(args) {

     GetRadWindow().BrowserWindow.refreshGrid(args);  //ERROR
     GetRadWindow().close();
     return;
 }


 function CancelTopMenu() {
     
     return false;
 }


 function CloseAndRebindTopMenu(args) {

     window.refreshGrid(args);  //I use this option as solution but I get other erros.
         
     return false;
 }

 function ShowDeleteSelectedDialog(grid, oWindow) {
     var MasterTable = grid.get_masterTableView();
     var selectedRows = MasterTable.get_selectedItems();
     if (selectedRows.length > 0) {
         oWindow.set_iconUrl("/UI/Images/delete.png");
         oWindow.show();
     }
 }


 3- Run the app, selecte a row, click on Delete Selected, the radWindow is open, click on the first Button



All is working fun, the raadwindow close (very slow), the radgrid rebind,  But when I try to use some of row action such as


The actions ( radajaxamanager) doesnt work, an in Javascript console show the following errors:




I need finish this urgent!

Where is the error????

regards

[Marin Bratanov]

Hi July,

Here are the points I can see as problematic or potentially problematic with the snippets you have pasted:

1) the link button that opens the RadWindow still performs a postback. Prevent it:

  <asp:LinkButton ID="lnkDeleteSelected" runat="server"  OnClientClick="javascript:showDeleteSelectedDialog(); return false;"
> . . . . </asp:LinkButton>

2) the RadWindow is used with its ContentTemplate, so its contents are on the main page and not in an iframe, so the way to get a reference to it in order to close it is the same as when you open it - by using $find(rwClientID). This is shown in the following online demo: http://demos.telerik.com/aspnet-ajax/window/examples/contenttemplatevsnavigateurl/defaultcs.aspx.

3) As explained above - there isn't another window object in your case, so GetRadWindow().BrowserWindow.refreshGrid(args) will throw a JavaScript error. The way to call the refreshGrid() function is, as you have found, directly through the current window object.

4) the three RadButtons you use all perform postbacks that you may want to avoid. I suggest you examine this blog post for more details on using their client-side handlers: http://blogs.telerik.com/blogs/posts/12-08-10/migrating-onclientclick-handlers-from-asp-button-to-telerik-s-asp-net-ajax-button.aspx. You may also want to use AJAX instead of full postbacks to speed things up. How to do this with the RadWindow's ContentTemplate is explained in this help article: http://www.telerik.com/help/aspnet-ajax/window-ajaxifying.html. In case you are closing the RadWindow from the code-behind I can advise you take a look at this sticky thread: http://www.telerik.com/community/forums/aspnet-ajax/window/opening-radwindow-from-the-server.aspx. This approach can be used for closing as well.

Finally, regarding the server errors you get when you rebind the grid - I advise that you run your application in debug mode, add breakpoints in your server code and see where your code is causing the problem. This error is how AJAX traps and sends server errors to the client.


All the best,
Marin Bratanov
the Telerik team

[July]

Hi Marin Bratanov !
Thanks for your answer! It is very complete!!
THANKS!!!!!!!!!