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

Toolbar Template on grid that is child of a tabstrip

3 Answers 116 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 20 Mar 2014, 11:18 AM
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>

3 Answers, 1 is accepted

Sort by
0
Ian
Top achievements
Rank 1
answered on 20 Mar 2014, 11:32 AM
I also tried:

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

but it complained about the $ being unexpected
0
Accepted
Dimiter Madjarov
Telerik team
answered on 20 Mar 2014, 12:11 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ian
Top achievements
Rank 1
answered on 25 Mar 2014, 09:58 AM
This fixed the problem, thank you.

I recommend using helpers to anyone facing the same issue.
Tags
Grid
Asked by
Ian
Top achievements
Rank 1
Answers by
Ian
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Share this question
or