Tag Helper Documentation & Demos

30 posts, 0 answers
  1. Tim
    Tim avatar
    20 posts
    Member since:
    Oct 2015

    Posted 13 Feb 2018 Link to this post

    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 popup or incell examples?

    Are we to guess?

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 16 Feb 2018 Link to this post

    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>
            </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>
            </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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tim
    Tim avatar
    20 posts
    Member since:
    Oct 2015

    Posted 22 Feb 2018 in reply to Viktor Tachev Link to this post

    Thanks for the detail.

    How about the foreignkeycolumn?

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

     

  4. Tim
    Tim avatar
    20 posts
    Member since:
    Oct 2015

    Posted 22 Feb 2018 in reply to Tim Link to this post

    Andhow do I convert this filter?

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

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 27 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Tim
    Tim avatar
    20 posts
    Member since:
    Oct 2015

    Posted 27 Feb 2018 in reply to Viktor Tachev Link to this post

    Hi Viktor,

    Viktor Tachev said:Hi 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.

     

    1. Is this on the roadmap?

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

    Regards,

    Tim

     

  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 02 Mar 2018 Link to this post

    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.



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Tim
    Tim avatar
    20 posts
    Member since:
    Oct 2015

    Posted 02 Mar 2018 in reply to Viktor Tachev Link to this post

    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?

     

  9. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 07 Mar 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Gabriel
    Gabriel avatar
    1 posts
    Member since:
    Oct 2018

    Posted 31 Oct 2018 Link to this post

    Hello,

    Any updates on the foreign key column feature for TagHelpers?

  11. Tsvetomir
    Admin
    Tsvetomir avatar
    789 posts

    Posted 02 Nov 2018 Link to this post

    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 foreginKey column is a must I would suggest using the HtmlHelper as shown in the following live demo:



    Kind regards,
    Tsvetomir
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  12. James
    James avatar
    3 posts
    Member since:
    Dec 2018

    Posted 19 Dec 2018 Link to this post

    "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=

  13. Tsvetomir
    Admin
    Tsvetomir avatar
    789 posts

    Posted 24 Dec 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  14. Jake333
    Jake333 avatar
    1 posts
    Member since:
    Oct 2018

    Posted 31 Dec 2018 in reply to Viktor Tachev Link to this post

    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>
            </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>
            </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

    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

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

  15. Joe
    Joe avatar
    1 posts
    Member since:
    May 2019

    Posted 03 May 2019 in reply to James Link to this post

    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=

     

    Thanks for the updates.

  16. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 08 May 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  17. Heiko
    Heiko avatar
    61 posts
    Member since:
    Nov 2018

    Posted 11 May 2019 in reply to Konstantin Dikov Link to this post

    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

  18. Tsvetomir
    Admin
    Tsvetomir avatar
    789 posts

    Posted 15 May 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  19. Pavlos
    Pavlos avatar
    4 posts
    Member since:
    Sep 2019

    Posted 09 Oct 2019 Link to this post

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

  20. Tsvetomir
    Admin
    Tsvetomir avatar
    789 posts

    Posted 10 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  21. Rick
    Rick avatar
    24 posts
    Member since:
    Sep 2011

    Posted 23 Nov 2019 Link to this post

    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?

  22. Tsvetomir
    Admin
    Tsvetomir avatar
    789 posts

    Posted 25 Nov 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  23. Scott
    Scott avatar
    1 posts
    Member since:
    Mar 2018

    Posted 22 Jan 2020 in reply to Tsvetomir Link to this post

    How would one make grid columns resizable using tag helper notation?
  24. Tsvetomir
    Admin
    Tsvetomir avatar
    789 posts

    Posted 24 Jan 2020 Link to this post

    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

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
  25. John
    John avatar
    13 posts
    Member since:
    Jun 2019

    Posted 03 Mar 2020 Link to this post

    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?
  26. Tsvetomir
    Admin
    Tsvetomir avatar
    789 posts

    Posted 06 Mar 2020 Link to this post

    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

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
  27. John
    John avatar
    13 posts
    Member since:
    Jun 2019

    Posted 06 Mar 2020 in reply to Tsvetomir Link to this post

    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>
  28. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 11 Mar 2020 Link to this post

    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

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
  29. John
    John avatar
    13 posts
    Member since:
    Jun 2019

    Posted 30 Mar 2020 in reply to Alex Hajigeorgieva Link to this post

    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.
  30. Tsvetomir
    Admin
    Tsvetomir avatar
    789 posts

    Posted 02 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top