This is a migrated thread and some comments may be shown as answers.

How to make click through navigation in the panelbar conditional

2 Answers 107 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 11 Jul 2019, 12:18 PM

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 (just for debugging!). 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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 15 Jul 2019, 08:21 AM
Hello Paul,

If I can understand correctly, navigating to the specified item url should be prevented conditionally. If this is the case, you could use preventDefault() to stop the navigation as follows:
select: function(panel) {
  var shouldNavigate = $(panel.item).find(".repType").data("navigate");
     
  if (!shouldNavigate) {
    panel.preventDefault();
  }
}

Here is a Dojo example where the above approach is demonstrated. When the first item is clicked, navigation to the specified url occurs. However, when clicking on the second item the navigation is prevented.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Paul
Top achievements
Rank 1
answered on 18 Jul 2019, 10:04 AM
Perfect: Many Thanks
Tags
PanelBar
Asked by
Paul
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Paul
Top achievements
Rank 1
Share this question
or