Panel bar load content from clicked item

3 posts, 0 answers
  1. Jeff
    Jeff avatar
    10 posts
    Member since:
    Dec 2010

    Posted 22 Aug 2013 Link to this post

    Hello,

    Is it possible to build a panel bar where the content is a grid of items retrieved by an ajax call ?
    it could come from loading a view. How would you go about building something like this ?
  2. Jeff
    Jeff avatar
    10 posts
    Member since:
    Dec 2010

    Posted 23 Aug 2013 Link to this post

    ok, I figured out how to add the grid.
    Now I need a way to pass an id to the grid. The data obviously depends on this ID. 
    I can add this id as the content of the panel bar item on the initial data bind.

    Then I can have an on select method which looks like this :

    function onSelectPanelBar(e) {
        var id = parseInt($(e.item.innerHTML)[1].innerHTML, 10);
        if (id > 0) {
            $("#instancesPanelBar").data("kendoPanelBar").append({
                text: "extra",
                contentUrl: "/templates/TemplateRepositoryGrid/" + id
            })
        }
    }

    this code works but of course it creates another item which is not what I want. I need to replace the content of the clicked panel bar item with the content that comes from that URL. How can I do this ? Is there a better way of doing this ?

    For now, until I figure out a way to do this, I will simply add the contentUrl at the time of initial binding of the PanelBar. I am not happy with this approach however because it means all the data will be loaded in one go rather than when you actually select something. Hopefully someone can shed some light on this.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 26 Aug 2013 Link to this post

    Hello Stuart,

    The panelbar cannot send extra paramters to the server when reloading a pane. However you mentioned that you are using a Grid to display the data.

    Using the data function of the read config of the Grid's dataSource you can send that ID to the server.

    http://docs.kendoui.com/api/framework/datasource#configuration-transport.read.data

    I hope this helps.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top