I have created a datagrid using javascript. In that I am displaying top 4 items of my sharepoint list. Now I want to open hyperlink list item in modal dialog box on the click of that hyperlink. Please suggest javascript or jquery approach.
-
Do you want to open view item form or edit item form?– JinxedMar 10, 2015 at 6:43
-
I want to open view item form– RuchiMar 10, 2015 at 6:52
-
Your question is described here, and here, and in google– Gennady GMar 10, 2015 at 8:04
-
Check this blog.devoworx.net/2016/08/13/…– Mohamed El-Qassas MVP ♦Sep 11, 2017 at 14:45
3 Answers
To open the view item form you need to open DispForm.aspx
page for the List Item in a Modal Dialog. The URL for the list item will be something like http://server/Lists/ListName/DispForm.aspx?ID=1
where ID is the list item ID. To open it in a modal dialog use the following code snippet.
function openDialog(pageUrl) {
SP.UI.ModalDialog.showModalDialog(
{
url: pageUrl,
width: 500,
height: 500,
title: "Title of the Dialog"
}
);
}
The above snippet has been taken from here.
You can also look at these:
- Newform.aspx in a dialog box
- Create a link to display, edit and create new items from a dialog (layover) in SharePoint (Based on SP 2013 but code should work for SP 2010 also)
-
Thnks Naveen. But I want to open modal dialog on the click of the list item hyperlink which is already getting displayed on page load. When and how should I called this function that u have written ?– RuchiMar 10, 2015 at 9:20
-
@Ruchi: You would be requried to call the
openDialog
from<a>
tag. You can do this viahref="javascript:openDialog()"
oronclick="openDialog()"
. You will have to contruct the URL based by supplying server name, list name and ID of the list item.– NaveenMar 10, 2015 at 9:35 -
Naveen here is my code that adds list items on the datagrid function AddRowToTable1(name, modified, ID) { var url = "synpunspd0177:23598/Lists/Broadcasts/DispForm.aspx?ID=" + ID; $("#BroadcastsdataTable").append('<tr>' + '<td class="tablenews"> <a href= ' + url + '>' + name + '</a> ' + modified + ' </td>' + '</tr>'); How to open list items that are displaying in datagrid as modal popup when clicked– RuchiMar 10, 2015 at 9:42
-
@Ruchi: You will have to write something like
"<a href=\"javascript:openDialog('" + url + "')\>"
.– NaveenMar 10, 2015 at 9:59 -
You need to ensure that the relevant file (SP.UI.Dialog.js
) has been loaded first.
function openDialog(pageUrl) {
var options = {
url: pageUrl,
title: 'Title of the Dialog',
allowMaximize: false,
showClose: true,
width: 500,
height: 500
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
Here is a posting with some additional useful details: Tips & Tricks: SharePoint 2013 Modal Dialogs
This JavaScript should inject the PopUp code in your page, affecting all link tags:
var links=getElementByTitle("a","linkTitle");
var origin=links;
var temp="javascript:OpenPopUpPage('" + origin + "', null, 640, 480)";
links.href=temp;
function getElementByTitle(tagName,elementTitle){
var elementTag;
var els=document.getElementsByTagName(tagName);
var elsLen=els.length;
var pattern=new RegExp("(^|\\s)" + elementTitle + "(\\s|$)");
for (var i=j=0; i < els.length; i++){
if (elementTitle.toUpperCase()==els[i].title.toUpperCase()){
elementTag=els[i];
j++;
}}
return elementTag;
}
-
helped! thanks I just changed els[i].title.toUpperCase() to els[i].text.toUpperCase() May 31, 2016 at 14:59