Displaying a SharePoint Modal Dialog window from SPGridView

I recently built a web part that required a list of announcements with summaries to be presented to a group of users.  Additionally, there was detailed content that was to be displayed in a Pop-up type window.  I used a gridview to display the list, which was pulled in from a web service and passing in a datatable.  That part was rather easy, but the data for the details was stored in a column that contained HTML formed text.  My first thought was to pass that to a javascript function that would call the method for displaying a SharePoint dialog: SP.UI.ModalDialog.showModalDialog();

When I added the HTML as a parameter to the javascript function, the result of doing that was rather odd.  The HTML text was displayed in the web part itself, which was not going to work.  I tried a few workarounds like encoding the HTML text and such, but I did not get good results with that either.  Instead, I knew that I had the ID for the items that I was displaying in the list.  I could pass in the ID to the dialog page and retrieve the HTML text at that point.  Unfortunately, it required two round trips to the web service (and subsequently the SQL Server).

Another issue when displaying the dialog was that the page that I was displaying contained all the elements of the master page that typical pages display (header, footer, etc).  This made the dialog too busy for the simple task it was asked to do.  To fix this, I added the MasterPageFile attribute to the Page directive which overrides DynamicMasterPageFile attribute.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AnnouncementPage.aspx.cs" Inherits="MyPages.WebParts.Layouts.AnnouncementPage" DynamicMasterPageFile="~masterurl/custom.master" MasterPageFile="~/_layouts/applicationv4.master" %>

In the end, a uncluttered summary list and detailed model dialog:

image

image

Code that made it happen:

<script type="text/javascript">
    function OpenDialog(aid) {
        var options = SP.UI.$create_DialogOptions();
        options.url = "/_layouts/MyPages/AnnouncementPage.aspx?announcementId=" + aid;
        options.width = 560;
        options.height = 480;
        options.dialogReturnValueCallback = Function.createDelegate(null, OnCloseDialog);
        SP.UI.ModalDialog.showModalDialog(options);
    }
</script>

<div class="spgridannounce">
    <SharePoint:SPGridView ID="spGridViewAnnouncements" runat="server" AutoGenerateColumns="false"
        ShowHeader="false">
        <HeaderStyle BackColor="Transparent" ForeColor="#08630C" />
        <AlternatingRowStyle BackColor="Transparent" />
        <RowStyle BackColor="Transparent" ForeColor="#BF5629" />
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    Announcement</HeaderTemplate>
                <HeaderStyle />
                <ItemTemplate>
                    <a href='javascript:OpenDialog(<%# Eval("announcement_id")%>)'>
                        <%# Eval("subject") %>
                    </a>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </SharePoint:SPGridView>
</div>
  1. Leave a comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: