Kendo Editor inside Tabstrip (tabstrip is within a Kendo grid column)

[Aaron]

I have been trying to do this but always end up getting a runtime JavaScript Error:

Is there a way to do this?

Here's my view:

@(Html.Kendo().Grid<Scholarship2013.Models.AwardCart>()
        .Name("Essay")
        .Columns(columns =>
        {

            columns.Template(@<text></text>).ClientTemplate("#= AwardName # ").Title("Award essay");

        }
        )
        .ClientDetailTemplateId("essayTemplate")
        .Pageable()
        .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Read(read => read.Action("Essay_Read", "Student"))
        .PageSize(10)
        )

    )


<script id="essayTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("TabStrip_" + "#=AwardID#")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Award Essay").Content(@<text>

                   @Html.Kendo().Editor().Name("Test")

                </text>);
            })
            .ToClientTemplate()
            )
</script>

JS Error:

Unhandled exception at line 9, column 7339 in http://localhost:21527/Scripts/kendo/2012.3.1315/kendo.all.min.js

0x800a139e - Microsoft JScript runtime error: Invalid template:'

    <div class="k-widget k-tabstrip k-header" id="TabStrip_#=AwardID#"><ul class="k-reset k-tabstrip-items"><li class="k-item k-state-default k-state-active"><a class="k-link" href="\#TabStrip_#=AwardID#-1">Award Essay</a></li></ul><div class="k-content k-state-active" id="TabStrip_#=AwardID#-1" style="display:block">





<textarea cols="20" id="Test" name="Test" rows="5"></textarea><script>

    jQuery(function(){jQuery("#Test").kendoEditor({"tools":[{"name":"bold"},{"name":"italic"},{"name":"underline"},{"name":"strikethrough"},{"name":"fontName"},{"name":"fontSize"},{"name":"foreColor"},{"name":"backColor"},{"name":"justifyLeft"},{"name":"justifyCenter"},{"name":"justifyRight"},{"name":"justifyFull"},{"name":"insertUnorderedList"},{"name":"insertOrderedList"},{"name":"outdent"},{"name":"indent"},{"name":"formatBlock"},{"name":"createLink"},{"name":"unlink"},{"name":"insertImage"}],"messages":{"backColor":"Background Color"}});});

<\/script>



                </div></div><script>

    jQuery(function(){jQuery("\#TabStrip_#=AwardID#").kendoTabStrip({});});

<\/script>

' Generated code:'var o,e=kendo.htmlEncode;with(data){o='\n    <div class="k-widget k-tabstrip k-header" id="TabStrip_'+(AwardID)+'"><ul class="k-reset k-tabstrip-items"><li class="k-item k-state-default k-state-active"><a class="k-link" href="#TabStrip_'+(AwardID)+'-1">Award Essay</a></li></ul><div class="k-content k-state-active" id="TabStrip_'+(AwardID)+'-1" style="display:block">\n                   \n                   \n<textarea cols="20" id="Test" name="Test" rows="5"></textarea><script>\n\tjQuery(function(){jQuery("';Test").kendoEditor({"tools":[{"name":"bold"},{"name":"italic"},{"name":"underline"},{"name":"strikethrough"},{"name":"fontName"},{"name":"fontSize"},{"name":"foreColor"},{"name":"backColor"},{"name":"justifyLeft"},{"name":"justifyCenter"},{"name":"justifyRight"},{"name":"justifyFull"},{"name":"insertUnorderedList"},{"name":"insertOrderedList"},{"name":"outdent"},{"name":"indent"},{"name":"formatBlock"},{"name":"createLink"},{"name":"unlink"},{"name":"insertImage"}],"messages":{"backColor":"Background Color"}});});

<\/script>



                </div></div><script>

    jQuery(function(){jQuery("#TabStrip_;o+='=AwardID';").kendoTabStrip({});});

<\/script>

;o+=;}return o;'

Thanks,
Aaron

[Petur Subev]

Hello Aaron,

I can see that you have correctly added the ToClientTemplate to the TabStrip however you missed to add it to the Editor as well.
Also you need to ensure the name of the Editor is also unique:

<script id="essayTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("TabStrip_" + "#=AwardID#")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Award Essay").Content(@<text>

                   @(Html.Kendo().Editor().Name("Test#=AwardID#").ToClientTemplate())

                </text>);
            })
            .ToClientTemplate()
            )
</script>

Kind Regards,
Petur Subev
the Telerik team

[Aaron]

Hi Petur,

Your suggestion works, now I have better understanding on how to do nested kendo widgets. 

Another question, assuming it is possible, how can do a data bind (the one with intellisense) to the Kendo Editor especially with my nested setup? I think this might have to be done using Kendo().EditorFor() but I'm still unsure how to since I don't have a model declared in this view (partial view). I'm having a problem of losing entered data when validation error occurs (triggered by form submit) in my form and binding the data could solve this problem I think.

This view is actually a partial view of my main form view. Hope I explained it clearly.

Here's my modified code:

@(Html.Kendo().Grid<Scholarship2013.Models.ViewModels._VMAwardsWithEssay>()
        .Name("Essay")
        .Columns(columns =>
        {
            columns.Bound(o => o.AwardID);
            columns.Bound(o => o.AwardName);
            //columns.Template(@<text></text>).ClientTemplate("#= AwardName # ").Title("Award essay");
            //columns.Command(command => command.Custom("ShowEssayEditor").Click("showEssayEditor")).Title("Enter Essay").HtmlAttributes(new { @style = "font-size:10px" });
        }
        )
        .ClientDetailTemplateId("essayTemplate")
        .Pageable()
        .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Read(read => read.Action("Essay_Read", "Student"))
        .PageSize(10)
        )

    )


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

    @(Html.Kendo().TabStrip()
            .Name("TabStrip_"+"#=AwardID#")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Award Essay").Content(@<text>


                   @(Html.Kendo().Editor().Name("EssayEditor_#=AwardID#").ToClientTemplate())

                </text>);
            })
            .ToClientTemplate()
            )

</script>

Controller Data source 

public ActionResult Essay_Read([DataSourceRequest]DataSourceRequest request)
      {

          var data = GetCartItems().AwardCartItems.Select(x => new _VMAwardsWithEssay
          {
              CartID = x.CartID,
              AwardID = x.AwardID,
              AwardName = x.Award.AwardName,
              IsEssayRequired = x.Award.IsEssayRequired
          }).Where(a => a.IsEssayRequired == true);

          return Json(data.ToDataSourceResult(request));


      }

And thanks for your help!

Regards,
Aaron

[Petur Subev]

Hello again,

I do not understand the question. Value is set through the value method. If you want to set it from the model again client expression should be used.

e.g.

@(Html.Kendo().Editor().Name("Test#=PersonID#").Value("#=Name#").ToClientTemplate())

Kind Regards,
Petur Subev
the Telerik team

[Aaron]

Hi Petur,

I was trying something more like this

@model Scholarship2013.Models.Application

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

    

    @(Html.Kendo().TabStrip()

            .Name("TabStrip_"+"#=AwardID#")

            .SelectedIndex(0)

            .Items(items =>

            {

                items.Add().Text("Award Essay for #=AwardName#").Content(@<text>

                    

                    

                   @(Html.Kendo().Editor().Name("EssayEditor_#=AwardID#").Value(Model == null ? string.Empty : Model.ApplicationDetails[0].Essay).ToClientTemplate())

                        

                </text>);

            })

            .ToClientTemplate()

            )

    

</script>

but i cant get it to work when i bind the Value to the Model (Model.ApplicationDetails[0].Essay)

[Petur Subev]

Hello Aaron,

If adding the following line to your page

@(Model == null ? string.Empty : Model.ApplicationDetails[0].Essay)

produces any output then the value should be added successfully the same way. 

Also make sure that there are not any # symbols within the Value of that field (they will break the client template). If you continue to struggle feel free to open support ticket and send a sample project which we can run and see what goes wrong.

Kind regards,
Petur Subev
the Telerik team