How do I navigate from the JQuery panel items based upon an attribute in the json feed

Question

New to Kendo and thought this would be dead easy, but am struggling to find an answer. I have a JQuery Panel Bar based upon a json object. I want the screen to navigate to a url defined within the json. Each item has it's own unique url in the json.

I thought about adding a template with a hidden span and adding a custom class and a data-itemid attribute, but am not sure if I am over thinking this. I don't know if Kendo has a simple way of doing this that I am missing.

Also, is there a Kendo method for navigating, or should I just use window.location in a function.

Finally, I noticed there is a select method I can use when defining the panel bar, However, lots of folks just seem to write a function using function onSelect(e)... within a script tag. Which method is the better method for sending the user to a new screen when a panel item is clicked?

My data would look something like this if defined inline:

data: [
                {
                    id: 1, text: "Furniture", items: [
                      { id: 2, text: "Tables & Chairs", url: "mydomain.com/link1" },
                      { id: 3, text: "Sofas"", url: "mydomain.com/link2" },
                      { id: 4, text: "Occasional Furniture"", url: "mydomain.com/link3" }
                    ]
                },
                {
                    id: 5, text: "Decor", items: [
                      { id: 6, text: "Bed Linen" ", url: "mydomain.com/link4"},
                      { id: 7, text: "Curtains & Blinds" ", url: "mydomain.com/link5"},
                      { id: 8, text: "Carpets" ", url: "mydomain.com/link6"}
                    ]
                }
            ]
        });

Answer 1

You should use the dataUrlField to specify which property of your JSON objects contains the navigation URL. In your case, the solution might look something like this (working demo here https://dojo.telerik.com/UvEHomuB):

<div id="panelbar"></div>
<script>
var items = [
            {
                id: 1, text: "Furniture", items: [
                  { id: 2, text: "Tables & Chairs", url: "mydomain.com/link1" },
                  { id: 3, text: "Sofas", url: "mydomain.com/link2" },
                  { id: 4, text: "Occasional Furniture", url: "mydomain.com/link3" }
                ]
            },
            {
                id: 5, text: "Decor", items: [
                  { id: 6, text: "Bed Linen", url: "mydomain.com/link4"},
                  { id: 7, text: "Curtains & Blinds", url: "mydomain.com/link5"},
                  { id: 8, text: "Carpets", url: "mydomain.com/link6"}
                ]
            }
        ];
$("#panelbar").kendoPanelBar({
  dataUrlField: "url",
  dataSource: items
});
</script>

This probably represents the easiest solution to your problem, unless you need to do something more specific when a user selects a node. On the subject of navigation generally, I'd recommend you take a look at the kendo SPA framework. It helps you to build a site which only reloads parts of the page when the user navigates around the site, rather than forcing the browser to reload the entire page. Hope this helps.