Tabstrip Template Component is not recognizing template literals inside LoadContentFrom method

[Mitesh]

Hello,
I am currently converting kendo external template to CSP template. Below is the code for the CSP template

Html.Kendo().Template().AddComponent(tabStrip => tabStrip.TabStrip()
        .Name("ed_${data.TabGuid}")
        .SelectedIndex(0)
        .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
        .HtmlAttributes(new { gridName = "Grid" + id)
        .Events(ev => ev.Activate("tabEvent"))
        .Items(items => items.Add().Text("TabName")
            .LoadContentFrom(Url.Action("ControllerName", "ActionName",
                    new
                    {
                        param= "${data.Property1}",  
                        param1= false,
                        param2= false,
                        param3= false
                    })))
    );

The current URL forming is considering ${data.Property1} as a string in the content URL formed in the kendo deferred script.
Is there any way that it could consider ${data.Property1} as a template literal inside contentUrl?

[Alexander]

Hi Mitesh,

I took notice of the fact that currently there is no license associated with your account. This inevitably limits our support service. Thus, my personal advice here would be to take a look at the following Support Plans. In case you want to see what each of the tiers brings to the table:

• Support Plans

I would personally like to address your inquiry, regardless.

At this stage, the ".LoadContentFrom()" API configuration would not be able to pass an arbitrary property when using the template syntax. This might be a limitation coming from the fact that the previously mentioned API configuration would make a GET request to the specified remote endpoint. However, this might be worth investigating further.

Hence, the operation needs to be done manually via an identical approach which is showcased in our online examples:

UI For ASP.NET MVC CSP Examples Repository - https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/csp-examples

To spare you some time here are the utilized code portions in a more separate manner:

• View
• Controller
• Partial View
• Parent Model
• Child Model

The main thing to take into consideration is that the ".LoadContentFrom()" API configuration of the  TabStrip is omitted.

And instead, the Grid is loaded via a JavaScript interventional logic by wiring to the component's Select event. This is where you can supplement arbitrary amount of parameters:

<script language="javascript" type="text/javascript">
    function onSelect(e) {
        e.sender.setOptions({
            contentUrls: [
                {
                    url:"@Url.Action("_Child_Grid", "Home")"+"?OrganizationGroupId="+expandId
                },
                null
            ]
        });
    }
</script>

I hope this helps.

Kind Regards,
Alexander
Progress Telerik

[Emily]

Hi Alexander,

Are there any plans to implement the ability to pass data through .LoadContentFrom() using ${data.PropertyName}?

I have a grid with the following ClientDetailTemplate and I would like to pass the ${data.id} to the parameters in LoadContentFrom() Url Action. I see the id being returned for "TabStrip_${data.id}" and "Branch ${data.id}", but when it's passed into the parameters in Url Action, I'm getting a 0.

.ClientDetailTemplate(Html.Kendo().Template()
	.AddComponent(c => c.TabStrip()
		.Name("TabStrip_${data.id}")
		.Items(items =>
		{
			items.Add().Text("Branch ${data.id}")
				.LoadContentFrom(
					Url.Action(nameof(TestController.LoadBranchGrid), "Test", new { id = "${data.id}" })
				);
		}
	)
)

 

[Alexander]

I am happy to share the news that as of the 2024 Q3, the TabStrip adds the Data, Type and Headers overloads of the TabStripItemBuilder to provide support for configuring additional jQuery.ajax options of the request, fetching the Tab content from to the remote endpoint.

This is further documented in the following section:

• Loading Content with AJAX (Documentation)

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Items(tabstrip =>
    {
        tabstrip.Add().Text("Paris")
            .LoadContentFrom(Url.Action("Paris", "Home")).Data("additionalData").Type(HttpVerbs.Post);

        tabstrip.Add().Text("Sofia")
            .LoadContentFrom(Url.Action("Sofia", "Home"));
    })
)

However, in the context of a Content Security scenario, this will inevitably not obey the employed CSP directive for non-inline script execution.

[Emily]

Thanks for the information. My goal is to convert to a CSP compliant template. Are there plans to make this CSP compliant?

[Alexander]

During my tests, it appears that the handler falls within the "unsafe-inline" directive, this might require further investigation in order to provide you with a more firm stand regarding whether the handler can be altered, so that it meets the CSP criteria.

For the time being, I suggest leveraging the approach I shared from the "5th of July".