We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Cloned component element doesn't work

Im trying to clone a component , but every time i do so the cloned component doesn't work.   I need this because im adding information dynamically, so if user needs he can have multiple cards with component. Below i leave the code of what im trying to achieve.

First the html im copying

<div class="card" style="display: none;" id="data0">
        <div class="card-header card-header-text card-header-success">
            <div class="card-text">
                <h4 class="card-title">@valor</h4>
                <input type="hidden" value="@valor" class="form-group" id="testeyu">
        <div class="card-body">
            <div class="container">
                    <h3>Quer colocar um label no campo?</h3>
                <div class="togglebutton">
                        <input type="checkbox" id="placesub" onclick="checkcp(this.id)">
                        <span class="toggle"></span>
            <div class="form-group">
                <!-- <form> -->
                <div class="form-group" id="labelcamp" style="display: none;">
                    <h4 class="title">Label/Identificador</h4>
                    <input type="text" class="form-control" id="labelreq" aria-describedby="emailHelp" placeholder="Insira o label do seu campo">
                    <small id="emailHelp" class="form-text text-muted">O label irá aparecer antes do conteudo/campo do seu valor</small>
                <div class="form-group">
                    <h4 class="title">Escolha a sua data</h4>
                    <div class="form-group">
                        <EjsCalendar TValue="DateTime"></EjsCalendar>
                <div class="space-10"></div>
                <div class="form-group">
                    <button id=@acremove type="button" class="btn btn-danger btn-sm btn-round" onclick="removeElement(this.id)">
                        <i class="material-icons">remove_circle_outline</i> Remover campo
                <div class="space-10"></div>

Javascript/Jquery that use to clone element;

var row = $("#data0");
var table = document.getElementById("colar"); // find table to append to...... a dar append/colar
var clone = row.clone(true,true).prop('id', count).prop('style', "");
 clone.find("#placesub").attr("id", "checkbox" + count);

    clone.find("#labelcamp").attr("id", "label" + count);
    clone.find("#labelreq").attr("id", "lareq" + count);
    clone.find("#cenas").attr("id", "cenas" + count);

3 Replies

BC Berly Christopher Syncfusion Team February 3, 2020 03:55 AM UTC

Hi Leandro, 
Greetings from Syncfusion support. 
While checking the provided code, we could not recognize the below details. So, please provide the details that will help us to check and proceed further. 
  • Whether you have done the cloning process for rendered component using JS interop file in Blazor application?
  • If you are using JS interop, please share the interop and index.razor file that will help us to make the response.
  • Please share the requirement of why do you need to done cloning components in your application.
  • Please share the details that defined component for row and column element in your application
  • Issue reproducing sample (If possible)
  • Whether you have used jQuery or JavaScript for clone the component.
  • Whether you want to render our component dynamically or clone the component for any other application requirement?
Berly B.C 

LM Leandro Mendes February 7, 2020 11:17 AM UTC


I solved the problem by myself.

SP Sureshkumar P Syncfusion Team February 10, 2020 07:25 AM UTC

Hi Leandro, 
Sureshkumar P 

Live Chat Icon For mobile
Up arrow icon