Having trouble getting help?
Contact Support
Contact Support
Add custom indication to unsaved value
21 Dec 20222 minutes to read
You can add custom indication to unsaved input value by using the actionSuccess
event, when data not submitted to the server.
In this sample, the actionSuccess
event configured and the url
property not included. Then submit button clicked, the current editor value saved into input and data sending to server action prevented due to the url
property not configured.
But actionSuccess
event will trigger the handler function with null
argument values. In handler function data property primaryKey
value checked, whether it empty or not. If it is empty custom class, added in the e-value-wrapper
element to customize its styles.
NOTE
To send input value to local, set the
url
property as empty.
<div id='container'>
<span class="content-title"> Enter your name: </span>
<ejs-inplaceeditor id="element" mode="Inline" model="ViewBag.model" value="ViewBag.value" actionSuccess="actionSuccess">
</ejs-inplaceeditor>
</div>
<style>
#container {
display: flex;
justify-content: center;
}
.table-section {
margin: 0 auto;
}
tr td:first-child {
text-align: right;
padding-right: 20px;
}
.sample-td {
padding-top: 10px;
min-width: 230px;
height: 100px;
}
.e-inplaceeditor .e-editable-value-wrapper .e-editable-value.e-send-error {
color: red;
}
</style>
<script>
function actionSuccess(e) {
var editObj = document.getElementById('element').ej2_instances[0];
var pk = e.data['PrimaryKey'];
if (ej.base.isNullOrUndefined(pk) || pk === '') {
document.querySelector('.e-editable-value').classList.add('e-send-error');
}
}
</script>
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.model = new { placeholder = "Enter some text" };
ViewBag.value = "Andrew";
return View();
}
}
The output will be as follows.