New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Open a RadWindow from a single SiteMapNode

Environment

Product Version 2020.1.219
Product RadSiteMap for ASP.NET AJAX

Description

Open a RadWindow when clicking on a specific SiteMapNode of a RadSiteMap instead of navigating away.

Solution

The easiest way is to handle the click event of the specific nodes: 1. Add CSS class to the nodes that need to open in RadWindow in the NodeDataBound event of the SiteMap; 2. Handle the click event of the document. If the script will be loaded in the <head>, then it needs to be executed in the DOMContentLoaded event: Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

document.addEventListener('DOMContentLoaded', function(){
    $telerik.$(window).click(function (ev) {
        var link = $telerik.$(ev.target)
        if (link.is("a") && link.parent().hasClass("open-radwindow")) {
            // cancel the default behavior of the link click
            ev.preventDefault();

            // open window here...
            // https://docs.telerik.com/devtools/aspnet-ajax/controls/window/getting-started/opening-windows
        }
    })

}, false);
protected void RadSiteMap2_NodeDataBound(object sender, RadSiteMapNodeEventArgs e)
{
    // custom condition to add CSS class to nodes that need to open in RadWindow
    if (e.Node.Text == "RadEditor")
    {
        e.Node.CssClass = "open-radwindow";
    }
}

See Also

In this article