Posted on 2/9/2021 12:01:20 PM by Admin

Kendo UI Components

Once you import the namespace Kendo.Mvc.UI , all Kendo UI widgets become accessible as normal Html helpers in razor view. Html Helpers are nothing but extension methods, Which can be accessed with @Html.Kendo() in razor view, Where Html is an object of HtmlHelper class and @ symbol is used to access a server-side object in razor view.

Kendo Components
Telerik UI Html helpers

The helper options are exposed through a fluent interface which means we can chain the options one after another.

Fluent Interface
Options chaining due to fluent inteface

To set an option for a helper, we need to call the corresponding method and pass the required option value.

Setting options
Configuring options

The Name option of every Widget is compulsory to specify

You have to set the Name option of the helper compulsorily, because value will be used as the id and name HTML attributes—the name attribute is set only for input helpers such as the DatePicker, NumericTextBox, and DropDownList. The id attribute is used to initialize the helper. The id (Name) of a helper has to meet the requirements for valid HTML ID attributes. It must not contain spaces and special characters and has to start with a letter.

The Name options of the helpers have to be always unique in the context of the whole web page. If a partial view is loaded multiple times, each instance of this partial view has to render all helpers with unique Name (id) options. If this requirement is not met, the page will render duplicate element IDs and only the helper instance which occurs first in the markup will be initialized and will work properly.

Rendering
Rendering as Html

Event Handling

To subscribe to the client-side events that are exposed by a helper, use the Events method. Specify the name of the JavaScript function which will handle the event.


  @(Html.Kendo().Button()
        .Name("btnSave")
        .Events(e => e.Click("btnSave_Click")// Handle the "click" event.
        )
   )

Declare the event handlers.


    <script>
    function btnSave_Click (e) {
        // Handle the event.
    }
    
    </script>

Examples

The TextBox widget of Kendo UI

The TextBox Kendo UI widget can be accessed as simple html helper in razor view. The TextBox provides a set of default API configuration options that can be set during its initialization such as value, placeholder, and so on.

Basic Configuration

The following example demonstrates the basic configuration for the TextBox.


    @(Html.Kendo().TextBox()
        .Name("txtName") // The name of the TextBox is mandatory. It specifies the "id" attribute 
    of the TextBox.
        .Value("Sachin Singh") // Set the value of the TextBox.
    )

Example : Textbox with more Options

 @(Html.Kendo().TextBox()
        .Name("txtName")
        .Placeholder("Name") // specify the place holder option and label
        .Label(label => label
            .Content("Name")
            .Floating(true)
        )
        .HtmlAttributes(new { style = "width: 100%" })
    )

Events

We can easily subscribe to the TextBox events. The following example demonstrates how to subscribe to events by a handler name.


  @(Html.Kendo().TextBox()
        .Name("txtName")
        .Events(e => e
            .Change("txtName_change")
        )
  )
  <script>
  function txtName_change() 
 {
      // Handle the change event.
  }
  </script>

The Numeric Textbox widget of Kendo UI

The NumericTextBox allows the user to select numeric values through direct input or using spinner buttons, we can access the NumericTextBox as simple Html helper in razor view.

Basic Configuration

The following example demonstrates the basic configuration for the NumericTextBox.


@(Html.Kendo().NumericTextBox()
      .Name("txtSalary") // The name of the NumericTextBox is mandatory. It specifies the "id" 
  attribute of the widget.
      .Min(-100) // Set the min value of the NumericTextBox.
      .Max(100) // Set the min value of the NumericTextBox.
      .Value(10) // Set the value of the NumericTextBox.
  )

Events
.

We can easily subscribe to the NumericTextBox events. The following example demonstrates how to subscribe to events by a handler name.


  @(Html.Kendo().NumericTextBox()
      .Name("numerictextbox")
      .Events(e => e
            .Change("numerictextbox_change")
            .Spin("numerictextbox_spin")
      )
    )
 <script>
  function numerictextbox_spin() {
    // Handle the spin event.
 }

 function numerictextbox_change() {
     // Handle the change event.
  }
 </script>

Handling by Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.


  @(Html.Kendo().NumericTextBox()
    .Name("txtSalary")
    .Events(e => e
        .Change(@
            function() {
                // Handle the change event inline.
            }
        )
        .Spin(@
            function() {
                // Handle the spin event inline.
            }
        )
    )
 )

The MaskedTextBox widget of Kendo UI

The MaskedTextBox enables a controlled text input that is based on a specific format. The helper enables you to define its value and mask value, and set custom mask rules, prompt characters, and culture names. Each mask can contain mask rules and mask literals. The mask literals are automatically entered for the user and cannot be removed. You can also use the MaskedTextBox predefined rules which specify the required or optional digit, letter, or character input. MaskedTextBox can be accessed as a normal Html helper in razor.

Basic Configuration

The following example demonstrates the basic configuration for the MaskedTextBox.


    @(Html.Kendo().MaskedTextBox()
        .Name("txtPhone") // The name of the MaskedTextBox is mandatory. It specifies the "id" 
  attribute of the MaskedTextBox.
        .Mask("(000) 000-0000") // Set the mask value of the MaskedTextBox.
        .Value("(123) 345-6789") // Set the value of the MaskedTextBox.
    )

Events

We can easily subscribe to all MaskedTextBox events ,The following example demonstrates how to subscribe to events by a handler name.


  @(Html.Kendo().MaskedTextBox()
        .Name("txtPhone")
        .Events(e => e
            .Change("txtPhone_change")
        )
  )
  <script>
  function txtPhone_change() 
   {
      // Handle the change event.
  }
  </script>

Handling by Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.


 @(Html.Kendo().MaskedTextBox()
    .Name("txtPhone")
    .Events(e => e
        .Change(@
            function() {
                // Handle the change event inline.
            }
        )
    )
 )

I think discussing all Kendo UI widgets are just a waste of time, you just need to know how to use Kendo UI widgets in MVC and how to subscribe events which will be the same for all widgets

You can find the list of all Kendo UI widgets here