Available in the Full Version
Editors - Text Editor MVC
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Submitted Values
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample shows basic options of the igTextEditor using MVC wrapper.
Code View
Copy to Clipboard
@using Infragistics.Web.Mvc
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<style>
h3 {
font-size:20px;
margin-bottom:20px;
}
.group-fields {
margin-bottom: 10px;
}
.group-fields label {
display: block;
line-height:18px;
}
.group-fields .inline {
display:inline;
}
.group-fields .ui-igcheckbox-normal {
margin-right: 5px;
float: left;
}
.group-fields .ui-igedit-container {
width: 250px;
}
form {
float: left;
width: 500px;
min-width: 500px;
}
.submit-container
{
top: 0px;
right: 0px;
min-width: 400px;
float: right;
font-size: 18px;
}
.submit-container h3 {
display: none;
}
.submit-container p
{
font-size: 16px;
}
.submit-container p.result {
margin-top: 10px;
margin-bottom: 45px;
}
.submit-container span.result-name {
font-weight: bold;
text-transform: capitalize;
}
.clear {
clear: both;
}
@@media screen and (min-width:360px) {
.group-fields .ui-igedit-container {
width: 300px;
}
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<form id="form1">
<h3>Register your Infragistics Ultimate bundle</h3>
<div class="group-fields">
<label for="firstName">First Name</label>
@(Html.Infragistics().TextEditor()
.ID("firstName")
.InputName("firstName")
.PlaceHolder("John")
.Render()
)
</div>
<div class="group-fields">
<label for="lastName">Last Name</label>
@(Html.Infragistics().TextEditor()
.ID("lastName")
.InputName("lastName")
.PlaceHolder("Anderson")
.Render()
)
</div>
<div class="group-fields">
<label for="email">Email</label>
@(Html.Infragistics().TextEditor()
.ID("email")
.InputName("email")
.PlaceHolder("john@email.com")
.Render()
)
</div>
<div class="group-fields">
<label for="password">Password</label>
@(Html.Infragistics().TextEditor()
.ID("password")
.InputName("password")
.TextMode(TextEditorTextMode.Password)
.PlaceHolder("********")
.Render()
)
</div>
<div class="group-fields">
<label for="note">Note (Optional)</label>
@(Html.Infragistics().TextEditor()
.ID("note")
.InputName("note")
.TextMode(TextEditorTextMode.Multiline)
.Height(100)
.VisibleItemsCount(5)
.Render()
)
</div>
<div class="group-fields">
@(Html.Infragistics().CheckBoxEditor()
.ID("readonly")
.AddClientEvent(EditorClientEvents.ValueChanged, "toggleReadonly")
.Render()
)
<label id="lock" for="readonly" class="inline">Lock for editing</label>
</div>
<input id="btn" type="button" value="Clear" />
<input type="submit" id="submitBtn" value="Submit" />
@(Html.Infragistics().Validator().ID("form1")
.Fields(x => {
x.Field().ID("firstName").Required(true);
x.Field().ID("lastName").Required(true);
x.Field().ID("email").Email(true);
x.Field().ID("password").Required(true);
}).Render()
)
</form>
<div class="submit-container">
<h3>Submitted Values</h3>
<div class="submit-container">
<p id="results"></p>
</div>
</div>
<div class="clear"></div>
<script type="text/javascript">
function toggleReadonly(evt, ui) {
if (ui.newState == true) {
$("#note").igTextEditor("option", "readOnly", true);
}
else {
$("#note").igTextEditor("option", "readOnly", false);
}
}
function toggleDisable(evt, ui) {
if (ui.newState == true) {
$("#note").igTextEditor("option", "disabled", true);
}
else {
$("#note").igTextEditor("option", "disabled", false);
}
}
$(function () {
$("#form1").submit(function (event) {
var submittedValues = $("#form1").serializeArray(), submitHTML = "";
$("#results").empty();
if ($("#form1").igValidator("validate")) {
$(".submit-container h3").show();
for (var i = 0 ; i < submittedValues.length; i++) {
$("#results").append("<p class='result'><span class='result-name'>" + submittedValues[i].name.replace(/([A-Z])/g, ' $1') + ":</span> " + submittedValues[i].value + "</p>");
}
}
return false;
});
$("#btn").click(function () {
$("#firstName").igTextEditor("option", "value", "");
$("#lastName").igTextEditor("option", "value", "");
$("#email").igTextEditor("option", "value", "");
$("#password").igTextEditor("option", "value", "");
$("#note").igTextEditor("option", "value", "");
$("#readonly").igCheckboxEditor("option", "checked", false);
$("#note").igTextEditor("option", "disabled", false);
$("#note").igTextEditor("option", "readOnly", false);
});
});
</script>
</body>
</html>
using IgniteUI.SamplesBrowser.Models.DataAnnotations;
using IgniteUI.SamplesBrowser.Models.Northwind;
using IgniteUI.SamplesBrowser.Models.Repositories;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class EditorsController : Controller
{
//
// GET: /Editors/
[ActionName("data-annotation-validation")]
public ActionResult DataAnnotationValidation()
{
ValidatedOrder model = new ValidatedOrder();
ViewData["message"] = String.Empty;
model.ShipMethodList = this.GetShipMethods();
return View("data-annotation-validation", model);
}
[HttpPost]
[ActionName("data-annotation-validation")]
public ActionResult DataAnnotationValidation(ValidatedOrder model)
{
if (ModelState.IsValid)
{
ViewData["message"] = "Product saved successfully";
}
model.ShipMethodList = this.GetShipMethods();
return View("data-annotation-validation", model);
}
[ActionName("load-and-save-form-values")]
public ActionResult EditProduct()
{
Product product = RepositoryFactory.GetProductRepository().Get().First();
ViewData["message"] = String.Empty;
return View("load-and-save-form-values", product);
}
[ActionName("text-editor-mvc")]
public ActionResult TextEditor()
{
return View();
}
[ActionName("date-editor-mvc")]
public ActionResult DateEditor()
{
return View();
}
[ActionName("numeric-editor-mvc")]
public ActionResult NumericEditor()
{
return View();
}
[ActionName("mask-editor-mvc")]
public ActionResult MaskEditor()
{
return View();
}
public List<SelectListItem> GetShipMethods()
{
List<SelectListItem> selectList = new List<SelectListItem>()
{
new SelectListItem { Text = "Standard", Value = "Standard" },
new SelectListItem { Text = "One Day", Value = "OneDay" },
new SelectListItem { Text = "Two Day", Value = "TwoDay" },
new SelectListItem { Text = "International", Value = "International" }
};
return selectList;
}
}
}