Telerik MVC Disable DatePicker using javascript

Question

I need to disable Telerik MVC Disable DatePicker. The problem is telerik mvc datepicker is added in dom using jquery html() function.

After it loaded in dom i have to disable it.

I couln't use "$("#AccountInformalHearingDate").data("tDatePicker").disable()" method.

i'm $("#AccountInformalHearingDate").data("tDatePicker") is undefined error.

  <pre>
          var userId = getUserId();
          $.ajax({
            type: "POST",
            url: $Url.resolve("~/ClientSetup/ClientAccounts/UpdateAccountDetails"),
            data: { AccountId: accountId},
            success: function (data) {
                $('#AccountDetailsContainer').html( @(Html.Telerik().DatePicker()
                    .Name("AccountInformalHearingDate")
                    .Value(new DateTime(2010, 1, 1)) 

                 if(userId == 10){     
                     $("#AccountInformalHearingDate").data("tDatePicker").disable();
                 }

            ));
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);
            }
        });
  </pre>

But i'm getting control undefined error. Since i cannot disable telerik controls all behaviour without data() function

Answer 1

I have found solution for above question after researching telerik mvc documentation

Reason for the above problem is, Ajax returned html contents is not getting reference of registered java scripts. So on success of ajax call we need manually register needed telerik scripts to access telerik mvc controls as like below"

var telerikScriptArray = new Array();
telerikScriptArray[0] = "/Content/Scripts/Telerik/jquery-1.7.1.min.js";
telerikScriptArray[1] = "/Content/Scripts/Telerik/telerik.common.min.js";
telerikScriptArray[2] = "/Content/Scripts/Telerik/telerik.calendar.min.js";
telerikScriptArray[3] = "/Content/Scripts/Telerik/telerik.datepicker.min.js";
telerikScriptArray[4] = "/Content/Scripts/Telerik/telerik.timepicker.min.js";
telerikScriptArray[5] = "/Content/Scripts/Telerik/telerik.combobox.min.js";

$.ajax({
     type: "POST",
     url: $Url.resolve("~/Ares/Controller/Action"),
     data: { AccountId: accountId},
     sucess:function(data){
         $.telerik.load(telerikScriptArray, function () {
            $("#controlID").data("tDatePicker").disable(); // Here you can access ajax returned telerik controls.             
        });
     },
     error:function(){
     }
});

Answer 2

Telerik Extensions for ASP.NET MVC Manual

Telerik MVC Extending the Client API