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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Cloned component element doesn't work

Thread ID:

Created:

Updated:

Platform:

Replies:

151088 Jan 30,2020 12:27 PM UTC Feb 10,2020 07:25 AM UTC Blazor 3
loading
Tags: DatePicker
Leandro Mendes
Asked On January 30, 2020 12:27 PM UTC

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">
    <form>
        <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>
        </div>
        <div class="card-body">
            <div class="container">
                <div>
                    <h3>Quer colocar um label no campo?</h3>
                </div>
                <div class="togglebutton">
                    <label>
                        <input type="checkbox" id="placesub" onclick="checkcp(this.id)">
                        Não
                        <span class="toggle"></span>
                        Sim
                    </label>
                </div>
            </div>
            <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>
                <div class="form-group">
                    <h4 class="title">Escolha a sua data</h4>
                    <div class="form-group">
                        <EjsCalendar TValue="DateTime"></EjsCalendar>
                    </div>
                </div>
                <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
                    </button>
                </div>
                <div class="space-10"></div>
            </div>
        </div>
    </form>
</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);
       
    count++;
    clone.appendTo(table);


Berly Christopher [Syncfusion]
Replied On 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?
 
Regards, 
 
Berly B.C 


Leandro Mendes
Replied On February 7, 2020 11:17 AM UTC

Hey,

I solved the problem by myself.
Thanks

Sureshkumar P [Syncfusion]
Replied On February 10, 2020 07:25 AM UTC

Hi Leandro, 
 
 
Regards, 
Sureshkumar P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon