add cards dynamically

[Fernando]

Hi,

Is it possible to programmatically add cards with functionality similar to this image? 

Or what would be the ideal tool for this functionality?

Thanks

[Priyanka Karthikeyan]

Hi Fernando,

 

We’ve prepared a sample that includes the icon and its related content within the card. You can refer to the code snippet and sample provided below.

 

<div class="control-section card-control-section vertical_card_layout">
    <div class="e-card-resize-container">
        <div>
            <div class="row card-layout">
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <div tabindex="0" class="e-card profile" style="justify-content: flex-start;">
                        <div class="e-card-separator"></div>

                        <div class="e-card-actions center">
                            <div class="e-card-content">
                                <div>
                                    <button class="e-card-btn" title="E-mail">
                                        <span class="e-mail-icon cb-icons "></span>
                                    </button>
                                </div>
                                <div>Email</div> <!-- Content below E-mail icon -->
                            </div>

 

                            <div class="e-card-content">
                                <div>
                                    <button class="e-card-btn" title="Google+">
                                        <span class="e-google-icon cb-icons "></span>
                                    </button>
                                </div>
                                <div>Google+</div> <!-- Content below Google+ icon -->
                            </div>

 

                            <div class="e-card-content">
                                <div>
                                    <button class="e-card-btn" title="Facebook">
                                        <span class="e-fb-icon cb-icons "></span>
                                    </button>
                                </div>
                                <div>Facebook</div> <!-- Content below Facebook icon -->
                            </div>

 

                            <div class="e-card-content">
                                <div>
                                    <button class="e-card-btn" title="Tweets">
                                        <span class="e-tweet-icon cb-icons "></span>
                                    </button>
                                </div>
                                <div>Tweets</div> <!-- Content below Tweets icon -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 

Regards,

Priyanka K

Attachment: CardCore_158824ef.zip

[Fernando]

Hi  Priyanka,

Thank you for your prompt response. While the solution provided was helpful, what I was actually seeking was the ability to add cards similar to the function demonstrated. These cards could be without any images, just some labels on each card. However, the key requirement is to have a button that, upon clicking, would add cards to the screen. Additionally, there should be an option to delete cards, similar to the example provided.

I appreciate your attention to this matter and look forward to any further assistance you can provide in achieving this functionality.

Best regards,

Fernando

[Priyanka Karthikeyan]

Hi Fernando,

 

The card is a CSS-level component that you can customize to suit your specific needs using classes like "e-card" or "e-card-header" and so on. For more detailed information, please refer to the documentation. If you're looking to dynamically add or remove cards, we've prepared a sample that demonstrates how to do this on button click events. You can find the code snippet and sample for your reference below.

 

<button id="addCardButton">Add Card</button>
<button id="removeCardButton">Remove Card</button>

<script>
    // Function to add a new card
    function addNewCard() {
        // Create a new card element
        var newCard = document.createElement('div');
        newCard.className = 'e-card-content';

        // Add the button and content to the new card
        newCard.innerHTML = `
            <div>
                <button class="e-card-btn" title="New Card">
                        <span class="e-mail-icon cb-icons"></span>
                </button>
            </div>
            <div>New Card Content</div>
        `;

        // Append the new card to the container
        document.querySelector('.e-card-actions.center').appendChild(newCard);
    }
    function removeNewCard() {
        document.getElementsByClassName('e-card-content')[0].remove(); // you can remove the card content based on the index
    }
    // Attach click event handler to the button using vanilla JavaScript
    document.getElementById('addCardButton').addEventListener('click', function () {
        addNewCard(); // Call the function to add a new card
    });
    document.getElementById('removeCardButton').addEventListener('click', function () {
        removeNewCard(); // Call the function to add a new card
    });
</script>
 

 

 

Documentation:  https://ej2.syncfusion.com/aspnetcore/documentation/card/getting-started

 

Regards,

Priyanka K

Attachment: AddCard_876827a8.zip