Error in DetailView ClientTemplate with TabStrip in a Grid

5 posts, 0 answers
  1. Kolie
    Kolie avatar
    4 posts
    Member since:
    Oct 2012

    Posted 21 Dec 2012 Link to this post

    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.

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 25 Dec 2012 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Kolie
    Kolie avatar
    4 posts
    Member since:
    Oct 2012

    Posted 26 Dec 2012 Link to this post

    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?
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 31 Dec 2012 Link to this post

    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!
  6. Robert
    Robert avatar
    38 posts
    Member since:
    Feb 2012

    Posted 06 Jun 2013 Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready