[Solved] How to show popup window from context menu?

[Goran]

We use Telerik's grid for VS2008 and added context menu to it. The code looks as following:

Markup:

<telerik:RadGrid ID="RadGrid1" runat="server" Width="100%" DataSourceID="SqlDataSource1" AllowAutomaticDeletes="true" AllowAutomaticInserts="true" AllowAutomaticUpdates="true"
    AutoGenerateColumns="false" AllowMultiRowSelection="true">
    <MasterTableView PageSize="10" AllowPaging="True" Width="100%" DataKeyNames="ContinentID" DataSourceID="SqlDataSource1" EditMode="InPlace">
        <Columns>
            <telerik:GridClientSelectColumn UniqueName="checkBox"></telerik:GridClientSelectColumn>
            <telerik:GridBoundColumn HeaderText="ContinentID" DataField="ContinentID"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="ContinentName" DataField="ContinentName"></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnRowContextMenu="RowContextMenu"></ClientEvents>
        <Selecting AllowRowSelect="true"></Selecting>
    </ClientSettings>
</telerik:RadGrid>

Code behind:

protected void contextMenu_ItemClick(object sender, RadMenuEventArgs e)
{
    int rowIndex = int.Parse(HiddenField1.Value);
    switch (e.Item.Text)
    {
        case "Edit":
            RadGrid1.Items[rowIndex].Edit = true;
            RadGrid1.Rebind();
            break;
        case "Add":
            RadGrid1.MasterTableView.IsItemInserted = true;
            RadGrid1.Rebind();
            break;
        case "Delete":
            RadGrid1.MasterTableView.PerformDelete(RadGrid1.Items[rowIndex]);
            break;
        case "Export To Excel":
            RadGrid1.MasterTableView.GetColumn("checkBox").Visible = false;
            RadGrid1.ExportSettings.ExportOnlyData = true;
            RadGrid1.MasterTableView.ExportToExcel();
            break;
    }
}

JavaScript:

function RowContextMenu(sender, eventArgs, menu, hiddenField) {
    var evt = eventArgs.get_domEvent();

    if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
        return;
    }

    var index = eventArgs.get_itemIndexHierarchical();
    hiddenField.value = index;
    menu.show(evt);

    evt.cancelBubble = true;
    evt.returnValue = false;

    if (evt.stopPropagation) {
        evt.stopPropagation();
        evt.preventDefault();
    }
}

I'd like to show popup window when click to "Export To Excel"" option:

case "Export To Excel":

The execution of program should be stopped and wait for selecting option in combo box in popup window. After selecting we click "OK" and the control of program execution is returned back to ASP.NET code. How can I do that?

Thank in advance.

Goran

[Princy]

Hi Goran,

Please have a look into the following code:
ASPX:

<asp:ScriptManager ID="ScriptManager1" runat="server">
       </asp:ScriptManager>
       <telerik:RadGrid ID="RadGrid1" runat="server" Width="100%" DataSourceID="SqlDataSource1"
           AllowAutomaticDeletes="true" AllowAutomaticInserts="true" AllowAutomaticUpdates="true"
           AutoGenerateColumns="false" AllowMultiRowSelection="true">
           <MasterTableView PageSize="10" AllowPaging="True" Width="100%" DataKeyNames="EmployeeID"
               DataSourceID="SqlDataSource1" EditMode="InPlace">
               <Columns>
                   <telerik:GridClientSelectColumn UniqueName="checkBox">
                   </telerik:GridClientSelectColumn>
                   <telerik:GridBoundColumn HeaderText="ContinentID" DataField="EmployeeID">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn HeaderText="ContinentName" DataField="FirstName">
                   </telerik:GridBoundColumn>
               </Columns>
           </MasterTableView>
           <ClientSettings>
               <ClientEvents OnRowContextMenu="RowContextMenu"></ClientEvents>
               <Selecting AllowRowSelect="true"></Selecting>
           </ClientSettings>
       </telerik:RadGrid>
   </div>
   <asp:HiddenField ID="HiddenField1" runat="server" />
   <telerik:RadContextMenu ID="contextMenu1" runat="server" OnItemClick="contextMenu_ItemClick">
       <Items>
           <telerik:RadMenuItem Text="Edit" />
           <telerik:RadMenuItem Text="Add" />
           <telerik:RadMenuItem Text="Delete" />
           <telerik:RadMenuItem Text="Export To Excel" />
       </Items>
   </telerik:RadContextMenu>
   <telerik:RadWindow ID="RadWindow1" runat="server">
       <ContentTemplate>
           <telerik:RadComboBox ID="RadComboBox1" runat="server">
               <Items>
                   <telerik:RadComboBoxItem Text="1" />
                   <telerik:RadComboBoxItem Text="2" />
               </Items>
           </telerik:RadComboBox>
           <asp:Button ID="Button1" runat="server" Text="OK" OnClick="Button1_Click" />
       </ContentTemplate>
   </telerik:RadWindow>
   <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
       SelectCommand="SELECT top 5  * FROM [Employees] "></asp:SqlDataSource>

javascript:

<script type="text/javascript">
    function RowContextMenu(sender, eventArgs) {
        var hiddenField = document.getElementById('HiddenField1');
        var menu = $find("<%=contextMenu1.ClientID %>");
        var evt = eventArgs.get_domEvent();

        if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
            return;
        }
        var index = eventArgs.get_itemIndexHierarchical();
        hiddenField.value = index;
        menu.show(evt);
        evt.cancelBubble = true;
        evt.returnValue = false;

        if (evt.stopPropagation) {
            evt.stopPropagation();
            evt.preventDefault();
        }
    }
</script>

C#:

protected void contextMenu_ItemClick(object sender, RadMenuEventArgs e)
   {
       int rowIndex = int.Parse(HiddenField1.Value);
       switch (e.Item.Text)
       {
           case "Edit":
               RadGrid1.Items[rowIndex].Edit = true;
               RadGrid1.Rebind();
               break;
           case "Add":
               RadGrid1.MasterTableView.IsItemInserted = true;
               RadGrid1.Rebind();
               break;
           case "Delete":
               RadGrid1.MasterTableView.PerformDelete(RadGrid1.Items[rowIndex]);
               break;
           case "Export To Excel":
               RadGrid1.MasterTableView.GetColumn("checkBox").Visible = false;
               RadWindow window = (RadWindow)this.FindControl("RadWindow1");
               window.VisibleOnPageLoad = true;
               break;
       }
   }

   protected void Button1_Click(object sender, EventArgs e)
   {
       RadGrid1.ExportSettings.ExportOnlyData = true;
       RadGrid1.ExportSettings.OpenInNewWindow = true;
       RadGrid1.MasterTableView.ExportToExcel();
   }

Thanks,
Princy.