Tag Helper Documentation & Demos

[Tim]

The documents and demo for the grid tag helpers are appalling, the example tag helper is so basic that it's practically useless.

How can you release new functionality and not bother to add the relevant documentation and demos e.g a grid with full editing with  or incell examples?

Are we to guess?

 

[Viktor Tachev]

Hello Tim,

Thank you for the provided feedback. We are currently working on improving the documentation and examples regarding TagHelpers and we will update the resources as soon as possible. As a token of gratitude for your feedback I have updated your Telerik points. 

With that said, the configuration for a Grid TagHelper that is using InLine editing would look similar to the following. 

<kendo-grid name="grid" height="550">
    <datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
        <transport>
            <read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" />
            <update url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Update" />
            <destroy url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Destroy" />
        </transport>
        <schema>
            <model id="ProductID">
                <fields>
                    <field name="ProductName"></field>
                </fields>
            </model>
        </schema>
    </datasource>
    <editable mode="inline" />
    <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
    </pageable>
    <columns>
        <column field="ProductName" title="ProductName" width="240" />
        <column field="UnitPrice" title="UnitPrice" />
        <column field="UnitsInStock" title="UnitsInStock" />
        <column field="Discontinued" title="Discontinued" width="150" />
        <column>
            <commands>
                <column-command text="Edit" name="edit"></column-command>
                <column-command text="Destroy" name="destroy"></column-command>
            </commands>
        </column>
    </columns>
</kendo-grid>

The configuration with InCell editing would look very similar with the difference that there will be a toolbar with add new record and save buttons.

<kendo-grid name="grid" height="550">
    <datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
        <transport>
            <read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" />
            <update url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Update" />
            <destroy url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Destroy" />
        </transport>
        <schema>
            <model id="ProductID">
                <fields>
                    <field name="ProductName"></field>
                </fields>
            </model>
        </schema>
    </datasource>
    <editable mode="incell" />
    <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
    </pageable>
    <toolbar>
        <toolbar-button name="create" text="Add new record"></toolbar-button>
        <toolbar-button name="save" text="Save Changes"></toolbar-button>
        <toolbar-button name="cancel" text="Cancel Changes"></toolbar-button>
    </toolbar>
    <columns>
        <column field="ProductName" title="ProductName" width="240" />
        <column field="UnitPrice" title="UnitPrice" />
        <column field="UnitsInStock" title="UnitsInStock" />
        <column field="Discontinued" title="Discontinued" width="150" />
        <column>
            <commands>
                <column-command text="Destroy" name="destroy"></column-command>
            </commands>
        </column>
    </columns>
</kendo-grid>

I hope that helps. In case you have additional queries or feedback please do not hesitate to contact us.

Regards,
Viktor Tachev
Progress Telerik

[Tim]

Thanks for the detail.

How about the ?

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

 

[Tim]

Andhow do I convert this filter?

columns.Bound(c => c.Description).Filterable(ftb => ftb.Cell(cell =>cell.Operator("contains").SuggestionOperator(FilterType.Contains)));

[Viktor Tachev]

Hi Tim,

The filterable settings for a specific column can be defined like illustrated in the code snippet below:

<column field="ProductName" title="Product Name" width="240">
    <filterable>
        <cell operator="Contains" suggestion-operator="Contains"></cell>
    </filterable>
</column>

As for the foreign key column. This option is currently unavailable for the Grid Tag Helper. If this feature is a must I can suggest using the HtmlHelper for now.


Regards,
Viktor Tachev
Progress Telerik

[Tim]

Hi Viktor,

[quote]Viktor Tachev said Tim,

As for the foreign key column. This option is currently unavailable for the Grid Tag Helper. If this feature is a must I can suggest using the HtmlHelper for now.

[/quote]

 

1. Is this on the roadmap?

2. What's the alternative if I want to use TagHelpers?

Regards,

Tim

 

[Viktor Tachev]

Hi Tim,

I am afraid that this is not currently in the  roadmap. However, I have forwarded your request to the developers and they will investigate if the feature can be added to the tag helpers. 

As an alternative I can suggest using a custom editor. The example below outlines the functionality.

• https://docs.telerik.com/aspnet-core/helpers/tag-helpers/grid#editing-custom-editor

Regards,
Viktor Tachev
Progress Telerik

[Tim]

OK, but it amazes me how you can just decide not to implement certain functionality. If you were not intending to implement all the features in the tag helpers why bother in the first place?

 

[Viktor Tachev]

Hi Tim,

Thank you for the provided feedback, we appreciate it. The developers are doing their best to improve the TagHelpers alongside fixing known issue and implementing new features. 

As I mentioned in my previous post, I have contacted the developers and they will look into improving the features available for the TagHelper components.

Regards,
Viktor Tachev
Progress Telerik

[Gabriel]

Hello,

Any updates on the foreign key column feature for TagHelpers?

[Tsvetomir]

Hi Gabriel,

The foreignKey column is supported only when using the Razor syntax. I am afraid that the Grid TagHelper does not provide a ForeignKey column out of the box. 

If the  column is a must I would suggest using the HtmlHelper as shown in the following live demo:

• https://demos.telerik.com/aspnet-core/grid/foreignkeycolumn

Kind regards,
Tsvetomir
Progress Telerik

[James]

"As for the foreign key column. This option is currently unavailable for the Grid Tag Helper. If this feature is a must I can suggest using the HtmlHelper for now."

Is there an estimate of when the foreign key column will be supported in TagHelper?  Users don't expect to see columns sorted by a foreign key GUID.  Without the ability to define the sort for columns, TagHelpers is not supporting a pretty standard use-case.  I've already invested in implementing TagHelpers, so casually suggesting I don't use them is a bad option.

Could someone suggest a functioning work around that allows for using TagHelpers with foreign keys  

<column field="Employee.Id" title="Employee" template="#=data.Employee.FullName#" min-resizable-width="20" editor="EmployeeEditor"/>

This sorts using the field value

https://localhost:44391/api/TimeRecords?sort=Employee.Id-asc&page=1&pageSize=10&group=&filter=

Can't someone modify the functionality to pick up an alternate 'sort-by' field?  For example

<column field="Employee.Id" title="Employee" template="#=data.Employee.FullName#" sort-by="Employee.FullName" min-resizable-width="20" editor="EmployeeEditor"/>

would change the sort URL  to 

https://localhost:44391/api/TimeRecords?sort=Employee.FullName-asc&page=1&pageSize=10&group=&filter=

[Tsvetomir]

Hi James,

If you would like to hide the GUID from the URL, set the field attribute to be FullName, rather than id. Since the desired scenario is to apply conditions like sorting and filtering based on the FullName property of the model, I suggest you pass the property to the field property.

<column field="Employee.FullName" . . . />

The implementation of the foreign key column is a limitation from the Tag Helpers rather than dependent on the Kendo Team. The collection that is mandatory for populating the foreign key column cannot be added using the Tag helpers. This is the column.values collection. The ket/value pair collection has to be passed to the foreign key column in order to enable the grid to match the IDs with the Values. 

Nevertheless, this is available with the Html helpers. The ASP.NET Core Framework works with both Html helpers and Tag helpers. The Html helpers are valid due to backward compatibility with ASP.NET MVC. 

Let me know in case any concerns or questions arise.


Kind regards,
Tsvetomir
Progress Telerik

[Jake333]

[quote]Viktor Tachev said:Hello Tim,

Thank you for the provided feedback. We are currently working on improving the documentation and examples regarding TagHelpers and we will update the resources as soon as possible. As a token of gratitude for your feedback I have updated your Telerik points. 

With that said, the configuration for a Grid TagHelper that is using InLine editing would look similar to the following. 

<kendo-grid name="grid" height="550">
    <datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
        <transport>
            <read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" />
            <update url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Update" />
            <destroy url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Destroy" />
        </transport>
        <schema>
            <model id="ProductID">
                <fields>
                    <field name="ProductName"></field>
                </fields>
            </model>
        </schema>
    </datasource>
    <editable mode="inline" />
    <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
    </pageable>
    <columns>
        <column field="ProductName" title="ProductName" width="240" />
        <column field="UnitPrice" title="UnitPrice" />
        <column field="UnitsInStock" title="UnitsInStock" />
        <column field="Discontinued" title="Discontinued" width="150" />
        <column>
            <commands>
                <column-command text="Edit" name="edit"></column-command>
                <column-command text="Destroy" name="destroy"></column-command>
            </commands>
        </column>
    </columns>
</kendo-grid>

The configuration with InCell editing would look very similar with the difference that there will be a toolbar with add new record and save buttons. mobdro

<kendo-grid name="grid" height="550">
    <datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
        <transport>
            <read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" />
            <update url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Update" />
            <destroy url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Destroy" />
        </transport>
        <schema>
            <model id="ProductID">
                <fields>
                    <field name="ProductName"></field>
                </fields>
            </model>
        </schema>
    </datasource>
    <editable mode="incell" />
    <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
    </pageable>
    <toolbar>
        <toolbar-button name="create" text="Add new record"></toolbar-button>
        <toolbar-button name="save" text="Save Changes"></toolbar-button>
        <toolbar-button name="cancel" text="Cancel Changes"></toolbar-button>
    </toolbar>
    <columns>
        <column field="ProductName" title="ProductName" width="240" />
        <column field="UnitPrice" title="UnitPrice" />
        <column field="UnitsInStock" title="UnitsInStock" />
        <column field="Discontinued" title="Discontinued" width="150" />
        <column>
            <commands>
                <column-command text="Destroy" name="destroy"></column-command>
            </commands>
        </column>
    </columns>
</kendo-grid>

I hope that helps. In case you have additional queries or feedback please do not hesitate to contact us.

Regards,
Viktor Tachev
Progress Telerik

[/quote]

I also faced same issue but now it solved for me. Thank you for the help.

[Joe]

[quote]James said:

"As for the foreign key column. This option is currently unavailable for the Grid Tag Helper. If this feature is a must I can suggest using the HtmlHelper for now."

Is there an estimate of when the foreign key column will be supported in TagHelper?  Users don't expect to see columns sorted by a foreign key GUID.  Without the ability to define the sort for columns, TagHelpers is not supporting a pretty standard use-case.  I've already invested in implementing TagHelpers, so casually suggesting I don't use them is a bad option.

Could someone suggest a functioning work around that allows for using TagHelpers with foreign keys  

<column field="Employee.Id" title="Employee" template="#=data.Employee.FullName#" min-resizable-width="20" editor="EmployeeEditor"/>

This sorts using the field value

https://localhost:44391/api/TimeRecords?sort=Employee.Id-asc&page=1&pageSize=10&group=&filter=mobdro

Can't someone modify the functionality to pick up an alternate 'sort-by' field?  For example

<column field="Employee.Id" title="Employee" template="#=data.Employee.FullName#" sort-by="Employee.FullName" min-resizable-width="20" editor="EmployeeEditor"/>

would change the sort URL  to 

https://localhost:44391/api/TimeRecords?sort=Employee.FullName-asc&page=1&pageSize=10&group=&filter=

[/quote]

 

Thanks for the updates.

[Konstantin Dikov]

Hi Joe,

All data operations are executed over the field set in the "column.field" property, so if you want to executed the operations over Employee.FullName, you could set it in the "field" property of the column:

<column field="Employee.FullName" title="Employee" template="#=data.Employee.FullName#" min-resizable-width="20" editor="EmployeeEditor"/>

As for introducing a foreign key column with the Tag Helpers, since this is a limitation within the Tag Helpers, using the HTML Grid helper when the Foreign Key column is needed is the only available option. 


Regards,
Konstantin Dikov
Progress Telerik

[Heiko]

Hi Konstantin,

although this question has been asked more than a year ago, I have to realize that the documentation for TagHelpers is still a catastrophe! I expect that at least all the examples that exist for MVC / Core are also available for TagHelpers. Including a list of things that are not working in comparisson to the old @Html... syntax.

Aside that, every time you ask how this or that works you get the answer: sorry, not working with TagHelpers. This is very disappointing. 

Regards
Heiko

[Tsvetomir]

Hi Heiko,

Thank you for sharing your thoughts on the matter. It is really appreciated.

We are constantly working on improving the documentation along with examples which demonstrate a certain functionality. Putting more effort in the TagHelper direction is definitely in our plans for improvements in the foreseeable future. 

Currently, we are working on the overall documentation for the ASP.NET Core. If you have any feedback or suggestions you would like us to prioritize apart from the TagHelper documentation, feel free to contact us. 


Best regards,
Tsvetomir
Progress Telerik

[Pavlos]

Is it possible to implement a custom toolbar template using the grid tag helper?
If so, could you provide an example?

[Tsvetomir]

Hi Pavlos,

Currently, a toolbar template could not be initialized with the TagHelper. We are aware of this fact and a request has been already issued at:

https://feedback.telerik.com/aspnet-core-ui/1426263-grid-toolbar-template-option-in-asp-net-core-taghelpers

I apologize for the inconvenience this might have caused.

 

Best regards,
Tsvetomir
Progress Telerik

[Rick]

Found this thread when looking for help on using the tag helper for grid with a foreign key column. Guess that's not happening anytime soon.

I've heard for the past year about the effort being made to improve the documentation. Has there been any progress? Especially for the tag helpers?

[Tsvetomir]

Hi Rick,

I am happy to inform you that the documentation of the Kendo UI wrappers for ASP.NET Core was updated. Each of the functionalities of the distinct widgets has been neatly described. The effort was initiated with the HtmlHelper documentation of the widgets. The enhancement of the ASP.NET Core TagHelper documentation is part of the next consequent efforts.

In case there is something unclear, I would suggest taking a look at the HtmlHelper documentation. Or, if there is anything specific you are looking for, do let me know.

Best regards,
Tsvetomir
Progress Telerik

[Scott]

How would one make grid columns resizable using tag helper notation?

[Tsvetomir]

Hi Scott,

In order to make the columns of the Kendo UI Grid resizable, you would have to set the resizable option of the grid at its opening tag:

<kendo-grid name="grid" resizable="true" height="550">

 

Regards,
Tsvetomir
Progress Telerik

[John]

At the start of this post code was posted showing inline vs incell editing.  Neither one works for me.  With incell editing, the add works but not on incell.  Editing and deleting do not work for either option.  Clicking the edit button does nothing.  Clicking the Delete button removes the row from the grid but never calls the url in the destroy transport configuration.  Is there a working example of the tag helpers working with incell or inline editing anywhere?

[Tsvetomir]

Hi John,

An example that demonstrates how to implement the editing functionality of the Telerik UI Grid with TagHelpers could be found here:

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

Based on the provided information, I suspect that the set up of the grid on your side is missing the Id declaration:

        <schema >
            <model id="ProductID">
 

 

Regards,
Tsvetomir
Progress Telerik

[John]

I have the schema defined including the model. I've seen the tag helper link and have my grid setup the same way and it is not working correctly.  Is there not a working sample somewhere I can view or download?

 

<schema>
    <model id="Id">
        <fields>
            <field name="Description"></field>
            <field name="Active" type="bool" default-value="true"></field>
        </fields>
    </model>
</schema>

[Alex Hajigeorgieva]

Hi, John,

The provided code snippet seems correct and I used it to create an editable grid with a boolean value. It works as expected in the enclosed project.

Have a look and let me know in case you find out what was the issue in the project you are working on.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[John]

The enclosed project contains no code for adding, updating or deleting grid items.  This is my issue with the tag helper examples.  There is no code I can find that is actually working for add, updated, and delete.  Please let me know where I can find an example of this.

[Tsvetomir]

Hi John,

The editing for the TagHelpers of the grid could be examined in the following article. The only difference compared to the HtmlHelpers is the syntax for setting the URL. The server-side implementation remains the same.

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

And the server-side implementation for the CRUD operations could be observed in the following live demo:

https://demos.telerik.com/aspnet-core/grid/editing-inline

 

Regards,
Tsvetomir
Progress Telerik