Different editortemplates when using Html helpers vs Tag Helpers

[Pavlos]

I made two identical grids.
One using the Html helper and one using the Tag helper.
Both have inline editing enabled.

However the editor templates don't seem to correspond or not even be present in some cases.
I've attached a screenshot.

How do I just make it work in both cases?

[Pavlos]

@(Html.Kendo().Grid<OrderViewModelTest>()
    .Name("TestGrid")
    .HtmlAttributes(new {})
    .Columns(columns =>
    {
        columns.Bound(c => c.OrderID).Filterable(false);
        columns.Bound(c => c.Freight);
        columns.Bound(c => c.OrderDate).Format("{0:dd/MM/yyyy}");
        columns.Bound(c => c.ShipName);
        columns.Bound(c => c.ShipCity);
        columns.Command(command => command.Edit());
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Scrollable()
    .Navigatable()
    .Sortable()
    .Filterable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)
        .Read(read => read.Action("Orders_Read", "Test"))
    ))

<div class="row">
    <div class="col-12">
        <kendo-grid name="grid">
            <columns>
                <column field="OrderID" title="Order ID">
                    <filterable enabled="false"></filterable>
                </column>
                <column field="Freight" title="Freight" />
                <column field="OrderDate" title="Order Date" format="{0:MM/dd/yyyy}" />
                <column field="ShipName" title="Ship Name" />
                <column field="ShipCity" title="Ship City" />
                <column>
                    <commands>
                        <column-command name="edit"></column-command>
                    </commands>
                </column>
            </columns>
            <scrollable enabled="true" />
            <sortable enabled="true" />
            <pageable enabled="true" />
            <editable enabled="true" mode="inline" />
            <filterable enabled="true" />
            <datasource type="DataSourceTagHelperType.Ajax" page-size="5">
                <transport>
                    <read url="@Url.Action("Orders_Read", "Test", new {Area = "Test"})"/>
                </transport>
            </datasource>
        </kendo-grid>
    </div>
</div>

[Alex Hajigeorgieva]

Hi, Pavlos,

Thank you very much for the explanations and screenshots.

The reason for the behaviour is that the model properties of the Razor syntax generated grid are inferred from the model in its definition while the TagHelper requires us to describe the data types of the properties. Once you do that, the same editor will be generated for the TagHelper grid as well:

https://docs.telerik.com/aspnet-core/tag-helpers/data-management/grid/editing

<datasource type="DataSourceTagHelperType.Ajax" page-size="5">
        <transport>
            <read url="@Url.Action("Orders_Read", "Test", new {Area = "Test"})"/>
        </transport>
        <schema  >
            <model id="OrderID">
                <fields>
                    <field name="Freight" type="number"></field>
                    <field name="OrderDate" type="date"></field>
                    <field name="UnitsInStock" type="number"></field>
                </fields>
            </model>
        </schema>
</datasource>

Give this a try and let me know in case you need further assistance.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Pavlos]

Good to know, must have missed that in the documentation.
Got it working perfectly now.

Thanks Alex!