ClientTemplate not rendering in grids contained within PanelBar

5 posts, 0 answers
  1. Myles
    Myles avatar
    18 posts
    Member since:
    Mar 2012

    Posted 29 Jan 2013 Link to this post

    I have a cshtml page that contains a panelbar with 6 items.  Each item uses Ajax to load content based
    on a partial view that contains a grid e.g.:

       @(Html.Kendo().PanelBar()
            .Name("panelbar")
            .ExpandMode(PanelBarExpandMode.Single)
            .Animation(animation =>
                {
                    animation.Enable(true);
                    animation.Expand(config =>
                        {
                            config.Expand();
                            config.Fade(FadeDirection.In);
                            config.Duration(AnimationDuration.Fast);
                        });
                })
            .Items(panelbar =>
            {
                panelbar.Add()
                    .Text(String.Format("{0} [{1} Items]", "One",@Model.MyOpenObligations ))
                    .ImageUrl(Url.Content("~/Contents/Images/White_Triangle.png"))                   
                    .Encoded(false)
                    .Selected(true)
                    .Expanded(true)
                    .LoadContentFrom("ListFilteredObligations", "MyController");
    etc etc................           

    The partial view that is loaded by each panel item contains a grid that uses ClientTemplates for specfic columns
    e.g. :

    @(Html.Kendo().Grid(Model)
        .Name("obligationGrid")
        .Columns(columns =>
            {
                columns.Bound(p => p.ReferenceNumber);
                columns.Bound(p => p.Extract);
                columns.Bound(p => p.Clause);
                columns.Bound(p => p.Party).ClientTemplate("#= Party ? Party.DisplayName : ''# ").Title("Party");
            })
    ....etc etc

    The ClientTemplate columns are rendered OK when the first panel item is expanded (see attached screen shot).
    However, when subsequent panel items are expended the grid client template columns display the entire child object (see attached screen shot).We only see this issue when using the grids within the PanelBar control.

  2. Myles
    Myles avatar
    18 posts
    Member since:
    Mar 2012

    Posted 31 Jan 2013 Link to this post

    I think one of the problems here was that  the same partial view (with differing models) was being loaded for each panel item.  The partial view contained a grid control with a static name.  I think this resulted in the panelbar page containing multiple grid controls with identical names.  I got round this by dynamically naming the grid in the partial view based on the context of the containing panel item.  For example, if panel one was loaded then the grid in the loaded partial view would be named "gridone", for panel two the grid in the loaded partial view would be named "gridtwo" etc etc.
  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 31 Jan 2013 Link to this post

    Hello Myles,

    The ClientTemplate will not be rendered if the Grid is not initialized correctly. Do all the Grids have unique names? If yes, are there any JavaScript errors?

    Kind regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Myles
    Myles avatar
    18 posts
    Member since:
    Mar 2012

    Posted 31 Jan 2013 Link to this post

    As I said previously, the script errors were possibly due to the fact that the grids in the partial views did not have unique names.  Can you please take some time and explain what you mean by "The ClientTemplate will not be rendered if the Grid is not initialized correctly".  How should a grid be initialized properly?

    Secondly, there is another issue with the panel bar in that when I try and collapse a panel (after it has been expanded) the partial view is opened up in its own page i.e. outside of the panelbar container.

    The documentation on this control really is pretty poor.
  6. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 04 Feb 2013 Link to this post

    Hello Myles,

    The Name is used for the element ID and the initialization scripts to locate it. Thus if the Grid does not have a unique ID the correct element will not be found and will never be initialized.
    As for the problem with clicking the PanelBar item when it is opened - this is a known issue that has already been fixed in the service pack release. Please update the version you are using and let me know if clicking on the item still causes the browser to navigate to the partial view.

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready