Kendo Web UI Performance -

i using kendo web ui datepicker , numerictextbox web application , loading of context slow , takes 3 secs. after further investigation , found ajax call server gets data in 174ms , rest of time spent @ client alarming me. looking in details using console.time found 80% of time taken kendo web ui.

the html dom loaded using jquery $.get ajax method. onsuccess document's div loaded html data , run kendo numerictextbox , datepicker.

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

the above 2 lines of code takes around 2194 ms.

is there way of improving speed above lines?

any appreciated.

the problem not initializing kendodatepicker , kendonumerictextbox doing inside form.

if remove <form> jsfiddle (like here see pretty fast.

knowing , assuming need form, might replace form div element , 1 kendo initialization done, wrap new div 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 number." data-val-required="the clientid field 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 number." data-val-required="the clientid field required." id="clientid" name="clientid" type="hidden" value="28608" />             ...         </div>     </div> </div> 

then, code initializing kendo widgets , creating 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/