Kendo Web UI Performance

Question

I using Kendo Web UI datepicker and NumericTextBox with the web application and loading of the context is very slow and it takes about 3 secs. After further investigation and found the ajax call to the server gets the data in 174ms and rest of the time is spent at client which was alarming to me. Looking in details using console.time found the 80% of the time taken by kendo web UI.

The html dom is loaded using jquery $.get Ajax method. OnSuccess the document's div is loaded with html data and run kendo NumericTextBox and DatePicker.

$(".currency").kendoNumericTextBox({ format: "c", decimals: 3, spinners: false });
$(".datepicker").kendoDatePicker();

The above 2 lines of code takes around 2194 ms.

Is there a way of improving the speed for the above lines?

Any help will be appreciated.

Answer 1

The problem is not initializing KendoDatePicker and KendoNumericTextBox but doing it inside a form.

If you remove the <form> from your JSFiddle (like here you will see that it is pretty fast.

Knowing this and assuming that you really need that form, what you might do is replace the form by a div element and one Kendo initialization is done, wrap the new div by your form definition.

Example:

Replace this:

<div class="eCheckList-section">
    <div class="dividends eCheckList-Body">
        <form action="" method="post">
            <input id="FileId" name="FileId" type="hidden" value="68f323b2-128e-4f9d-91bc-c0fcfe0f7615" />
            <input data-val="true" data-val-number="The field ClientId must be a number." data-val-required="The ClientId field is required." id="ClientId" name="ClientId" type="hidden" value="28608" />
            ...
        </form>
    </div>
</div>

by this:

<div class="eCheckList-section">
    <div class="dividends eCheckList-Body">
        <div id="form">
            <input id="FileId" name="FileId" type="hidden" value="68f323b2-128e-4f9d-91bc-c0fcfe0f7615" />
            <input data-val="true" data-val-number="The field ClientId must be a number." data-val-required="The ClientId field is required." id="ClientId" name="ClientId" type="hidden" value="28608" />
            ...
        </div>
    </div>
</div>

Then, the code for initializing Kendo widgets and creating the form:

console.time("#kendoNumericTextBox");
$(".currency").kendoNumericTextBox({ 
    format: "c", 
    decimals: 3, 
    spinners: false
});
console.timeEnd("#kendoNumericTextBox");

console.time("#kendoDatePicker")
$(".datepicker").kendoDatePicker();
console.timeEnd("#kendoDatePicker");

console.time("#buildForm");
$("#form").wrap("<form action='' method='post'></form>");
console.timeEnd("#buildForm")

Your JSFiddle modified here : http://jsfiddle.net/OnaBai/jf2s9/3/