Grid detail template referencing child data item in Razor tag helper

[Mario]

I have a grid child template that consists of a data source and several charts referencing that data source. It is a mystery to me how you are supposed to reference the 'data' context in different scenarios.

After much trial and error I got the url and filter value on the data source to resolve successfully.

But with these nothing seems to work...

The 'name' attribute on kendo-datasource just renders literally as 'ds-${data.DeviceId}'

Same with the 'datasource-id' attributes on the charts.

Tried variants on wrapping in @() but am getting nowhere. Very confusing and seems the only documentation is this example:

Integration with Grid in ASP.NET Core Template Component Demo | Telerik UI for ASP.NET Core

<grid-detail-template>
    <kendo-datasource name="ds-${data.DeviceId}" type="DataSourceTagHelperType.Ajax" server-filtering="true" is-in-client-template="true">
        <transport>
            <read url="@Html.Raw("/Devices/Diagnostics/${data.DeviceId}?handler=Read")" type="post" data="forgeryToken" />
        </transport>
        <filters>
            <datasource-filter logic="and">
                <filters>
                    <datasource-filter field="DeviceId" operator="eq" value="@("${data.DeviceId}")"></datasource-filter>
                    <datasource-filter field="LogDate" operator="gt" value="@DateTime.Today.AddMonths(-1)"></datasource-filter>
                </filters>
            </datasource-filter>
        </filters>
        <schema>
            <model>
                <fields>
                    <field name="DeviceId" type="number" />
                    <field name="LogDate" type="date" />
                </fields>
            </model>
       </schema>
</kendo-datasource>
<kendo-chart name="memChart" theme="Bootstrap" datasource-id="ds-${data.DeviceId}">
</kendo-chart>

 

[Mihaela]

Hello Mario,

Usually, the standalone DataSource component is not used in the components templating options since it is not a UI component. For this reason, the Template component does not support integration of a standalone DataSource component.

Having this in mind, to achieve the desired result, I would suggest adding the child grid through the default "detail-template-id" attribute:

<script id="template" type="text/html">
    <kendo-datasource name="ds_#=DeviceId#" type="DataSourceTagHelperType.Ajax" server-filtering="true" is-in-client-template="true">
        <transport>
             <read url="@Html.Raw("/Devices/Diagnostics/#=DeviceId#?handler=Read")" type="post" data="forgeryToken" />
        </transport>
        <filters>
            <datasource-filter logic="and">
                <filters>
                    <datasource-filter field="DeviceId" operator="eq" value="@("#=DeviceId#")"></datasource-filter>
                    <datasource-filter field="LogDate" operator="gt" value="@DateTime.Today.AddMonths(-1)"></datasource-filter>
                </filters>
            </datasource-filter>
        </filters>
        <schema>
            <model>
                <fields>
                    <field name="DeviceId" type="number" />
                    <field name="LogDate" type="date" />
                </fields>
            </model>
       </schema>
    </kendo-datasource>

    <kendo-chart name="memChart_#=DeviceId#" is-in-client-template="true" datasource-id="ds_#=DeviceId#">
        ...
    </kendo-chart>
</script>

 <kendo-grid name="grid" height="550" detail-template-id="template">
  ...
</kendo-grid>

Let me know if this example works as expected at your end.

 

Regards, Mihaela Progress Telerik