<div class="dx-fieldset">
<div class="dx-fieldset-header">Default Mode</div>
<div class="dx-field">
@(Html.DevExtreme().CheckBox()
.Value(false)
.OnValueChanged("checkBox_valueChanged")
.Text("Limit text length")
)
</div>
</div>
<div class="left-content">
@(Html.DevExtreme().TextArea()
.ID("example-textarea")
.Value(new JS("text"))
.Height(90)
)
</div>
<div class="full-width-content">
<div class="dx-fieldset">
<div class="dx-fieldset-header">Event Handling and API</div>
<div class="dx-field">
<div class="dx-field-label">Synchronize text areas </div>
<div class="dx-field-value">
@(Html.DevExtreme().SelectBox()
.DataSource(new[] {
new { name = "change", title = "On Blur" },
new { name = "keyup", title = "On Key Up" }
})
.ValueExpr("name")
.DisplayExpr("title")
.Value("change")
.OnValueChanged("selectBox_valueChanged")
)
</div>
</div>
</div>
@(Html.DevExtreme().TextArea()
.ID("editing-textarea")
.Value(new JS("text"))
.Height(90)
.ValueChangeEvent("change")
.OnValueChanged("textArea_valueChanged")
)
@(Html.DevExtreme().TextArea()
.ID("read-only-textarea")
.Value(new JS("text"))
.Height(90)
.ReadOnly(true)
)
</div>
<script>
var text = "Prepare 2013 Marketing Plan: We need to double revenues in 2013 and our marketing strategy is going to be key here. R&D is improving existing products and creating new products so we can deliver great AV equipment to our customers.Robert, please make certain to create a PowerPoint presentation for the members of the executive team.";
function checkBox_valueChanged(data) {
var exampleTextArea = $("#example-textarea").dxTextArea("instance");
if(data.value) {
exampleTextArea.option("value", (exampleTextArea.option("value")).substring(0, 100));
exampleTextArea.option("maxLength", 100);
} else {
exampleTextArea.option("maxLength", null);
exampleTextArea.option("value", text);
}
}
function selectBox_valueChanged(data) {
$("#editing-textarea").dxTextArea("instance").option("valueChangeEvent", data.value);
}
function textArea_valueChanged(data) {
$("#read-only-textarea").dxTextArea("instance").option("value", data.value);
}
</script>
using Microsoft.AspNetCore.Mvc;
namespace DevExtreme.NETCore.Demos.Controllers {
public class TextAreaController : Controller {
public ActionResult Overview() {
return View();
}
}
}