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

Error in DetailView ClientTemplate with TabStrip in a Grid

4 Answers 327 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kolie
Top achievements
Rank 1
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&#32;k-tabstrip&#32;k-header" id="Inty#=Id#"><ul class="k-reset&#32;k-tabstrip-items"><li class="k-item&#32;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 &#32;


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

Sort by
0
Petur Subev
Telerik team
answered on 25 Dec 2012, 02:47 PM
Hello Kolie,

Could you see if the problem is not actually this one http://stackoverflow.com/questions/13616320/problems-with-kendo-grid-hierarchy ?

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!
0
Kolie
Top achievements
Rank 1
answered on 27 Dec 2012, 12:02 AM
This fixes the issue. As I understand it the AntiXss encoder is for security purposes. Is there any way to keep it enabled with a workaround, or does Kendo UI not currently support having it enabled?
0
Petur Subev
Telerik team
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!
0
Robert
Top achievements
Rank 1
answered on 06 Jun 2013, 08:27 PM
I actually found a solution to this problem today, and have submitted a ticket to Telerik to get it fixed. I've posted it to Gist, along with some instructions. If you have any questions, please don't hesitate to ask.

HTH,

Robert McLaws
CTO and co-founder, AdvancedREI.com
Tags
General Discussions
Asked by
Kolie
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Kolie
Top achievements
Rank 1
Robert
Top achievements
Rank 1
Share this question
or