javascriptc#jqueryasp.net-coresyncfusion
jQuery clone not working with syncfusion controls
I have a div with syncfusion controls inside of it. When cloned they do not appear as expected in the copied div. Syncfusion adds their own custom scripts to the controls on page load, so you will see I am doing the same after the clone.
Please see the below declarations in HTML:
<div id="abc" class="row">
<div id="xyz" class="col-md-3">
<div class="card">
<div class="card-header applicant-title">
<span>Applicant 1</span>
</div>
<div class="card-body">
<div class="form-group row">
<label asp-for="Applicants[0].SocialSecurityNumber" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
<ejs-maskedtextbox id="Applicants_0__SocialSecurityNumber" name="Applicants[0].SocialSecurityNumber" mask="000-00-0000"></ejs-maskedtextbox>
<span asp-validation-for="Applicants[0].SocialSecurityNumber" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Applicants[0].Birthdate" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
<ejs-datepicker id="Applicants_0__Birthdate" name="Applicants[0].Birthdate" placeholder="Choose a Date"></ejs-datepicker>
<span asp-validation-for="Applicants[0].Birthdate" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Applicants[0].PhoneNumber" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
<ejs-maskedtextbox id="Applicants_0__PhoneNumber" name="Applicants[0].PhoneNumber" mask="(999)-999-9999"></ejs-maskedtextbox>
<span asp-validation-for="Applicants[0].PhoneNumber" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Applicants[0].WorkPhoneNumber" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
<ejs-maskedtextbox id="Applicants_0__WorkPhoneNumber" name="Applicants[0].WorkPhoneNumber" mask="(999)-999-9999"></ejs-maskedtextbox>
<span asp-validation-for="Applicants[0].WorkPhoneNumber" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Applicants[0].Points" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
<ejs-numerictextbox id="Applicants_0__Points" name="Applicants[0].Points" maxlength="2" format="n" Type="text" showSpinButton="false" showClearButton="false" min="0" max="50"></ejs-numerictextbox>
<span asp-validation-for="Applicants[0].Points" class="text-danger"></span>
</div>
</div>
</div>
</div>
</div>
</div>
Javascript code:
<script type="text/javascript">
var i = 0;
// Declare Syncfusion control settings
var MaskedTextBox1 = new ejs.inputs.MaskedTextBox({
"mask": "000-00-0000"
});
var DatePicker1 = new ejs.calendars.DatePicker({
"placeholder": "Choose a Date"
});
var MaskedTextBox2 = new ejs.inputs.MaskedTextBox({
"mask": "(999)-999-9999"
});
var MaskedTextBox3 = new ejs.inputs.MaskedTextBox({
"mask": "(999)-999-9999"
});
var NumericTextBox1 = new ejs.inputs.NumericTextBox({
"format": "n",
"max": 50,
"min": 0,
"showSpinButton": false,
"step": 1.0
});
$("#btnAdd").click(function () {
i++;
var xyz = $("#xyz").clone();
xyz.find('label').each(function () {
var attr = $(this).attr("for");
if (attr != null) {
$(this).attr("for", attr.replace('_0_', '_' + i + '_'));
}
});
xyz.find('input').each(function () {
this.name = this.name.replace('[0]', '[' + i + ']');
this.id = this.id.replace('_0_', '_' + i + '_');
$(this).val(null);
});
xyz.find('span').each(function () {
var attr = $(this).data("valmsg-for");
if (attr != null) {
$(this).attr("data-valmsg-for", attr.replace('[0]', '[' + i + ']'));
}
});
var divTitle = xyz.find('.applicant-title span')[0];
divTitle.innerText = divTitle.innerText.replace('1', i + 1);
$("#abc").append(xyz);
// APPEND Syncfusion settings to copied controls
MaskedTextBox1.appendTo("#Applicants_" + i + "__SocialSecurityNumber");
DatePicker1.appendTo("#Applicants_" + i +"__Birthdate");
MaskedTextBox2.appendTo("#Applicants_" + i + "__PhoneNumber");
MaskedTextBox3.appendTo("#Applicants_" + i + "__WorkPhoneNumber");
NumericTextBox1.appendTo("#Applicants_" + i + "__Points");
});
</script>
Solution
you have rendered the Syncfusion control as the wrapper component. while clicking the add button, you have cloned the already rendered wrapper components and once again re-rendered as a new set. So, cloned element is rendered again over on the wrapper component (so that you can get double border and icons in the components). Hence, it’s recommended to render the Syncfusion components as input elements instead of wrapper components to get rid of this issue. Here is the modified code snippet,
[Clone.cshtml]
<form method="post">
<div id="abc" class="row">
<div id="xyz" class="col-md-3">
<div class="card">
<div class="card-header applicant-title">
<span>Applicant 1</span>
</div>
<div class="card-body">
<div class="form-group row">
<label asp-for="Applicants[0].SocialSecurityNumber" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
@* Render the masked edit component as input *@
<input type="text" id="Applicants_0__SocialSecurityNumber" name="Applicants[0].SocialSecurityNumber" />
<span asp-validation-for="Applicants[0].SocialSecurityNumber" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Applicants[0].Birthdate" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
@* Render the datepicker component as input *@
<input type="text" id="Applicants_0__Birthdate" name="Applicants[0].Birthdate" />
<span asp-validation-for="Applicants[0].Birthdate" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Applicants[0].PhoneNumber" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
@* Render the masked edit component as input *@
<input type="text" id="Applicants_0__PhoneNumber" name="Applicants[0].PhoneNumber" />
<span asp-validation-for="Applicants[0].PhoneNumber" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Applicants[0].WorkPhoneNumber" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
@* Render the masked edit component as input *@
<input type="text" id="Applicants_0__WorkPhoneNumber" name="Applicants[0].WorkPhoneNumber" />
<span asp-validation-for="Applicants[0].WorkPhoneNumber" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Applicants[0].Points" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
@* Render the numeric text box component as input *@
<input type="text" id="Applicants_0__Points" name="Applicants[0].Points" />
<span asp-validation-for="Applicants[0].Points" class="text-danger"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-12">
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
@section Scripts {
<script type="text/javascript">
// Copy the clone element of the Syncfusion controls
var xyz = $("#xyz").clone();
// store the DOM string and assign the value to "xyz"
xyz = xyz[0].outerHTML;
// Take the another one copy of the outer HTML element into "copy" for further reference
var copy = xyz;
var i = 0;
$("#btnAdd").click(function () {
i++;
// convert the outer HTML string into the HTML DOM object.
xyz = $(xyz);
// Assign the unique ID for the each card control
xyz[0].setAttribute('id', 'xyz' + i);
xyz.find('label').each(function () {
var attr = $(this).attr("for");
if (attr != null) {
$(this).attr("for", attr.replace('_0_', '_' + i + '_'));
}
});
xyz.find('input').each(function () {
this.name = this.name.replace('[0]', '[' + i + ']');
this.id = this.id.replace('_0_', '_' + i + '_');
$(this).val(null);
});
xyz.find('span').each(function () {
var attr = $(this).data("valmsg-for");
if (attr != null) {
$(this).attr("data-valmsg-for", attr.replace('[0]', '[' + i + ']'));
}
});
var divTitle = xyz.find('.applicant-title span')[0];
divTitle.innerText = divTitle.innerText.replace('1', i + 1);
$("#abc").append(xyz);
// Declare new instance for Syncfusion control settings will helps to render the component as a new set without any issues.
// Render masked text box component
var MaskedTextBox1 = new ejs.inputs.MaskedTextBox({
"mask": "000-00-0000"
});
// Render the datepicker component
var DatePicker1 = new ejs.calendars.DatePicker({
"placeholder": "Choose a Date"
});
// Render the masked text box component
var MaskedTextBox2 = new ejs.inputs.MaskedTextBox({
"mask": "(999)-999-9999"
});
// Render the masked text box component
var MaskedTextBox3 = new ejs.inputs.MaskedTextBox({
"mask": "(999)-999-9999"
});
// Render the numeric text box component
var NumericTextBox1 = new ejs.inputs.NumericTextBox({
"format": "n",
"max": 50,
"min": 0,
"showSpinButton": false,
"step": 1.0
});
// APPEND Syncfusion settings to copied controls
MaskedTextBox1.appendTo("#Applicants_" + i + "__SocialSecurityNumber");
DatePicker1.appendTo("#Applicants_" + i + "__Birthdate");
MaskedTextBox2.appendTo("#Applicants_" + i + "__PhoneNumber");
MaskedTextBox3.appendTo("#Applicants_" + i + "__WorkPhoneNumber");
NumericTextBox1.appendTo("#Applicants_" + i + "__Points");
// Assign the reference copy of outer element to the "xyz" again
xyz = copy;
});
// Render the initially defined masked text box component
var mask = new ejs.inputs.MaskedTextBox({
"mask": "000-00-0000"
});
mask.appendTo("#Applicants_0__SocialSecurityNumber");
// Render the initially defined datepicker component
var datepicker = new ejs.calendars.DatePicker({
"placeholder": "Choose a Date"
});
datepicker.appendTo("#Applicants_0__Birthdate");
// Render the initially defined masked text box component
var mask2 = new ejs.inputs.MaskedTextBox({
"mask": "(999)-999-9999"
});
mask2.appendTo("#Applicants_0__PhoneNumber");
// Render the initially defined masked text box component
var mask3 = new ejs.inputs.MaskedTextBox({
"mask": "(999)-999-9999"
});
mask3.appendTo("#Applicants_0__WorkPhoneNumber");
// Render the initially defined numeric text box component
var numeric = new ejs.inputs.NumericTextBox({
"format": "n",
"max": 50,
"min": 0,
"showSpinButton": false,
"step": 1.0,
"showClearButton": false
});
numeric.appendTo("#Applicants_0__Points");
</script>
}
You can refer to the sample from here.
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices