In dialoag.ts add code in constructor.
this.byId("SmkButton").appendTo(this.byId("SmkId").parent());
this.byId("AtmButton").appendTo(this.byId("AtmNo").parent());
Dialog.html create id.
<div id="~_Tabs" class="s-DialogContent">
<div id="~_Toolbar" class="s-DialogToolbar">
</div>
<ul>
<li><a href="#~_TabInfo"><span>Bhakt Detail</span></a></li>
<li><a href="#~_TabJobs"><span>Job Detail</span></a></li>
<li><a href="#~_TabIdProofs"><span>Id Proof Detail</span></a></li>
<li><a href="#~_TabCharactors"><span>Charactr Detail</span></a></li>
<li><a href="#~_TabSakshi"><span>Sakshi Detail</span></a></li>
</ul>
<div id="~_TabInfo" class="tab-pane s-TabInfo">
<div class="s-Form">
<form id="~_Form" action="">
<div class="fieldset ui-widget ui-widget-content ui-corner-all">
<div id="~_PropertyGrid"></div>
<div class="clear"></div>
</div>
</form>
</div>
</div>
<div id="~_TabJobs" class="tab-pane s-TabOrders">
<div id="~_JobDetailEditGrid">
</div>
</div>
<div id="~_TabIdProofs" class="tab-pane s-TabOrders">
<div id="~_IdProofEditGrid">
</div>
</div>
<div id="~_TabCharactors" class="tab-pane s-TabOrders">
<div id="~_CharacterDetailsEditGrid">
</div>
</div>
<div id="~_TabSakshi" class="tab-pane s-TabOrders">
<div id="~_SakshiHaribhagatEditGrid">
</div>
<div id="~_SakshiTyagiEditGrid">
</div>
</div>
<div id="~_SmkButton">
<button>!</button>
</div>
<div id="~_AtmButton">
<button>!</button>
</div>
</div>
Dialog.ts full.
namespace Serene.Bhaktyadi { @Serenity.Decorators.registerClass() @Serenity.Decorators.maximizable() @Serenity.Decorators.responsive() export class BhaktMasterDialog extends Serenity.EntityDialog<BhaktMasterRow, any> { protected getFormKey() { return BhaktMasterForm.formKey; } protected getColumnsKey() { return "Bhaktyadi.BhaktMaster"; } protected getIdProperty() { return BhaktMasterRow.idProperty; } protected getLocalTextPrefix() { return BhaktMasterRow.localTextPrefix; } protected getNameProperty() { return BhaktMasterRow.nameProperty; } protected getService() { return BhaktMasterService.baseUrl; } protected form = new BhaktMasterForm(this.idPrefix); protected SmkId; protected AtmNo; protected fields = []; protected SmkButton; protected AtmButton; constructor() { super(); var currentdate = new Date(); currentdate.setDate(currentdate.getDate() + 1); this.form.SmkCardIssueDate.set_maxDate(currentdate); this.form.SmkEntryDate.set_maxDate(currentdate); this.form.AksharvasDate.set_maxDate(currentdate); this.form.Dob.set_maxDate(currentdate); this.form.SatsangDay.set_maxDate(currentdate); this.form.SmkCardIssueDate.change(e => { if (this.form.SmkCardIssueDate.value != '' && this.form.SmkCardIssueDate.value != null) this.form.SmkCardIssued.value = true; else this.form.SmkCardIssued.value = false; }); this.byId("JobDetail").closest('.field').hide().end().appendTo(this.byId("TabJobs")); this.byId("IdProofDetailsList").closest('.field').hide().end().appendTo(this.byId("TabIdProofs")); this.byId("CharacterDetailsList").closest('.field').hide().end().appendTo(this.byId("TabCharactors")); //this.byId("SkillSetDetailList").closest('.field').hide().end().appendTo(this.byId("TabSkillSet")); this.byId("SakshiHaribhagatDetailList").closest('.field').hide().end().appendTo(this.byId("TabSakshi")); this.byId("SakshiTyagiDetailList").closest('.field').hide().end().appendTo(this.byId("TabSakshi")); this.byId("AddressDetailList").closest('.field').hide().end().appendTo(this.byId("TabAddress")); this.byId("SmkButton").appendTo(this.byId("SmkId").parent()); this.byId("AtmButton").appendTo(this.byId("AtmNo").parent()); this.SmkButton = this.byId("SmkButton")[0]; this.AtmButton = this.byId("AtmButton")[0]; this.afterLoadEntity = () => { //if (this.form.Dob) { // var timeDiff = Date.now() - this.form.Dob.valueAsDate.getTime(); // this.form.Age.value =String(Math.floor((timeDiff / (1000 * 3600 * 24)) / 365)); //} if (this.form.SmkId.value != undefined && this.form.SmkId.value != null) this.SmkButton.hidden = true; if (JSON.stringify(this.form.AtmNo.value) != "" && this.form.AtmNo.value != null) this.AtmButton.hidden = true; var BhaktId = this.entity.BhaktId; if (BhaktId == undefined) { BhaktSakshiGrid.url = 'Custom/0'; TyagiSakshiGrid.url = 'TyagiSakshi/0'; } else { BhaktSakshiGrid.url = 'Custom/' + BhaktId; TyagiSakshiGrid.url = 'TyagiSakshi/' + BhaktId; } } this.SmkButton.onclick = () => { this.fields = []; for (var key in Bhaktyadi.BhaktMasterRow.Fields) { if (key !== "SmkId") { this.fields.push(key) } } Bhaktyadi.BhaktMasterService.List({ Take: 1, Sort: ["SmkId DESC"], ExcludeColumns: this.fields }, response => { console.log(JSON.stringify(response.Entities[0].SmkId)); this.SmkId = JSON.stringify(response.Entities[0].SmkId + 1); if (this.form.SmkId.value == null) { //this.form.SmkId.value.toString() =="" || if (this.SmkId == null) { this.SmkId = 1; } this.form.SmkId.value = this.SmkId; this.byId("SmkButton")[0].hidden = true; } }); return false; }; this.AtmButton.onclick = () => { this.fields = []; for (var key in Bhaktyadi.BhaktMasterRow.Fields) { if (key !== "AtmNo") { this.fields.push(key) } } Bhaktyadi.BhaktMasterService.List({ Take: 1, Sort: ["AtmNo DESC"], ExcludeColumns: this.fields }, response => { console.log(JSON.stringify(response.Entities[0].AtmNo)); this.AtmNo = response.Entities[0].AtmNo + 1; if (JSON.stringify(this.form.AtmNo.value) == "" || this.form.AtmNo.value == null) { if (this.AtmNo == null) { this.AtmNo = 1; } this.form.AtmNo.value = this.AtmNo; this.byId("AtmButton")[0].hidden = true; } }); return false; }; } } }