How to make click through navigation in the panelbar conditional

Question

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.

Answer 1

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.