Syntax error, unrecognized expression: #grid_#=CustomerID# & #tabStrip_#=CustomerID#

[Lewis]

Hello,

I'm fairly new to Kendo and having an issue when attempting to pass a CustomerID to a TabStrip from a Grid.

Based on the following article I have tried to follow to get Order data loaded on the TabStrip however I'm running into the below JavaScript error

https://demos.telerik.com/aspnet-core/grid/detailtemplate

Syntax error, unrecognized expression: #tabStrip_#=CustomerID# & Uncaught Error: Syntax error, unrecognized expression: #grid_#=CustomerID#

Please see Grid and TabStrip code below.

@(Html.Kendo().Grid<LewisTestProject.Models.Customer>()
  .Name("grid")
  .DataSource(dataSource => dataSource
      .Ajax()
      .Model(model => {
          model.Id(p => p.CustomerID);
          model.Field(p => p.CustomerID).Editable(false);
      })
      .PageSize(18)
      .Read(read => read.Action("Customers_Read", "Customer"))
      .Create(create => create.Action("Customers_Create", "Customer"))
      .Update(update => update.Action("Customers_Update", "Customer"))
      .Destroy(destroy => destroy.Action("Customers_Destroy", "Customer"))

   )
  .Columns(columns =>
  {
      columns.Bound(order => order.CustomerID);
      columns.Bound(order => order.CompanyName);
      columns.Bound(order => order.ContactName);
      columns.Bound(order => order.ContactTitle);
      columns.Bound(order => order.Address);
      columns.Bound(order => order.City);
      columns.Bound(order => order.Region);
      columns.Bound(order => order.PostalCode);
      columns.Bound(order => order.Country);
      columns.Bound(order => order.Phone);
      columns.Bound(order => order.Fax);
      columns.Command(command =>
      {
          command.Edit();
          command.Destroy();
      }
      ).Title("Actions");
  })
  .ToolBar(toolbar => {
      toolbar.Create();
      toolbar.Search();
  })
  .Pageable()
  .Sortable()
  .ClientDetailTemplateId("template")
  .Events(events => events.DataBound("dataBound"))
  .Editable(e => e.Mode(GridEditMode.InLine))
 )

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
    .Name("tabStrip_#=CustomerID#")
    .SelectedIndex(0)
    .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
    .Items(items =>
    {
        items.Add().Text("Orders").Content(@<text>
            @(Html.Kendo().Grid<LewisTestProject.Models.OrderViewModel>()
                .Name("grid_#=CustomerID#") // template expression, to be evaluated in the master context
                .Columns(columns =>
                {
                    columns.Bound(o => o.CustomerID);
                    columns.Bound(o => o.OrderID).Title("ID").Width(100);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("OrdersDetail_Read", "Customers", new { customerID = "#=CustomerID#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
                )
        </text>
        );
        //items.Add().Text("Contact Information").Content(
        //    "<div class='employee-details'>" +
        //        "<ul>" +
        //            "<li><label>Country:</label>#= Country #</li>" +
        //            "<li><label>City:</label>#= City #</li>" +
        //            "<li><label>Address:</label>#= Address #</li>" +
        //            "<li><label>Home Phone:</label>#= Phone #</li>" +
        //        "</ul>" +
        //    "</div>"
        //);
    })
    .ToClientTemplate()
    )
</script>

Any help would be greatly appreciated.

Thanks,

Lewis.

[Anton Mironov]

Hi Lewis,

Thank you for the code snippets and the details provided.

In order to achieve the desired behavior, we have to add .Deferred(false) because @(Html.Kendo().DeferredScriptFile()) in your Layout automatically collects and initializes all Kendo components at page load.

However, inside a ClientDetailTemplate (where IDs like #=OrderID# still contain placeholders), these widgets aren't ready yet — they exist only after expanding the row.

Without .Deferred(false), Kendo tries to find #tabStrip_#=OrderID# immediately, causing invalid jQuery selectors and syntax errors.
Adding .Deferred(false) tells Kendo: "Don't auto-initialize this component — it will appear later dynamically."

I made a couple of tests with a code very similar to yours, and here is its working version(only in the template we should add Deferred(false) to the components):

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
    .Name("tabStrip_#=OrderID#")
    .SelectedIndex(0)
    .Deferred(false)
    .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
    .Items(items =>
    {
        items.Add().Text("Orders").Content(@<text>
            @(Html.Kendo().Grid<TelerikMvcApp10.Models.OrderViewModel>()
                .Name("grid_#=OrderID#") // template expression, to be evaluated in the master context
                .Columns(columns =>
                {
                    columns.Bound(o => o.Freight).Title("ID").Width(100);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
                .Deferred(false)
                .Pageable()
                .Sortable()
                .ToClientTemplate()
                )
        </text>
        );
        //items.Add().Text("Contact Information").Content(
        //    "<div class='employee-details'>" +
        //        "<ul>" +
        //            "<li><label>Country:</label>#= Country #</li>" +
        //            "<li><label>City:</label>#= City #</li>" +
        //            "<li><label>Address:</label>#= Address #</li>" +
        //            "<li><label>Home Phone:</label>#= Phone #</li>" +
        //        "</ul>" +
        //    "</div>"
        //);
    })
    .ToClientTemplate()
    )
</script>

Give a try to this approach and let me know if it achieves the desired result.

Kind Regards,
Anton Mironov
Progress Telerik