Using javascript on NavigateUrlFormat at SPMenuField

Question

I have an webpart running on SharePoint 2010 which displays a grid of items using a SharePoint:SPGridView control. The first çolumn should display a typical SharePoint menu with the possible actions for the item and the column value it self should be a link to the "View" page.

The default SharePoint behavior is that the "View" page opens up on a modal, and I'd like my grid to behave the same way, so I must use the SharePoint:SPMenuField control.

The problem is it appears that SPMenuField.NavigateUrlFormat property does not support javascript in it, so I cannot get the page to open on the modal.

The code:

<SharePoint:SPGridView runat="server" ID="ResultsGrid" 
AutoGenerateColumns="false">
<EmptyDataRowStyle  />
<Columns>      
    <SharePoint:SPMenuField HeaderText="Title" TextFields="Name" MenuTemplateId="ActionsMenu" NavigateUrlFields="Id" 
        NavigateUrlFormat="/_layouts/Asset/ViewDetail.aspx?id={0}" TokenNameAndValueFields="ID=Id"/>                          
    <asp:BoundField DataField="Id" Visible="false" />
    <asp:BoundField HeaderText="Localização" DataField="LocationPlace">
</Columns>
</SharePoint:GridView>

The code above works, but it opens the page on the browser (like if the location is changed). But what I'd like was to call javascript inside NavigateUrlFormat:

<SharePoint:SPMenuField HeaderText="Title" TextFields="Name" MenuTemplateId="ActionsMenu" NavigateUrlFields="Id" 
            NavigateUrlFormat="javascript:showDialog('/_layouts/Asset/ViewDetail.aspx?id={0}'" TokenNameAndValueFields="ID=Id"/>  

I've found a possible workaround here, but this is not working because SPUrlUtility.AllowedProtocols is returning a clone of the list (and changing on value of a clone won't change the root value itself)

Has anyone had this problem?

Any help would be appreciated.

Thank you

Answer 1

One option would be to create a control redirect using the .browser file. This way you can replace any SPGridView with your own class. THe problem there is of course that this will be an app wide change... The redirect would allow you to use your own custom (derived from SPGridview) control, in which you could change the default behavior of the control.

Answer 2

NunoC, try this jquery function:

$('a.ms-menu-a')
.bind('click', null, function () { alert(this.href); return false; });

Answer 3

It took me a little bit more jQuery than that, but it worked for me: I'm running into some issues using the $ for jQuery, and find myself forced to use the full jQuery format instead.

This is replacing the href and the click event handler and opening the original href in a modal dialog

function openDialog(url)
{
   var dialogOptions = SP.UI.$create_DialogOptions();
   dialogOptions.url = url;
   SP.UI.ModalDialog.showModalDialog(dialogOptions);
}

jQuery(document).ready( function()
{
    jQuery('.ms-vb > a.ms-menu-a').each( function(index) {
        var thisEntry = jQuery(this);
        var href = thisEntry.attr('href');
        thisEntry.attr('href', 'javascript:;');
        thisEntry.click(function () 
        { 
            openDialog(href);
        }); 
    });
});