I have a grid providing CRUD for a model ID, Code, ShortDescription, LongDescription
All fields are required so I am trying to default the value of LongDescription to ShortDescription in dialog mode when entering a new record
In addition, is there any detailed documentation showing the features available when using params passed in the edit of the field? edit="@(new {@params = TextField})
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
@{
ViewData["Title"] = "Collection Types";
}
@{
var TextField = new Syncfusion.EJ2.Inputs.TextBox
{
Change = "Changed",
};
}
<div>
<div tabindex="0" class="e-card" id="basic_card">
<div class="e-card-header">
<div class="e-card-header-caption">
<div class="e-card-header-title"> <h2> Collection Types</h2></div>
<div class="e-card-sub-title"> </div>
</div>
</div>
<div class="e-card-content">
<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Edit", "Delete" })" allowPaging="true" allowSorting="true" allowFiltering="true" actionFailure="actionFailure" created="created" actionComplete="complete">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" showDeleteConfirmDialog="true"></e-grid-editSettings>
<e-grid-pagesettings pageSize="10">
</e-grid-pagesettings>
<e-grid-columns>
<e-grid-column field="ID" headerText="ID" visible="false" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="Code" headerText="Code" width="150" validationRules="@(new { required= true, maxLength = 10 })"></e-grid-column>
<e-grid-column field="ShortDescription" headerText="Short Description" width="150" edit="@(new {@params = TextField})"></e-grid-column>
<e-grid-column field="LongDescription" headerText="Long Description" width="170" ></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<div class="e-card-actions">
</div>
</div>
</div>
<style>
.e-grid .e-altrow {
background-color: #fafafa;
}
</style>
<script>
function actionFailure(args) {
var span = document.createElement('span');
this.element.parentNode.insertBefore(span, this.element);
span.style.color = '#FF0000'
span.innerHTML = 'There was a problem retrieving data';
}
</script>
<script>
function created(args) {
var grid = document.querySelector('#Grid').ej2_instances[0];
grid.dataSource = new ej.data.DataManager({
url: "@Configuration["ApiResourceBaseUrls:Api"]/odata/TableCollections",
adaptor: new ej.data.ODataV4Adaptor({ updateType: 'PUT' }),
headers: [{ 'Authorization': 'Bearer ' + '@ViewBag.AuthToken' }]
});
}
</script>
<script type="text/javascript">
function complete(args) {
console.log("Event " + args.requestType);
// console.log("Action complete " + JSON.stringify(args.dialog));
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
let dialog = args.dialog;
// change the header of the dialog
dialog.header = args.requestType === 'beginEdit' ? 'Edit Record' : 'New Record';
}
}
</script>
<script>
function Changed(args) {
var grid = document.querySelector('#Grid').ej2_instances[0];
if (grid.editModule.formObj.element.querySelector("#" + grid.element.id + "LongDescription").ej2_instances[0].value == "") {
grid.editModule.formObj.element.querySelector("#" + grid.element.id + "LongDescription").ej2_instances[0].value = grid.editModule.formObj.element.querySelector("#" + grid.element.id + "ShortDescription").ej2_instances[0].value;
}
}
</script>
