Contact Support
Buttons in Vue Inplace editor component
11 Jun 20248 minutes to read
The In-place Editor had an action for save and cancel using buttons. The saveButton and cancelButton properties accept the ButtonModel objects for customizing the save and cancel button properties.
Buttons can be show or hide by sets a Boolean value to the showButtons property.
Without buttons value will be processed via the following ways.
- actionOnBlur: By clicking out side the editor component get focus out and do action based on this property value.
-
submitOnEnter: Pressing
Enter
key it performs the submit action, if this property set totrue
.
In the following sample, the content and cssClass properties of Button
value assigned to the saveButton and cancelButton properties to customize its appearance. Also check or uncheck a checkbox buttons render or removed from the editor.
To restrict either save or cancel button rendering into a DOM, simply pass empty object {}
in the saveButton
or cancelButton
properties.
For more details about buttons, refer this documentation section.
<template>
<div id="app">
<table class="table-section">
<tr>
<td>ShowButtons:</td>
<td>
<ejs-checkbox ref="checkObj" id="showbuttons" checked=true :change="onChange"
:labelPosition="labelPosition" :label="label"></ejs-checkbox>
</td>
</tr>
<tr>
<td class="sample-td">Enter your name:</td>
<td class="sample-td">
<ejs-inplaceeditor ref="editObj" mode="Inline" :model="textModel" type="Text" value="Andrew"
data-underline="false">
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script setup>
import { ref } from "vue";
import { InPlaceEditorComponent as EjsInplaceeditor } from '@syncfusion/ej2-vue-inplace-editor';
import { CheckBoxComponent as EjsCheckbox } from "@syncfusion/ej2-vue-buttons";
const editObj = ref(null);
const textModel = {
placeholder: 'Enter Some Text'
};
const labelPosition = 'Before';
const label = 'show';
const onChange = function (args) {
args.checked ? editObj.value.ej2Instances.showButtons = true : editObj.value.ej2Instances.showButtons = false
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
.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;
}
</style>
<template>
<div id="app">
<table class="table-section">
<tr>
<td>ShowButtons:</td>
<td>
<ejs-checkbox ref="checkObj" id="showbuttons" checked=true :change="onChange"
:labelPosition="labelPosition" :label="label"></ejs-checkbox>
</td>
</tr>
<tr>
<td class="sample-td">Enter your name:</td>
<td class="sample-td">
<ejs-inplaceeditor ref="editObj" mode="Inline" :model="textModel" type="Text" value="Andrew"
data-underline="false">
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
import { CheckBoxComponent } from "@syncfusion/ej2-vue-buttons";
export default {
name: "App",
components: {
"ejs-checkbox": CheckBoxComponent,
"ejs-inplaceeditor": InPlaceEditorComponent
},
data() {
return {
textModel: {
placeholder: 'Enter Some Text'
},
labelPosition: 'Before',
label: 'show',
};
},
mounted: function () {
this.editObj = this.$refs.editObj.ej2Instances;
},
methods: {
onChange: function (args) {
args.checked ? this.editObj.showButtons = true : this.editObj.showButtons = false
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
.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;
}
</style>