I am encountering an issue while integrating a Kendo Grid within a TabStrip. Whenever I attempt to add the Grid, I receive the attached error(image.png) in the browser console:  Uncaught Error: Invalid template.

Below is the code I am trying to put inside TabStrip. Not sure Please let me know what the mistake I am doing. 

 <div id="divEquipmentDetailsGrid" >
     @(Html.Kendo().Grid<EPP.Core.DTOs.UserEqupmentDetailsDTO>(Model.UserEquipDetails)
                     .Name("EquipmentDetailsGrid")
                     .Columns(columns =>
                     {
                         columns.Bound(p => p.EquipmentName).Title("ss");
                         columns.Bound(p => p.AssertTag).Width(130).Title("tt");
                         columns.Bound(p => p.Accessories).Width(130).Title("rr");
                     })
                 )
 </div>

If I remove the above code I am able to see tabs and data inside the tabs but When I add above code, nothing is displaying and getting error.

I am attaching full code cshtml file.

I need to be able to render a tabstrip with a dynamic number of tabs, and then within each tab a griid to display records that relate to the tab.

Basically it is grouping sets of data into tabs, and then displaying the records from that group in the grid.

The underlying source of the grids is all the same, albeit each one would be showing a different subset of records.

The number of tabs/grids required would be unknown until the data is loaded.

Is this even possible? I have searched but can't find an example doing exactly what I need.

Thanks

I have used partial views in many places, usually nested within a tab control, but also in some places nested inside a for EditorTemplate.

This was done using following type of code :

Html.Partial("_PartialViewName", Model)

Visual Studio was warning of :

MVC1000 : Use of IHtmlHelper.Partial may result in application deadlocks. Consider using <partial> Tag Helper or IHtmlHelper.PartialAsync.

So I went through and changed code where I could to :

awaits Html.PartialAsync("_PartialViewName", Model)

This works fine where the partial was within a tab control, or direct on the view but not when it's within an EditorTemplate on a form. Trying the same code gives this error :

The 'await' operator can only be used within an async lambda expression. Consider marking this lambda expression with the 'async' modifier.

I have tried a few things but nothing that VS will accept. Can it be done?

Thanks

https://demos.telerik.com/aspnet-core/grid/hierarchy?_gl=1*j684iw*_gcl_au*NzkwOTcxNzM0LjE3MzI2ODQyMjI.*_ga*NDI2MDIyNDE3LjE3MDM2NjI4NTM.*_ga_9JSNBCSF54*MTczMzEyMTgzOC42LjEuMTczMzEyNzMwNy40Ny4wLjA.

I have build my parent child table grid by referring above link. Still i need to have check box for each row just like checkbox tree. 

For that i need to bind my child row id in template, I tried as below. 

Issue is:

At runtime, it is trowing error from child table by saying that it can not bind "OrderId" (No order id is not found).

Further i found out, This template only able to bind the date from parent data source only.

I have list of tabs in my model like

In cshtml: my Tabstrip looks like this

Since Html.Action is no longer works in .net 8. Need suggestion to overcome this issue.
Now, I'm unable to navigate to the page which has this tabstrip due to Html.Action issue

Hi all,

Need some assistance with this one please - may be something simple but I've been battling to get this right all day.

I have following this article to build a step-wise wizard: https://www.telerik.com/blogs/step-wise-forms-with-asp-net-mvc-and-kendo-ui

Everything is working well and as expected however on my first tabstrip (content loaded from a partialview) I have several inputs for various fields.

Some fields display correctly and some is smaller in height. They are defined all the same in the source file (with the exception of the field name). Both the below samples point to string fields.

I don't have any css defined elsewhere, just bootstrap and fluent style in use.

Eg:

Form declaretion:

...

        @using (Html.BeginForm("AddCRMClient", "CRM", FormMethod.Post, new { role = "form" }))

...

Displays correctly:

  ...

      <div class="col-7">
            @Html.LabelFor(m => m.CustomerName, new { @class = "form-label" })
            @(Html.Kendo().TextBoxFor(m => m.CustomerName)
                .HtmlAttributes(new { placeholder = "", type = "text", @class = "k-textbox" })
                )
        </div>

...

Height is smaller:

...

      <div class="col-6">
            @Html.LabelFor(m => m.VATNumber, new { @class = "form-label" })
            @(Html.Kendo().TextBoxFor(m => m.VATNumber)
                .HtmlAttributes(new { placeholder = "", type = "text", @class = "k-textbox" })
                )
        </div>

...

This is the result:

As you can see there are many controls that does not display correctly.

When I look at these via dev tools, I can see the controles that display correctly does have 2 spans which encapsulates the input, the ones that does not display correctly only has one span.

Eg:

vs.

Layout file to show referenced css, js files.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - VAPS Admin System</title>

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    </environment>
    @*Core Content Start*@

    <link rel="stylesheet" href="~/css/kendofonts.css" />

    <script src="~/js/site.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" integrity="sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link href="@Url.Content("~/lib/kendo-ui/styles/fluent-main.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/lib/jquery/jquery.min.js")"></script>
    <script src="@Url.Content("~/lib/kendo-ui/js/jszip.min.js")"></script>
    <script src="@Url.Content("~/lib/kendo-ui/js/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/lib/kendo-ui/js/kendo.aspnetmvc.min.js")"></script>

    <link rel="stylesheet" href="~/css/site.css" />

    <script src="~/lib/kendo-ui/js/cultures/kendo.culture.en-ZA.min.js"></script>
    @*Core Content End*@

.............

What would cause this, and how do I fix it?

Using Telerik.UI.for.AspNet.Core Version 2023.3.1114 with VS 2022.

Thanks in advance.

We're currently out of support. I don't know if Bug reports are being monitored here.

Please see REPL: https://netcorerepl.telerik.com/QekyEebS14OOdCp509

Problem: Drag&Drop of Row (Reorderable) not working because Grid inside TabStrip.