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

Error in DetailView ClientTemplate with TabStrip in a Grid

4 Answers 357 Views

General Discussions

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

Kolie asked on 21 Dec 2012, 11:42 PM

I am having an issue with trying to test out a client template using a tabstrip within a detailview of a grid. The template being passed to Template.compile is:

"<div class="k-widget k-tabstrip k-header" id="Inty#=Id#"><ul class="k-reset k-tabstrip-items"><li class="k-item k-state-default"><a class="k-link" href="\#Inty#=Id#-1">Turtle</a></li></ul><div class="k-content" id="Inty#=Id#-1">Brownie</div></div><script><br><span class="Apple-tab-span" style="white-space:pre"> </span>jQuery(function(){jQuery("\#Inty#=Id#").kendoTabStrip({});});<br><\/script>"

It appears to be choking on the encoded spaces such as  

My code producing this as follows

cshtml:

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

@(Html.Kendo().TabStrip().Name("Inty#=Id#").Items( items => items.Add().Text("Turtle").Content(@<text>Brownie</text>) ).ToClientTemplate())

</script>

@(

Html.Kendo().Grid<JobGridViewModel>()

.Name("Grid")

.ClientDetailTemplateId("jobGridTemplate")

.Columns(columns =>

{

columns.Bound(p => p.Id).Hidden();

columns.Bound(p => p.Name).Width("15em").ClientTemplate(Html.ActionLink("#=Name#", "Edit", new {selectedjobid = "#=Id#"}).ToHtmlString());

columns.Bound(p => p.Number).Width("11em");

columns.Bound(p => p.Cost).Width("12em");

columns.Bound(p => p.Status).Template(@<text>

@item.Status;

</text>)

.ClientTemplate("#= statusValues[Status] #")

.EditorTemplateName("JobStatusEditor").Width("9em");

columns.Bound(p => p.Date).Width(130).Format("{0:d}").EditorTemplateName("Date");

columns.Bound(p => p.Commissions).Filterable(false).Template(@<text>

@ListCommission(item, CommissionType.Sell)

</text>).EditorTemplateName("ClientCommission").ClientTemplate("#= template(data.Commissions) #").Sortable(false);

columns.Command(command =>

{

command.Edit();

command.Destroy();

command.Custom("Duplicate").Text("Copy").SendDataKeys(true).SendState(true).Click("onGridCommand");

}).Width(280);

}).ToolBar(y=> y.Template(

@<text>

<div>

Job Name

@(Html.Kendo().AutoComplete().Name("SearchName").DataSource(source =>

{

source.Read(read => read.Action("_GetJobNamesLike", "Jobs"                                                                                                                          })

.Events(events => events.Change("onFilterChange")))

</div>

<div>

Job Number

@(Html.Kendo().AutoComplete().Name("SearchNumber")

.DataSource(binding =>

{

binding.Read(read => read.Action("_GetJobNumbersLike", "Jobs"));

}).Events(events => events.Change("onFilterChange")))

</div>

@item.CustomCommandToolBarButton("NewJob", "New Job", "New", "Jobs", null)

</text>))

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Sortable()

.Pageable(paging => paging.PageSizes(new int[]{20,40,60,80}))

.Scrollable(config => config.Height(1000).Virtual(true))

.Resizable(resize => resize.Columns(true))

.Filterable()

.DataSource( dataBinding =>

dataBinding.Ajax().Events(e =>

{

e.RequestStart("onGridDataBinding"); // try Ajax().Data("sendData") return { foo: "bar" };

}).Model(model => model.Id(id => id.Id))

.Read(read=>read.Action("_SelectAjaxEditing", "Jobs", new {jobName="", jobNumber=""}))

.Create(create => create.Action("_InsertAjaxEditing", "Jobs"))

.Update(update => update.Action("_SaveAjaxEditing", "Jobs"))

.Destroy(destroy=>destroy.Action("_DeleteAjaxEditing", "Jobs")))

.Events(events =>

{

events.Change("onGridEdit").DataBound("onRowDataBound")

.DetailExpand("onGridExpand")

.DetailCollapse("onGridCollapse");

})

)





I am eager to see this product in action but this small issue would be a show stopper for me for switching over the rest of my code base.

4 Answers, 1 is accepted

answered on 31 Dec 2012, 07:28 AM

Hello Kolie,

I am afraid that the AntiXssEncoder is still not supported as we have not found a good way to escape the encoded characters in our code-base or allow the spaces in attributes which is the main reason for the problems with the encoder. Possible workarounds to use the encoder and avoid an error when using a detail are:

Override the AntiXssEncoder HtmlAttributeEncode method.
Temporarily change the current encoder to the HttpEncoder when using a detail.
Find all encoded spaces in the detail Grid string and escape them.

Kind regards,
Petur Subev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!