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

Amending Template to inc. items such as TabStrip or PanelBar

1 Answer 100 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Oliver
Top achievements
Rank 1
Oliver asked on 24 Sep 2012, 10:56 AM
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, 

1 Answer, 1 is accepted

Sort by
0
Oliver
Top achievements
Rank 1
answered on 24 Sep 2012, 04:28 PM
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>
Tags
Editor
Asked by
Oliver
Top achievements
Rank 1
Answers by
Oliver
Top achievements
Rank 1
Share this question
or