Text Area

<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>