Converting from HtmlHelper to TagHelper: Content issue

[DoomerDGR8]

I was converting HtmlHelps to TagHelpers because the formatting in my code files is getting out of control. I realized that some Kendo controls are not that straightforward to convert.

This works fine:

@(Html.Kendo().TabStrip()
      .Name("tabStrip1")
      .SelectedIndex(0)
      .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
      .Items(items =>
      {
	      items.Add().SpriteCssClasses("fa-duotone fa-clock-rotate-left").Text("History").Content(@<text>@Html.DisplayFor(m => m.History, "LetterHistory")</text>);
	      items.Add().SpriteCssClasses("fa-duotone fa-thumbs-up").Text("Approvers").Content(@<text>@Html.DisplayFor(m => m.Approvers, "LetterApprovers")</text>);
	      items.Add().SpriteCssClasses("fa-duotone fa-magnifying-glass").Text("Details").Content("");
		  items.Add().SpriteCssClasses("fa-duotone fa-link").Text("Attachments").Content(@<text>@await Component.InvokeAsync(viewName, new { LetterGuid = Model.IdCode.ToString() })</text>);
      })
)

In TagHelper format, content is not shown for any tabs:

<kendo-tabstrip name="tabStrip">
	<popup-animation>
		<open effects="fade:in" />
	</popup-animation>
	<items>
		<tabstrip-item text="History" icon-class="fa-duotone fa-clock-rotate-left" selected="true">
			<content>@Html.DisplayFor(m => m.History, "LetterHistory")</content>
		</tabstrip-item>

		<tabstrip-item text="Approvers" icon-class="fa-duotone fa-thumbs-up">
			<content></content>
		</tabstrip-item>

		<tabstrip-item text="Details" icon-class="fa-duotone fa-magnifying-glass">
			<content>@Html.DisplayFor(m => m.Approvers, "LetterApprovers")</content>
		</tabstrip-item>

		<tabstrip-item text="Attachments" icon-class="fa-duotone fa-link">
			<content>@await Component.InvokeAsync(viewName, new { LetterGuid = Model.IdCode.ToString() })</content>
		</tabstrip-item>
	</items>
</kendo-tabstrip>

How do I display my content from DisplayFor or ViewComponent?

[Aleksandar]

Hello,

I am not sure I understand what the  actual issue is. Can you elaborate? Using DisplayFor and invoking a ViewComponent works as expected on my end, as you can see in this screencast. Attached is the sample used for the screencast. Consider elaboration on the issue and updating the attached sample so the behavior is reproducible and send it back to me for further review.

Regards,
Aleksandar
Progress Telerik

[DoomerDGR8]

The Tab is a part of a grid's ClientDetailTemplate:

<script id="detailTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
          .Name("tabStrip_#=AssetId#")
          .SelectedIndex(0)
          .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
          .Items(items =>
          {
items.Add().SpriteCssClasses("fa-duotone theme-elevate-fa fa-magnifying-glass ").Text("&nbsp;Details").LoadContentFrom("GetAssetDetails", "Revenue", new { masterGridId = "#=AssetId#" });
items.Add().SpriteCssClasses("fa-duotone theme-elevate-fa fa-chart-mixed      ").Text("&nbsp;Charts ").LoadContentFrom("GetLetterApprovers", "Revenue", new { masterGridId = "#=AssetId#" });
items.Add().SpriteCssClasses("fa-duotone theme-elevate-fa fa-clock-rotate-left").Text("&nbsp;History").LoadContentFrom("GetLetterDetails", "Revenue", new { masterGridId = "#=AssetId#" });
          })
          .ToClientTemplate()
    )
</script>

As you might have noticed, the content for each tab is "rendered in" from actual actions on the controller. I have DispayTemplates for views.

Can I convert the TabStrip to TagHelper?

Also, Now there is a new Template control you are offering. Can that fit here?

[Alexander]

Hi Hassan,

Generally, the .NET framework ignores any TagHelper which are within script tags. In order to compile them correctly, when placing a TagHelper within a kendo template, instead of setting the type to text/x-kendo-template, set it to text/html.

Here is an example:

<script id="detailTemplate" type="text/html">
	<kendo-tabstrip name="tabStrip#=Id#" is-in-client-template="true">
		<popup-animation>
			<open effects="fade:in" />
		</popup-animation>
		<items>
			<tabstrip-item text="History" icon-class="fa-duotone fa-clock-rotate-left" selected="true">
				<content>@Html.DisplayFor(m => m.ShipName, "LetterHistory")</content>
			</tabstrip-item>

			<tabstrip-item text="Approvers" icon-class="fa-duotone fa-thumbs-up">
				<content></content>
			</tabstrip-item>

			<tabstrip-item text="Details" icon-class="fa-duotone fa-magnifying-glass">
				<content>@Html.DisplayFor(m => m.ShipCity, "LetterApprovers")</content>
			</tabstrip-item>

			<tabstrip-item text="Attachments" icon-class="fa-duotone fa-link" content-url="@Url.Action("Load_Content", "Home")?masterGridId=#=Id#">
			</tabstrip-item>
		</items>
	</kendo-tabstrip>
</script>

This will then produce the following result within the Grid:

To further answer your question about the Template component. Given the state of the current scenario, directly inducting the Template component is not available out-of-the-box with combined TagHelper and HtmlHelper declaration. As the DetailTemplate currently exposes only external templating compositions for this scenario.

I am further sending a revamped version of the previous sample sent by my colleague Aleksandar.

I hope this information helps.