Use JavaScript within a SPGridView

The NavigateUrlFormat property of the SPMenuField allows you to specify a Url, which will be called if you click the field in a SPGridView.

   1: SPMenuField colMenu = new SPMenuField();
<pre style="padding-right:0px;padding-left:0px;font-size:8pt;padding-bottom:0px;margin:0em;overflow:visible;width:100%;color:black;border-top-style:none;line-height:12pt;padding-top:0px;font-family:consolas, 'Courier New', courier, monospace;border-right-style:none;border-left-style:none;background-color:#f4f4f4;border-bottom-style:none"><span style="color:#606060">   2:</span> colMenu.NavigateUrlFields = <span style="color:#006080">"WebUrl,AlertID,ListID"</span>;</pre>

<pre style="padding-right:0px;padding-left:0px;font-size:8pt;padding-bottom:0px;margin:0em;overflow:visible;width:100%;color:black;border-top-style:none;line-height:12pt;padding-top:0px;font-family:consolas, 'Courier New', courier, monospace;border-right-style:none;border-left-style:none;background-color:white;border-bottom-style:none"><span style="color:#606060">   3:</span> colMenu.NavigateUrlFormat = <span style="color:#006080">"{0}/_layouts/SubEdit.aspx?Alert={1}&List={2};</pre>
   4: colMenu.TokenNameAndValueFields = "</span>WEBURL=WebUrl,ALERTID=AlertID,LISTID=ListId";

With the TokenNameAndValueFields property, you map the grid columns to %xyz%.

If you want to use a JavaScript instead, you can do so:

   1: MenuItemTemplate editAlertMenu = new MenuItemTemplate("Name", "imageUrl");
<pre style="padding-right:0px;padding-left:0px;font-size:8pt;padding-bottom:0px;margin:0em;overflow:visible;width:100%;color:black;border-top-style:none;line-height:12pt;padding-top:0px;font-family:consolas, 'Courier New', courier, monospace;border-right-style:none;border-left-style:none;background-color:#f4f4f4;border-bottom-style:none"><span style="color:#606060">   2:</span> editAlertMenu.ClientOnClickScript = <span style="color:#006080">"editAlertScript('%WEBURL%','%ALERTID%','%LISTID%');"</span>;</pre>


<pre style="padding-right:0px;padding-left:0px;font-size:8pt;padding-bottom:0px;margin:0em;overflow:visible;width:100%;color:black;border-top-style:none;line-height:12pt;padding-top:0px;font-family:consolas, 'Courier New', courier, monospace;border-right-style:none;border-left-style:none;background-color:white;border-bottom-style:none"><span style="color:#606060">   3:</span> alertListMenu.Controls.Add(editAlertMenu);</pre>

The trick is, that you have to put a ‘ around the variables.

The JavaScript would be something like

   1: <script type="text/javascript">
<pre style="padding-right:0px;padding-left:0px;font-size:8pt;padding-bottom:0px;margin:0em;overflow:visible;width:100%;color:black;border-top-style:none;line-height:12pt;padding-top:0px;font-family:consolas, 'Courier New', courier, monospace;border-right-style:none;border-left-style:none;background-color:#f4f4f4;border-bottom-style:none"><span style="color:#606060">   2:</span> <span style="color:#0000ff">function</span> editAlertScript(weburl, alertid, listid){</pre>


<pre style="padding-right:0px;padding-left:0px;font-size:8pt;padding-bottom:0px;margin:0em;overflow:visible;width:100%;color:black;border-top-style:none;line-height:12pt;padding-top:0px;font-family:consolas, 'Courier New', courier, monospace;border-right-style:none;border-left-style:none;background-color:white;border-bottom-style:none"><span style="color:#606060">   3:</span>    <span style="color:#0000ff">var</span> url = weburl + <span style="color:#006080">'/_layouts/SubEdit.aspx?Alert='</span> + alertid;</pre>


<pre style="padding-right:0px;padding-left:0px;font-size:8pt;padding-bottom:0px;margin:0em;overflow:visible;width:100%;color:black;border-top-style:none;line-height:12pt;padding-top:0px;font-family:consolas, 'Courier New', courier, monospace;border-right-style:none;border-left-style:none;background-color:#f4f4f4;border-bottom-style:none"><span style="color:#606060">   4:</span>    <span style="color:#0000ff">if</span> (listid.length &gt; 0)</pre>


<pre style="padding-right:0px;padding-left:0px;font-size:8pt;padding-bottom:0px;margin:0em;overflow:visible;width:100%;color:black;border-top-style:none;line-height:12pt;padding-top:0px;font-family:consolas, 'Courier New', courier, monospace;border-right-style:none;border-left-style:none;background-color:white;border-bottom-style:none"><span style="color:#606060">   5:</span>    { url = url + <span style="color:#006080">'&List='</span> + listid; }</pre>


<pre style="padding-right:0px;padding-left:0px;font-size:8pt;padding-bottom:0px;margin:0em;overflow:visible;width:100%;color:black;border-top-style:none;line-height:12pt;padding-top:0px;font-family:consolas, 'Courier New', courier, monospace;border-right-style:none;border-left-style:none;background-color:#f4f4f4;border-bottom-style:none"><span style="color:#606060">   6:</span>    window.navigate(url);</pre>


<pre style="padding-right:0px;padding-left:0px;font-size:8pt;padding-bottom:0px;margin:0em;overflow:visible;width:100%;color:black;border-top-style:none;line-height:12pt;padding-top:0px;font-family:consolas, 'Courier New', courier, monospace;border-right-style:none;border-left-style:none;background-color:white;border-bottom-style:none"><span style="color:#606060">   7:</span> }</pre>


<pre style="padding-right:0px;padding-left:0px;font-size:8pt;padding-bottom:0px;margin:0em;overflow:visible;width:100%;color:black;border-top-style:none;line-height:12pt;padding-top:0px;font-family:consolas, 'Courier New', courier, monospace;border-right-style:none;border-left-style:none;background-color:#f4f4f4;border-bottom-style:none"><span style="color:#606060">   8:</span> &lt;/script&gt;</pre>

 

Technorati Tags: ,,