Pages

Friday, October 16, 2015

Using Telerik Kendo UI ASP.Net MVC controls (EditorFor)


Prerequisites:

I am assuming that you have installed ASP.Net KendoUI dll (Kendo.Mvc.dll).
Added a reference in your project.
Also ensure that you have included all the javascript kendo js library and css library files in your Visual Studio Project.

Add a view and put this in your razor view cshtml file.
Note that the Model must have all the properties declared and must match the names used.

@model Models.EmailModel

 <script type="text/javascript" src="@Url.Content("~/Scripts/kendo/jquery.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/kendo/kendo.web.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/kendo/kendo.aspnetmvc.min.js")"></script>

  @using (Html.BeginForm("SendEmail", "Email", FormMethod.Post))
    {
             <div>
        <fieldset>
            @Html.ValidationMessageFor(x => x.HtmlContent, "Email content cannot be empty.")
            @(Html.Kendo().EditorFor(m => m.HtmlContent)
            .Encode(false)
            .Name("HtmlContent")
            .HtmlAttributes(new { style = "height:440px" })
            .Tools(tools => tools
                .Clear()
                .Bold().Italic().Underline().Strikethrough()
                .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
                .InsertUnorderedList().InsertOrderedList()
                .CreateLink().Unlink()
              )
            .Value(Model.HtmlContent)
            )
        </fieldset>
        </div>
        <div  style="float:right">
            @(Html.Kendo().Button().Name("sendButton").Content("Send Email"))
        </div>
    }
    <div  style="float:right">
        @(Html.Kendo().Button().Name("cancelButton").Content("Cancel").Events(ev => ev.Click("onClickCancel")))
    </div>

No comments: