SharePoint 2010

I have a display form that has a task list webpart and a discussion list webpart.

The display form opens in a modal window.

When a task list item link is clicked, it opens in an additional modal window (desired).

However, when a discussion list item link is clicked, it opens as a standard page (not desired).

I've tried modifying the discussion item link to open as a modal window with javascript (SP.UI.ModalDialog.showModalDialog), but was not successful (nothing changed). I even changed the href to '#' in the when and otherwise clause, and still nothing changed.

I can modify other list item links without a problem, but the discussion one eludes me.

How can I get it to open in an additional modal window like the task list item described above?


You can achieve this by overriding the OnPostRender callback of the client side rendering engine and replacing the default behaviour of the click action.

Paste below code into a .js file and load it as JSLink for your webpart.

nice primer on JSLink

PS: I except jquery to be loaded in the masterpage

PPS: Don't forget to go to the lists settings (advanced settings) and check "Yes" for launching forms in dialogs.

( function () {
var ctx = {};
ctx.Templates = {};
ctx.OnPostRender = function( ctx ) {
console.log( ctx.wpq )
    // in case you need prevent other webparts from getting modified on post render
    // we indicate the web part id, you get it by inspecting the DOM.
    if( ctx.wpq == 'WPQ7' ) {
        var dn = $( "#WebPart" + ctx.wpq );
        dn.find( '#idHomePageNewItem' ).click( function( e ) {
            var aData = {
                url : ctx.listUrlDir + "/NewForm.aspx",
                title : "Ask A Question",
                dialogReturnValueCallback : function() {
                    // call back that is triggered when dialog closes
                    // ..we need to refresh, either we click on the 
                    // refresh button of webpart if exists otherwise
                    // we simply reload the page
                    var dnRefresh = dn.find( "a[title='Refresh']" );
                    if( dnRefresh[ 0 ] ) {
                        dnRefresh[ 0 ].click();
                    else {
            SP.UI.ModalDialog.showModalDialog( aData );
        } );
SPClientTemplates.TemplateManager.RegisterTemplateOverrides( ctx );
} )();

If this is for one page only, an alternative option is to do this in a script editor web part.

This example does not require jQuery, you may need to update the DOM ID selectors.

document.addEventListener("DOMContentLoaded", function(event) {
    var a = document.getElementById('forum1-NewPostLink');
    var refreshLink = document.getElementById('forum1-RefreshLink');

    var modal = function(e) {
        var options = {
            url: this.href, 
            title: 'Community Discussion', 
            dialogReturnValueCallback: function(retVal) { 
                if (retVal === 1) {
                    if (refreshLink) {
                    } else {

    a.addEventListener('click', modal);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.