New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Defining Custom HtmlHelper Methods

Environment

Product	Telerik UI for ASP.NET MVC
Progress Telerik UI for ASP.NET MVC version	Created with the 2023.1.117 version

Description

How can I define my own custom HtmlHelper methods for an arbitrary Telerik UI for ASP.NET MVC component?

Solution

To achieve the desired result:

Create a static Extension Method to extend the desired type for the utilized configuration of the component.
Within the method, implement the desired logic and return the extended type.
From there, reference the extension method within the page in which it will be utilized.
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:

Index.cshtml
    @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"))
          )
    )
GridExtension.cs
    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);
                    });
            }
        }
    }

Defining Custom HtmlHelper Methods

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also