Binding data in PanelBar is pretty confusing

[Joe]

So far all of the Telerik components I've used thus far have been fairly simple.  Irritating to get it to look the way I want, but when it comes to binding to data, it's been pretty simple.

But this is my first time in using the PanelBar, and I'm confused beyond all belief.  I have a database with Topic information such as Title, Description, Created by, etc...  Some of these are marked as Active, and others are marked as In-Active.  I'd like the panel bar to have two panels, one each for Active and In-Active, and upon opening each of them, display a list of Titles for the appropriate type.

So I have a controller action returning an IEnumerable<Topic> and tried using the DataSource Read action, but they just all get listed in the panel bar.  I've tried coding two separate panels, and trying LoadContentFrom, but this is showing my topic information as JSON, and they're all grouped together. 

I've seen examples using Model Binding, but I'm not passing the data in as a Model.

So how in the holy heck do I get this thing to do what I want it to do?

My class is pretty simple:

public class TopicBank
    {
        public TopicBank();

        public bool Active { get; set; }
        public string CreatedBy { get; set; }
        public DateTime CreatedOn { get; set; }
        public string Description { get; set; }
        public string FormData { get; set; }
        public Guid ID { get; set; }
        public DateTime LastModified { get; set; }
        public string LastModifiedBy { get; set; }
        public string Title { get; set; }
    }

 

And my controller is even more simple:

[HttpGet]
[ActionName("GetTopicList")]
public ActionResult GetTopicList()
{
    var hold = WebApiHelper.CallGetAPI<List<TopicBank>>($"{_baseURL}api/Transcend/GetTopicList");
    return Json(hold, JsonRequestBehavior.AllowGet);
}

 

What do I need to do to get this thing to display how I want it to?

[Joe]

So it looks like the only way I can do what I want is by passing the Model to the View, then using the PanelBar's BindTo method to bind it.  Kinda sux because in my entire application, this is the only time I have to pass the model to the View... Everything else uses the Datasource read of the component...  

[Plamen]

Hi,

Thank you for getting in touch with us.

Basically in such scenarios we recommend using the approach that is used in this demo page. It basically depend on hierarchical datasource that is why you have to be able to load the subnodes based on some id. If you still can't make it work correctly at your side would you please provide some project with sample dummy data and let us know how do you expect it to be rendered so we could think of a possible solution

Regards,
Plamen
Telerik by Progress

[Joe]

The demo you're referring to has the panel bar collapsed, and is used to traverse a structure similar to how a treelist would work.  I'm also assuming it is pulling the record as the user clicks.  I am not necessarily using the panel bar like this. Perhaps I need to re-think this, and not be using the panelbar, but unfortunately, I really like how it looks, feels, and works from a UX perspective. But I suppose it's not suitable for what I'm wanting.

[Joe]

My other quandary is my data is not really hierarchical data. I have a flat database of topics that have have created.  Eventually, some of these topics will be pulled into a master topic page to create a custom checklist for the purposes of onboarding new clients.  Some are Active, some are In-Active. I merely want a top panelbar listing the active topics that can be collapsed and expanded upon desire, and a second one listing the in-active. I'm not exactly sure what to do with my data so it displays hierarchially in this type of structure.

The ID is pretty important because when one of these topics gets clicked on, I need to feed the ID to a controller to pull in all the appropriate information making up that topic into an editing screen, of which the data pieces are broken up . The ID is a Guid, which for obvious reasons cannot be displayed as the topic title, the title itself is not unique so I need something more than just the title to delineate a specific topic. 

[Joe]

So I think I may have gotten the hierarchical thing figured out... I'm not too crazy about the solution, but in my Controller Action, this is what I've done...

public JsonResult GetTopicList(Guid? id)
        {
            var topicList = WebApiHelper.CallGetAPI<List<TopicBank>>($"{_baseURL}api/Transcend/GetTopicList");

            if (id.HasValue && id.ToString() == "11111111-1111-1111-1111-111111111111")
            {
                List<TopicBank> theseItems = topicList.Where(x => !x.Active).ToList();
                return Json(theseItems, JsonRequestBehavior.AllowGet);
            }
            else if (id.HasValue && id.ToString() == "00000000-0000-0000-0000-000000000000")
            {
                List<TopicBank> theseItems = topicList.Where(x => x.Active).ToList();
                return Json(theseItems, JsonRequestBehavior.AllowGet);
            }
            else
            {
                List<DropDownTest> theseItems = new List<DropDownTest>()
                {
                    new DropDownTest { id = Guid.Parse("00000000-0000-0000-0000-000000000000"), Title = "ACTIVE TOPICS", hasChildren = true },
                    new DropDownTest { id = Guid.Parse("11111111-1111-1111-1111-111111111111"), Title = "IN-ACTIVE TOPICS", hasChildren = true }
                };
                return Json(theseItems, JsonRequestBehavior.AllowGet);
            }
        }

 

If the id is a null, then the panel bar is looking for my topmost items, which are the ACTIVE and IN-ACTIVE categories...  Unfortunately, this doesn;t allow for me to have the panelbar fully expanded until the user clicks on one of the top most items, but I suppose I can live with that.  Now if only I could figure out how to get the ID on the selected inner items...

[Joe]

You can close this topic, I figured out how to get my selected ID...

[Plamen]

Hi,

Thank you for sharing the solution with the community.

Regards,
Plamen
Telerik by Progress

[Joe]

So initially I thought this might suite my needs, but it just doesn't. The problem is the items don't get listed until the user clicks the top most panel, then it get the data.  So having the panelbar fully expanded and populated, using a datasource, just isn;t possible, which kinda sux for a UX perspective.  The other problem is you can't just reload the panelbar either, because it requires the user to click something for it to open and populate.

So in context, a panelbar showing items.  Click an item which gets loaded to a screen, say a form.  You change the data, save it via another controller action, but the item in the panelbar doesn't get reloaded, and you can't really force it to. the reload method does nothing.  Overall, this panelBar is seeming less and less useful...

[Joe]

I can almost sort of do it using

$("#topicList").data("kendoPanelBar").dataSource.read();

 

Unfortunately, it re-collapses the whole panelBar... ARGH!!!

[Plamen]

Hi,

By default the loadOnDemand property of the control is true and that is why the control is not loading all of the data initially. You can try to set it to false and the sub nodes should be loaded without the need to click any node. Hope this information will be helpful.

If you have further questions please let me know.

Regards,
Plamen
Telerik by Progress

[Joe]

You are correct, thanks... that does fill it completely without waiting for the user to click on it.  But ExpandAll(true) doesn't truly expand it, so when I refresh the datasource, the panelbar still collapses everything, and the user has to go back through and find the entry they had initially clicked on.

[Ivan Danchev]

Hello Joe,

I am not sure which method you refer to with "ExpandAll(true)". The PanelBar exposes an expand method. As a parameter it accepts a selector that specifies the item/s to be expanded.

Regards,
Ivan Danchev
Telerik by Progress

[Joe]

In the API documentation for the PanelBar (http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/PanelBarBuilder#methods-ExpandAll(System.Boolean)) is the ExpandAll method

Except it doesn't work if using a Datasource, probably only works if you're using actual content in the panelbars.  Of course the documentation doesn't say that, surprise surprise...

[Ivan Danchev]

Hi Joe,

I see you mean the MVC wrapper's ExpandAll method, thank you for elaborating more. Indeed the ExpandАll method does not work with remote binding, even if LoadOnDemand is disabled. This is intended because when large amount of items are loaded the requests sent to populate all levels would take some time, by the time all requests are done the PanelBar should already be rendered. Re-rendering it every time when a group of items is loaded (expanding that group) would not be efficient and user friendly. We will make sure to mention this limitation in the documentation in order to avoid further confusion as to why the method works in certain scenarios and doesn't in others. 

Regards,
Ivan Danchev
Telerik by Progress