How to make click through navigation in the panelbar conditional

3 posts, 1 answers
  1. Paul
    Paul avatar
    4 posts
    Member since:
    Jun 2019

    Posted 11 Jul 2019 Link to this post

    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. Answer
    Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 15 Jul 2019 Link to this post

    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.
  3. Paul
    Paul avatar
    4 posts
    Member since:
    Jun 2019

    Posted 18 Jul 2019 in reply to Dimitar Link to this post

    Perfect: Many Thanks
Back to Top