How to make click through navigation in the panelbar conditional

I have a panel bar based on a remote data source which all works fine. One of the attributes in the feed combined with a form field on the screen will determine if either the user can click on a child item in the panelbar and navigate through to the url, or gets a warning dialogue and navigation fails.

I am using the following technique to capture the given json attribute in the feed and associate it with each item in the panel:

    $("#panelbar").kendoPanelBar({
        dataSource: haRepList,
        template: "<span class=''repType'' data-url=''#= item.type #''>#= item.name #</span>",
        select: function(panel){
           var classId =  $(panel.item).find(".repType").data(''url'');
           if (classId !== ''undefined'') {
           alert(classId);
           }
        },
        dataTextField: ["name", "name"]
    });

So when I click on the given item, I get an alert telling me what the type attribute is. I now need to tell the panel "Do not allow the click through url to work" based upon both this value, and another field on the screen.

You could try preventDefault, stopPropagation or simply return false:

$("#panelbar").kendoPanelBar({
    dataSource: haRepList,
    template: "<span class=''repType'' data-url=''#= item.type #''>#= item.name #</span>",
    select: function(panel){
       var classId =  $(panel.item).find(".repType").data(''url'');
       if (classId !== ''undefined'') {
           panel.preventDefault();
       }
    },
    dataTextField: ["name", "name"]
});

Here's a link to a working demo where the second panel is conditionally disabled. Hope this helps.