@(Html.EJ().Grid<object>("ContactDetails")
                            .Datasource((IQueryable<ContactDetailsVM>)ViewBag.ContactDetails)
                            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#CreateNewContact"); })
                            .ToolbarSettings(toolbar =>
                            {
                                toolbar.ShowToolbar().ToolbarItems(items =>
                                {
                                    items.AddTool(ToolBarItems.Add);
                                    items.AddTool(ToolBarItems.Edit);
                                    items.AddTool(ToolBarItems.Delete);
                                    items.AddTool(ToolBarItems.Update);
                                    items.AddTool(ToolBarItems.Cancel);
                                });
                            })
                            .Columns(col =>
                            {
                                col.Field("ContactName").HeaderText("Contact Name").EditType(EditingType.String).IsPrimaryKey(true).ValidationRules(rule => rule.AddRule("required", true)).Add();
                                col.Field("ContactType").HeaderText("Contact Type").Add();
                                col.Field("ContactTelephone").HeaderText("Contact Telephone").EditType(EditingType.Numeric).ValidationRules(rule => rule.AddRule("required", true)).Add();
                                col.Field("ContactMobile").HeaderText("Contact Mobile").EditType(EditingType.Numeric).Add();
                                col.Field("ContactEmail").HeaderText("Contact Email").EditType(EditingType.String).Add();
                            })
                            .ClientSideEvents(eve => { eve.ActionComplete("complete"); })
                        )






<script id="CreateNewContact" type="text/template">
    <form id="ContactForm">
        <b id="templateHeader">New Contact</b>
        @* start template fields *@
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                        <label>Name:</label>
                        <input id="ContactName" name="ContactName" value="{{: ContactName}}" class="form-control" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                        <label>Telephone:</label>
                        <input id="ContactTelephone" name="ContactTelephone" value="{{: ContactTelephone}}" class="form-control" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                        <label>Mobile:</label>
                        <input id="ContactMobile" name="ContactMobile" value="{{: ContactMobile}}" class="form-control" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                        <label>Email:</label>
                        <input id="ContactEmail" name="ContactEmail" value="{{: ContactEmail}}"  class="form-control" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                        <label>Contact Type:</label>
                        <select id="ContactType" name="ContactType" class="form-contorl">
                            @if ((List<ContactTypesVM>)ViewBag.ContactTypes != null)
                            {
                                foreach (var i in ViewBag.ContactTypes)
                                {
                                    <option value="@i.ContactTypeName.ToString()" >@i.ContactTypeName.ToString()</option>
                                }
                            }
                        </select>
                </div>
            </div>
            <div class="row">
                <br />
            </div>

        </div>
        @* end template fields *@
    </form>
</script>




<script>
    $(function () {
        $.validator.setDefaults({
            //to validate all fields(hidden also)
            ignore: [],
            //if we don’t set custom class, default “error” class will be added
            errorClass: 'e-validation-error',
            //it specifies the error message display position
            errorPlacement: function (error, element) {
                $(error).insertAfter(element.closest(".e-widget"));
            }
        });
    });

    function complete(args) {

        if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {
            debugger;
        if (args.requestType == "add" || args.requestType == "beginedit") {
            
            //Set Syncfusion Inputs
            $("#ContactName").ejMaskEdit({ width: "100%", height: "42px", htmlAttributes: { name: "ContactName"} });
            $("#ContactTelephone").ejMaskEdit({ width: "100%", height: "42px", htmlAttributes: { name: "ContactTelephone" } });
            $("#ContactMobile").ejMaskEdit({ width: "100%", height: "42px", htmlAttributes: { name: "ContactMobile" } });
            $("#ContactEmail").ejMaskEdit({ width: "100%", height: "42px", htmlAttributes: { name: "ContactEmail" } });
            $("#ContactType").ejDropDownList({ width: '100%', height: "42px", htmlAttributes: { name: "ContactType" }, validationRules: { required: true } });

            $("#EditDialog_ContactDetails_Save").ejButton({ htmlAttributes: { name: "EditDialog_ContactDetails_Save" } });
            $("#EditDialog_ContactDetails_Cancel").ejButton({ htmlAttributes: { name: "EditDialog_ContactDetails_Cancel" } });

            if (args.requestType == "beginedit")
            {
                //Change Header
                $('#templateHeader').text('Edit');

                //Change Status Dropdown
                var ForeignKeyValue = $("#ContactDetails").ejGrid("model").selectedRecords[0]["ContactType"]; // Get the EmployeeID value
                $("#ContactType").ejDropDownList("setSelectedValue", ForeignKeyValue); // Set the Foreignkey value for dropdown list

            }
        }
        $(".e-field").css({ 'width': '116px', 'text-align': 'left' });
    }

    if (args.requestType == "save") {
        debugger;
        var dataSet = [];
        dataSet = $("#ContactDetails").data("ejGrid").model.currentViewData;
        var stringifyDataSet = JSON.stringify(dataSet);
        $("#ContactDetailsHidden").val(stringifyDataSet);
        var gridObj = $("#ContactDetails").ejGrid("instance");
        gridObj.refreshContent();
        
    }

}
</script>