Panel Bar API?

[David]

I am migrating things from the "forms" world to more and more Core based projects.  I keep hitting an a wall which seems to boil down to missing documentation.  Can someone point me in the correct direction?

My needs start with the basic need to configure the layout of a given form for the user upon initial display.  They will make various selections and press the infamous "update" button when done.  In the broadest sense of things I need to do something like:

panelbar.items[0].expanded = true;
panelbar.items[1].expanded = false;

 

That looks simple.  I have figured out how to get the Id of the panel control and have a valid object.  For the life of me I cannot find anything that documents how to find/use the items object.  I know it exists but how of find the item at index "x" seems beyond me.  Based upon the documentation I have found it seems I must find a reference to the item at index "x", then set its expanded property to true/false.  Since I cannot find the index, I am up a creek without the paddle.

I would appreciate any pointers someone can send my way.

 

On the positive side:  My conversion activities have shown me the power of the telerik core tools.  My initial thoughts has some misgivings however experience has shown they are surprisingly powerful.  I am amazed with the amount of code being replaced by what is now standard functionality.  Working with a framework, as opposed to against it, is a simple but important concept to learn.  Kudos to the Telerik/Progress team.

 

 

[Aleksandar]

Hello David,

Telerik UI for ASP.NET Core is a set of server-side wrappers that allows you to use the Kendo UI widgets in .NET Core. Keep in mind you can still work with the client-side widgets and bind functions on their events, for example. For the PanelBar you can review the API reference section for additional information.

I'm attaching a sample project with a PanelBar implemented, for you to review. You'll notice there is a custom function bound to the select event. All event objects have a sender field which provides a reference to the widget instance that triggered the event. You can find additional details in the article on Methods and Events. Once we know the widget that triggered the event we can access the widget's dataSource and find the id of the element using the dataSource method GetByUid:

function onSelect(e) {
        var panelbar = e.sender;
        var selectedItemUid = $(e.item).data('uid');
        var selectedItem = panelbar.dataSource.getByUid(selectedItemUid);
        alert('selected item id: ' + selectedItem.id + 'selected item name: ' + selectedItem.Name )
    }

If you need to expand a PanelBar item and you know its id, you should do that the following way using the expand() method of the widget:

var id = 2;
var panelBar = $("#panelbar").data("kendoPanelBar");
var dataSource = panelBar.dataSource;
var item = dataSource.get(id);
var uid = item.uid;
panelBar.expand($("[data-uid='" + uid + "']"));

I hope this helps. If you have further questions please get back to me.

Regards,
Aleksandar
Progress Telerik