Using Common Code for Multiple Kendo Controls of Same Type.

If you have multiple identical kendo controls in your application, then in this case you can reduce code by using common JavaScript and CSS class. So that you define your controls only once in page load script, and it will apply all the control properties to HTML elements with given class name.

Let’s take example of kendo DatePicker (calendar) control, consider a case where you have to use kendo DatePicker controls at many places in your application, in this case is always better and good practice to use generic/common code for all controls.

Following code demonstrate the said implementation of code:-

1. Add one extra class to html elements which require to be calendar control,

<div>

    <input id="txtCalender" class="KendoCalendar" type="text" placeholder="MM/DD/YYYYY" />

    @*In MVC*@

    @Html.TextBoxFor(model => model.DOB, "{0:d}", new { placeholder = "mm/dd/yyyy", @class = "KendoCalendar" })

</div>

That’s set, you as shown you just need to add on extra class (KendoCalendar) to your textbox elements.

2. Add below script to one common page so that it will accessible to all page on load. You may add it to a script file which is referred on master page or on each page, or you can add just add below script block on your page/master page.

<script>

    //For Calender Control

    $(document).ready(function () {

        $(".KendoCalendar").kendoDatePicker({ format: "MM/dd/yyyy", max: new Date(3000, 0, 0) });

        $(".KendoCalendar").closest("span.k-datepicker").width('100%');

        $(".KendoCalendar").css('font-size', '12px');

    });

</script>

In similar way one can implements/ write common code for other kendo controls like, AutoComplete, Editor, MaskedTextBox, TimePicket etc.

The advantage of such implementation are, 

• Reduced code
• Consistency in control across system
• Easy maintenance