Binding data in PanelBar is pretty confusing

15 posts, 0 answers
  1. Joe
    Joe avatar
    205 posts
    Member since:
    May 2012

    Posted 07 Mar 2017 Link to this post

    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?

  2. Joe
    Joe avatar
    205 posts
    Member since:
    May 2012

    Posted 07 Mar 2017 Link to this post

    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...  
  3. Plamen
    Admin
    Plamen avatar
    2867 posts

    Posted 09 Mar 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Joe
    Joe avatar
    205 posts
    Member since:
    May 2012

    Posted 09 Mar 2017 in reply to Plamen Link to this post

    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.
  5. Joe
    Joe avatar
    205 posts
    Member since:
    May 2012

    Posted 09 Mar 2017 in reply to Joe Link to this post

    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. 

  6. Joe
    Joe avatar
    205 posts
    Member since:
    May 2012

    Posted 09 Mar 2017 Link to this post

    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...

  7. Joe
    Joe avatar
    205 posts
    Member since:
    May 2012

    Posted 09 Mar 2017 Link to this post

    You can close this topic, I figured out how to get my selected ID...
  8. Plamen
    Admin
    Plamen avatar
    2867 posts

    Posted 09 Mar 2017 Link to this post

    Hi,

    Thank you for sharing the solution with the community.

    Regards,
    Plamen
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Joe
    Joe avatar
    205 posts
    Member since:
    May 2012

    Posted 10 Mar 2017 in reply to Plamen Link to this post

    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...

  10. Joe
    Joe avatar
    205 posts
    Member since:
    May 2012

    Posted 10 Mar 2017 in reply to Joe Link to this post

    I can almost sort of do it using

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

     

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

  11. Plamen
    Admin
    Plamen avatar
    2867 posts

    Posted 13 Mar 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  12. Joe
    Joe avatar
    205 posts
    Member since:
    May 2012

    Posted 13 Mar 2017 in reply to Plamen Link to this post

    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.
  13. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1483 posts

    Posted 15 Mar 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  14. Joe
    Joe avatar
    205 posts
    Member since:
    May 2012

    Posted 15 Mar 2017 in reply to Ivan Danchev Link to this post

    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...

  15. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1483 posts

    Posted 17 Mar 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top