Open Modal Box from link in SPGridView using JavaScript

Question

I have a SPGridView in SharePoint 2010 Foundation containing announcements from subsites. I have only one column, a HyperLinkField that displays the title of the announcement and links to the dispform of the item.

The data is collected using a SPDataSiteQuery.

What I want is the link to run a JavaScript, added on the page with a Content Editor Web Part, that will open a Modal Box and in it display the dispform.

My code currently looks like below and succentsfully opens the dispform in the same window but I now want it to call the JavaScript.

HyperLinkField hyperFieldTask = new HyperLinkField();
            hyperFieldTask.HeaderText = "News";
            hyperFieldTask.DataTextField = "Title";

            string[] itemUrl = { "FileDirRef" };
            hyperFieldTask.DataNavigateUrlFields = itemUrl;
            hyperFieldTask.DataNavigateUrlFormatString = "";
            hyperFieldTask.SortExpression = "Title";

            this.grid.Columns.Add(hyperFieldTask);

I have tried several solutions but all I get is an inactive link.

hyperFieldTask.DataNavigateUrlFormatString = "JavaScript:ShowDialog('url')";

hyperFieldTask.DataNavigateUrlFields = "JavaScript:ShowDialog('url')";

Nothing I do seems to work.

Have I missed something obvious?

Thanks for helping.

EDIT:

I tried using NavigateUrl and it does indeed call the JavaScript.

hyperFieldNews.NavigateUrl = "javascript:ShowDialog('http://www.google.com', '600')";

The next step is now to instead of using www.google.com as url I want to use the value of "FileDirRef".

Waleed Waleed · Accepted Answer · 2012-10-02T21:13:50

add the following JavaScript function:

<script type="text/javascript"> function ModalPopup(url, title) { var options = SP.UI.$create_DialogOptions(); options.url = url; options.title = title; options.dialogReturnValueCallback = function () { SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK); }; SP.UI.ModalDialog.showModalDialog(options); } </script>

now you can create a link and call the function:

HyperLink hyper1 = new HyperLink(); string popUpPageUrl = "javascript:ModalPopup('" + url + "','Display Item')"; hyper1.NavigateUrl = popUpPageUrl; hyper1.Text = "News";

Open Modal Box from link in SPGridView using JavaScript

1 Answers