MVC Extension with Scaffolding

[Emad]

Hi,

I created a new project via the Telerik MVC template. When using Scaffolding to generate a controller and view for an EF domain, if there is a datetime field it'll be mapped to a Telerik DateTimePicker somehow as code in the razor view will look like this code, where at run time with 'view source' I can see the KendoUi control mentioned. My question is how to access the datetimepicker for example to add events?

 

<div class="form-group">
    @Html.LabelFor(model => model.from_date, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.from_date, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.from_date, "", new { @class = "text-danger" })
    </div>
</div>

 

[Dimiter Madjarov]

Hello Emad,

By default the UI for ASP.NET MVC Project includes built in editor templates using Kendo UI widgets. You could find them in the Views/Shared/EditorTemplates folder of the project. One approach to attach an event would be to directly modify the desired editor template for the specific type e.g. DateTime.
E.g.

@model DateTime?

@(Html.Kendo().DateTimePickerFor(m => m)
      .Events(e => e.Open("onOpen"))
)

<script>
    function onOpen(e) {
        console.log("opened");
    }
</script>

Another approach would be to leave the template as is and manually attach the event only for the current page. For example add the following script to the Edit view.
E.g.

$("#from_date").data("kendoDateTimePicker").bind("open", function(){
    console.log("opened");
});

Regards,
Dimiter Madjarov
Telerik