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

Separator

In this article, you will find information about the different ways to add a separator between the Telerik UI for ASP.NET Core OTPInput items. The option accepts either a string or a function handler.

In order for the functionality to be incorporated successfully, the Items need to be configured through an Action delegate.

The below example demonstrates how to add a separator as a string.

Razor
    @(Html.Kendo().OTPInput()
            .Name("otp")
            .Items(items => {
                items.Add().GroupLength(3);
                items.Add().GroupLength(2);
                items.Add().GroupLength(3);
            })
            .Separator("-")
    )
Razor
     <kendo-otpinput name="otp" separator="-">
            <otpinput-items>
                <item group-length="3" />
                <item group-length="2" />
                <item group-length="3" />
            </otpinput-items>
     </kendo-otpinput>

The next example shows how to add a separator in the form of a function handler by using the kendo.ui.icon method.

Razor
    @(Html.Kendo().OTPInput()
            .Name("otp")
            .Items(items => {
                items.Add().GroupLength(3);
                items.Add().GroupLength(2);
                items.Add().GroupLength(3);
            })
            .SeparatorHandler("separatorHandler")
    )
Razor
     <kendo-otpinput name="otp" separator-handler="separatorHandler">
            <otpinput-items>
                <item group-length="3" />
                <item group-length="2" />
                <item group-length="3" />
            </otpinput-items>
     </kendo-otpinput>
JavaScript
   <script>
        function separatorHandler() {
            return kendo.ui.icon({icon: "shape-line", type: "svg"})
        }
   </script>

Separator

See Also