Removing Spinners from NumericTextBox Editors in the Grid

Environment

Product	Telerik UI for ASP.NET Core Grid
Product Version	2017.3.913

Description

How can I remove the spinners (up and down arrows) from the editor of a "[DataType("Integer")]" field in the Telerik UI for ASP.NET Core Grid?

Solution

1. Under Views/Shared/EditorTemplates, add a .cshtml file with the following definition.

   NoSpinners.cshtml

   @model int?
   
   @(Html.Kendo().NumericTextBoxFor(m => m)
         .HtmlAttributes(new { style = "width:100%" })
         .Spinners(false)
   )
   

2. Open the model that you are editing in the Grid.

3. Add a [UIHint("NoSpinners")] annotation to the integer field which does not show spinners.

   [DisplayName("Units in stock")]
   [UIHint("NoSpinners")]
   [Range(0, int.MaxValue)]
   public int UnitsInStock
   {
       get;
       set;
   }
   

4. Make sure that the NoSpinners string matches the name of the editor template file.

To see the end result, refer to this screenshot.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base