[CLOSED] Dynamically loaded Grid with BottomBar is not working inside Tabpanel in Razor view engine

[alscg]

Hi ,

I am loading partial view dynamically into tab panel's tab as shown below

@{
    ViewBag.Title = "GoalManager";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
<div class="ten columns main-content">
   
    @(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig))
    @(Html.X().TabPanel().ID("tabPnlGoalManager").Cls("goal-tabpanel")
                              .Items(
                                      Html.X().Panel().ID("pnlTextView").Title("Text View")
                                      .Items(
                                            Html.X().Container().Loader(
                                                                        Html.X().ComponentLoader()
                                                                       .Url(Url.Action("GoalTextView", "Talent"))
                                                                       .Mode(LoadMode.Frame)
                                                                       .Params(new { id = Session["GoalID"] })
                                                                        )
                                            ),
                                       Html.X().Panel().ID("pnlDiagramView").Title("Diagram View")
                                      .Items(
                                            Html.X().Container().Loader(
                                                                        Html.X().ComponentLoader()
                                                                       .Url(Url.Action("GoalObjectHierarchy", "Talent"))
                                                                       .Mode(LoadMode.Frame)
                                                                       .Params(new { id = Session["GoalID"] })
                                                                        )
                                            ),
                                      Html.X().Panel().ID("pnlLinkedHierarchies").Title("Linked Hierarchies")
                                      .Items(
                                            Html.X().Container().Loader(
                                                                        Html.X().ComponentLoader()
                                                                       .Url(Url.Action("LinkedHierarchies", "Talent"))
                                                                       .Mode(LoadMode.Frame)
                                                                       .Params(new { id = Session["GoalID"] })
                                                                        )
                                            ),
                                             Html.X().Panel().ID("pnlLinkedProjects").Title("Linked Projects")
                                      .Items(
                                            Html.X().Container().Loader(
                                                                        Html.X().ComponentLoader()
                                                                       .Url(Url.Action("LinkedProjects", "Talent"))
                                                                       .Mode(LoadMode.Frame)
                                                                       .Params(new { id = Session["GoalID"] })
                                                                        )
                                            )
                                    )
        )
</div>

In Partial view I am having grid with bottom bar as shown below....

<div>
    <!-- Top Panel Using MVC syntax -->
    @(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig))
    <!-- Grid Using MVC syntax -->
    @((Html.X().GridPanel()
                .ID("grdProjects")
                .Cls("grd-existing-projects")
                .Border(false)
                .Store(Html.X().Store().ID("ProjectStore")
                .RemotePaging(true)
                .PageSize(10)
                .Model(Html.X().Model().ID("ProjectModel")
                .Fields(
                            new ModelField("Project_Id", ModelFieldType.Int),
                            new ModelField("Project_Name", ModelFieldType.String),
                            new ModelField("Project_Dept", ModelFieldType.String)
                        )
                    )
                .DataSource(Model)
                )
                .ColumnModel(
                            Html.X().Column().Text(Resource.Talent.LinkedProjects.ProjectText).Width(250).DataIndex("Project_Id"),
                            Html.X().Column().Text(Resource.Talent.LinkedProjects.ProjectNameText).Width(250).DataIndex("Project_Name"),
                            Html.X().Column().Text(Resource.Talent.LinkedProjects.DeptText).Width(375).DataIndex("Project_Dept")
                          )

                    .SelectionModel(Html.X().CheckboxSelectionModel()
                                            .Mode(SelectionMode.Single).ID("chkProjectSelect")
                                            .SelectedRecordID("Project_Id")
                                            .CheckOnly(true)
                                    )
                    .BottomBar(
                                Html.X().PagingToolbar()
                                        .ID("PageBar")
                                        .DisplayInfo(false)
                                        .HideRefresh(true)
                                        .PrependButtons(true)
                                        .Height(75)
                                        .Items(
                                                Html.X().ToolbarSpacer(5),
                                                Html.X().Label(Resource.Talent.Goal.DisplayText),
                                                Html.X().ToolbarSpacer(5),
                                                Html.X().ComboBox().Cls("x-combo-page-record").ID("CmbPageRecord")
                                                        .Width(100) .Height(50)
                                                        .Items("5", "10", "20", "30", "40", "50")
                                                        .SelectedItems("10")
                                                        .Listeners(ls => ls.Select.Handler = "#{grdProjects}.store.pageSize = parseInt(this.getValue(),10); #{grdProjects}.store.load();"),
                                               Html.X().ToolbarSpacer(2),
                                               Html.X().Label(Resource.Talent.Goal.RecordsText).Cls("records-text"),
                                               Html.X().ToolbarSpacer(480)
                                                     ).Listeners(ls => ls.Render.Fn = "pageBtnLayoutChange")
                              )
             ) )
</div>

Issue:
Grid is not being rendered if I use bottom bar.....If I remove bottom bar grid is working.
Please help me to resolve this.

Thanks,
Prabhakar Redddy Manne

[Daniil]

Hi @alscg,

The GridPanel is rendered for me if I remove

.Listeners(ls => ls.Render.Fn = "pageBtnLayoutChange")

So, please ensure this function is defined on your side and it doesn't throw any JavaScript error.

[alscg]

Thank Q Daniil...I will fix this

Hi @alscg,

The GridPanel is rendered for me if I remove

.Listeners(ls => ls.Render.Fn = "pageBtnLayoutChange")

So, please ensure this function is defined on your side and it doesn't throw any JavaScript error.