define-custom-helper-methods.md

title	page_title	description	slug	tags	res_type
Defining Custom HtmlHelper Methods	Defining Custom HtmlHelper Methods	Learn how to define custom HtmlHelper methods in the Telerik UI for {{ site.framework }}.	define-custom-helper-methods	grid, html, helper, custom, mvc, telerik, pageable, boolean, column, component	kb

Environment

Product	{{ site.product }}
Progress {{ site.product }} version	Created with the 2023.1.117 version

Description

How can I define my own custom HtmlHelper methods for an arbitrary Telerik UI for {{ site.framework }} component?

Solution

To achieve the desired result:

1. Create a static Extension Method to extend the desired type for the utilized configuration of the component.
2. Within the method, implement the desired logic and return the extended type.
3. From there, reference the extension method within the page in which it will be utilized.
4. Finally, invoke the defined extension method inside the component's configuration.

The following example illustrates how to define a custom HtmlHelper method for the Grid:

    @using TelerikExample.Extensions

    @(Html.Kendo().Grid<OrderViewModel>()
         .Name("grid")
         .Columns(columns =>
         {
             columns.Bound(p => p.Discontinued);
             columns.Bound(p => p.Approved);
         })
         .CustomPageable()
         .DataSource(dataSource => dataSource
             .Ajax()
             .PageSize(20)
             .Read(read => read.Action("Orders_Read", "Grid"))
          )
    )

    namespace TelerikExample.Extensions
    {
        public static class GridExtension
        {
            public static GridBuilder<T> CustomPageable<T>(this GridBuilder<T> builder)
                where T : class // Custom method for reusing several configartion methods simulatenously.
            {
                return builder
                    .Pageable(conf =>
                    {
                        conf.PreviousNext(true);
                        conf.Numeric(false);
                        conf.Info(false);
                        conf.Input(true);
                    });
            }
        }
    }

More {{ site.framework }} Grid Resources

• [{{ site.framework }} Grid Documentation]({%slug htmlhelpers_grid_aspnetcore_overview%})

• [{{ site.framework }} Grid Demos](https://demos.telerik.com/{{ site.platform }}/grid/index)

{% if site.core %}

• {{ site.framework }} Grid Product Page

• [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})

• Telerik UI for {{ site.framework }} Forums

{% else %}

• {{ site.framework }} Grid Product Page

• [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})

• Telerik UI for {{ site.framework }} Forums {% endif %}

See Also

• Client-Side API Reference of the Grid for {{ site.framework }}
• [Server-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/grid)
• [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
• [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)