Amending Template to inc. items such as TabStrip or PanelBar

[Oliver]

Is this even possible?

Orignally I was hoping to be able to have TabStrips inside my Editor Template. The idea being that instead of adding new items to the list, I could choose to add existing items. (for example, I have a Customer Grid and I want to add Items Owned by customer, so I have a sub grid showing Items Owned, I want to be able to add both a entirely new item, and an existing item).

I've tried to use the example TabStrip and PanelBar without luck.

@model Model.Test

  

 @(Html.Kendo().PanelBar()

        .Name("panelbar")

        .ExpandMode(PanelBarExpandMode.Single)

        .HtmlAttributes(new { style = "width:300px" })

        .Items(panelbar =>

        {

            panelbar.Add().Text("My Teammates")

                .Expanded(true)

                .Content(@<div style="padding: 10px;">

                <div class="teamMate">

                    <h2>Andrew Fuller</h2>

                    <p>Team Lead</p>

                </div>

                <div class="teamMate">

                    <h2>Nancy Leverling</h2>

                    <p>Sales Associate</p>

                </div>

                <div class="teamMate">

                    <h2>Robert King</h2>

                    <p>Business System Analyst</p>

                </div>

            </div>);

  

            panelbar.Add().Text("Projects")

                .Items(projects =>

                {

                    projects.Add().Text("New Business Plan");

  

                    projects.Add().Text("Sales Forecasts")

                        .Items(forecasts =>

                        {

                            forecasts.Add().Text("Q1 Forecast");

                            forecasts.Add().Text("Q2 Forecast");

                            forecasts.Add().Text("Q3 Forecast");

                            forecasts.Add().Text("Q4 Forecast");

                        });

  

                    projects.Add().Text("Sales Reports");

                });

  

            panelbar.Add().Text("Programs")

                .Items(programs =>

                {

                    programs.Add().Text("Monday");

                    programs.Add().Text("Tuesday");

                    programs.Add().Text("Wednesday");

                    programs.Add().Text("Thursday");

                    programs.Add().Text("Friday");

                });

  

            panelbar.Add().Text("Communication").Enabled(false);

        })

    )

Both of the times I've tried (with TabStrips and PanelBars) I get Invalid Template, erroring on kendo.dataviz.min.js.

If this cannot be done the only other way I can think is to create 2 custom toolbar buttons which will load a popup which replicates the Add (1 add a new item and 1 add an existing item), but I cannot find any examples of a custom toolbar with a popup (only the ViewDetail example which is inline). 

As you can most probably tell, I am quite new to this!

Thanks, 

[Oliver]

After doing some intensive investigation. I have determined it is because of my child grid. If I have the Editor Template customised with tabs and such from my parent grid, works fine. I do it from child grid - no no no. I think it is because my child grid is also a tab!

@model IEnumerable<Model.Parent>

  

@{

    ViewBag.Title = "Index";

}

  

@(Html.Kendo().Grid(Model)

    .Name("Grid")

      

    .Columns(columns => 

    {

        columns.Bound(o => o.ID).Width(200);

        columns.Bound(o => o.Name).Width(500);

        columns.Bound(o => o.UpdateDate).Format("{0:d}").Width(200);

        columns.Bound(o => o.UpdateUser).Width(200);

                 

    })

    .ToolBar(toolbar => toolbar.Create())

    .ClientDetailTemplateId("childTemplate")

    .Pageable()

    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ParentTemplate"))

    .DataSource(dataSource => dataSource

        .Ajax()

        .Read(read => read.Action("Parent_Read", "Parent"))

        .Create(create => create.Action("Parent_Create", "Parent"))

        .PageSize(5)

        .Model(model => 

        {

            model.Id(c => c.ID);

            model.Field(c => c.UpdateUser).Editable(false).DefaultValue(Context.User.Identity.Name);

            model.Field(c => c.UpdateDate).Editable(false).DefaultValue(DateTime.Now);

        })   

        )

    .Sortable()

    .Filterable()

  

  

)  

  

    @(Html.Kendo().DropDownParent()

        .Name("ChildAs")

        .DataTextField("Name")

        .DataValueField("ID")

        .DataSource(o => { o.Read(read => { read.Action("Parent_ChildAs", "ChildA"); }); })        

          )

            

    @(Html.Kendo().DropDownParent()

        .Name("ChildBs")

        .DataTextField("Name")

        .DataValueField("ID")

        .DataSource(o => { o.Read(read => { read.Action("Parent_ChildBs", "ChildB"); }); })        

          )  

  

  

    <script id="childTemplate" type="text/kendo-tmpl">

    @(Html.Kendo().TabStrip()

            .Name("TabStrip_#=ID#")

            .SelectedIndex(0)

            .Items(items =>

            {

                items.Add().Text("ChildAs").Content(

                @<text>

                        @(Html.Kendo().Grid<Model.ChildA>()

                                .Name("ChildAs_#=ID#")

                                .Columns(columns =>

                                {

                                    columns.Bound(c => c.Name).Width(100);

                                    columns.Bound(c => c.ProcedureName).Width(100);

                                    columns.Bound(c => c.Description).Width(100);

                                    columns.Bound(c => c.UpdateDate).Format("{0:d}").Width(100);

                                    columns.Bound(c => c.UpdateUser).Width(100);

                                    columns.Command(command => { command.Edit(); command.Destroy(); });

                                })

                                .ToolBar(toolbar => toolbar.Create())

                                .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ChildATemplate"))

                                .DataSource(dataSource => dataSource

                                    .Ajax()

                                    .Read(read => read.Action("ChildA_Read", "ChildA", new { ParentID = "#=ID#" }))

                                    .Create(create => create.Action("ChildA_Create", "ChildA"))

                                    .Destroy(destroy => destroy.Action("ChildA_Delete", "ChildA"))

                                    .Update(update => update.Action("ChildA_Update", "ChildA"))

                                    .PageSize(5)

                                    .Model(model => 

                                        {

                                            model.Id(c => c.ID);

                                            model.Field(c => c.ID).Editable(true).DefaultValue(0);

                                            model.Field(c => c.UpdateUser).Editable(false).DefaultValue(Context.User.Identity.Name);

                                            model.Field(c => c.UpdateDate).Editable(false).DefaultValue(DateTime.Now);

                                        })    

                                     )

                                .Pageable()

                                .Sortable()

                                .ToClientTemplate())

  

                    </text> 

                    );

              items.Add().Text("ChildBs").Content(

                @<text>

                        @(Html.Kendo().Grid<Model.ChildB>()

                                .Name("ChildBs_#=ID#")

                                .Columns(columns =>

                                {

                                    columns.Bound(c => c.Name).Width(400);

                                    columns.Bound(c => c.UpdateDate).Format("{0:d}").Width(100);

                                    columns.Bound(c => c.UpdateUser).Width(100);

                                    columns.Command(command => { command.Edit();  command.Destroy(); });

                                })

                                .ToolBar(toolbar => toolbar.Create())

                                .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ChildBTemplate"))

                                .DataSource(dataSource => dataSource

                                    .Ajax()

                                    .Read(read => read.Action("ChildB_Read", "ChildB", new { ParentID = "#=ID#" }))

                                    .Create(create => create.Action("ChildB_Create", "ChildB"))

                                    .Destroy(destroy => destroy.Action("ChildB_Delete", "ChildB"))

                                    .Update(update => update.Action("ChildB_Update", "ChildB"))

                                    .PageSize(5)

                                    .Model(model => 

                                        {

                                            model.Id(c => c.ID);

                                            model.Field(c => c.ID).Editable(true).DefaultValue(0);

                                            model.Field(c => c.UpdateUser).Editable(false).DefaultValue(Context.User.Identity.Name);

                                            model.Field(c => c.UpdateDate).Editable(false).DefaultValue(DateTime.Now);

                                        })    

                                     )

                                .Pageable()

                                .Sortable()

                                .ToClientTemplate())

                    </text> );

                    })

                    .ToClientTemplate())

  

    </script>