This is a migrated thread and some comments may be shown as answers.

ClientTemplate not rendering in grids contained within PanelBar

4 Answers 204 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Myles
Top achievements
Rank 1
Myles asked on 29 Jan 2013, 04:07 PM

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.

4 Answers, 1 is accepted

Sort by
0
Myles
Top achievements
Rank 1
answered on 31 Jan 2013, 11:24 AM
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.
0
Daniel
Telerik team
answered on 31 Jan 2013, 12:23 PM
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!
0
Myles
Top achievements
Rank 1
answered on 31 Jan 2013, 01:32 PM
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.
0
Daniel
Telerik team
answered on 04 Feb 2013, 11:10 AM
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!
Tags
PanelBar
Asked by
Myles
Top achievements
Rank 1
Answers by
Myles
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or