Toolbar Template on grid that is child of a tabstrip

[Ian]

Hi

Can anyone help me with defining a toolbar template for a grid that is a child of a tabstrip? As I am already using @<text> at the tabstrip level, it doesn't allow me to use it at the child grid level and throws an error. I then tried using the following code but it still produces an error:

@(Html.Kendo().TabStrip() 
.Name("tabStrip_PickingAssigment") 
.SelectedIndex(0) 
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In))) 
.Items(items => 
{ 
items.Add().Text("Assignments").Content(@<text> 
@(Html.Kendo().Grid<DataModels.Picking.PickingAssignmentViewModel>() 
.Name("grid_PickingAssigment") 
.ToolBar(toolBar => 
{ 
toolBar.Template(toolbarTemplate); 

}) 
.Columns(columns => 
{ 
columns.Bound(a => a.Id).Width(100); 
}) 
.Filterable(filterable => filterable 
.Extra(false) 
.Operators(operators => operators 
.ForString(str => str.Clear() 
.StartsWith("Starts with") 
.IsEqualTo("Is equal to") 
.IsNotEqualTo("Is not equal to") 
) 
.ForNumber(str => str.Clear() 
.IsEqualTo("Is equal to") 
.IsNotEqualTo("Is not equal to") 
.IsGreaterThan("Is greater than") 
.IsLessThan("Is less than") 
) 
.ForDate(str => str.Clear() 
.IsEqualTo("Is equal to") 
.IsNotEqualTo("Is not equal to") 
.IsGreaterThan("Is greater than") 
.IsLessThan("Is less than") 
) 
) 
) 
.Sortable() 
.Pageable(x => x.PageSizes(new int[] { 10, 20, 50, 100 }).Info(false)) 
.ColumnMenu() 
.Scrollable() 
.Resizable(resize => resize.Columns(true)) 
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple)) 
.DataSource(dataSource => dataSource 
.Ajax() 
.Batch(false) 
.ServerOperation(true) 
.Model(model => 
{ 
model.Id(v => v.Id); 
model.Field(v => v.Id).Editable(false); 
model.Field(v => v.CreatedDate).DefaultValue(System.DateTime.Now).Editable(false); 
}) 
.Read("PickingAssignmentListByUserGroupId", "Picking", new { Id = "#=Id#" }) 
) 
.ToClientTemplate() 
) 
</text> 
); 


<script id="toolbarTemplate" type="text/x-kendo-template"> 
debugger; 
<hgroup class="title"> 
<h1>@ViewBag.Title</h1> 
</hgroup> 
@Html.Kendo().Menu().Name("GridMenu").Items(items => 
{ 
items.Add().Text(@UserInterface.Resources.GlobalRes.Delete).SpriteCssClasses("k-icon k-delete").HtmlAttributes(new { @id = "delete", @class = "k-button k-button-icontext k-grid-delete" }); 
}) 
</script>

[Ian]

I also tried:

.ToolBar(toolBar =>
                        {
                            toolBar.Template($("#toolbarTemplate").html());
                            
                        }) 

but it complained about the $ being unexpected

[Dimiter Madjarov]

Hi Ian,


You could use the approach described in our Troubleshooting guide. When there is a situation in which <text> tags should be nested, you could  extract the inner one to a custom helper.

I hope this information helps.

Regards,
Dimiter Madjarov
Telerik

 

 

[Ian]

This fixed the problem, thank you.

I recommend using helpers to anyone facing the same issue.