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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Through JS - delete a card when allow editing is not enabled?

Thread ID:





128274 Jan 11,2017 06:19 PM UTC Jan 12,2017 02:39 PM UTC JavaScript 1
Tags: ejKanban
Eric Griffith
Asked On January 11, 2017 06:19 PM UTC

I have a card stack column "done".  I add a check box on the card when in that state.  I want to be able to remove the card when checked.  BUT I don't want the built-in editing enabled.  It is not necessary and confusing.  I can enable the editing and use the card delete method, but card delete seems to only work when the editing is enabled.  Is there a way to delete the card when editing is not enable via javascript?

Rajesh Kumar Anburajan [Syncfusion]
Replied On January 12, 2017 02:39 PM UTC

Hi Eric Griffith,       
Thanks for contacting syncfusion support. 
Query:Delete a card when allow editing is not enabled 
We have separated the edit, delete, add functionalities as module based, so as per our current structure,  to use deleting , we need to load editing module.

To resolve the issue, we have prepared workaround by extending the ejKanban object. Please refer to the following code snippets to use "deleteCard" method without using editing module.

<script type="text/javascript"> 
        $(function () { 
            var kanbanObj; 
            var data = ej.DataManager(window.kanbanData).executeLocal(ej.Query().take(30)); 
                    dataSource: data, 
                    actionComplete: "complete",                 
                    columns: [ 
                        { headerText: "Backlog", key: "Open",showAddButton: true}, 
                        { headerText: "In Progress", key: "InProgress",showAddButton: false }, 
                        { headerText: "Testing", key: "Testing",showAddButton: false }, 
                        { headerText: "Done", key: "Close",showAddButton: false } 
                    keyField: "Status", 
                                    customToolbarItems: [ 
                                        template: "#Delete" 
                                    allowTitle: true, 
                                    fields: { 
                                         content: "Summary", 
                                         primaryKey: "Id", 
                                         imageUrl: "ImgUrl" 
                                    toolbarClick: function (args) {         //Toolbar click event was used here                                        
kanbanObj = $.extend({}, ej.Kanban.prototype); 
                                        var kObj = this; 
                                        kanbanObj.deleteCard = function (primaryKey) { 
                                            var args, cardDiv, currentData, deleteManager, query, promise, pKey = kObj.model.fields.primaryKey; 
                                            cardDiv = kObj.element.find("#" + primaryKey); 
                                            deleteManager = new ej.DataManager(kObj._currentJsonData); 
                                            query = new ej.Query(); 
                                            query = query.where(kObj.model.fields.primaryKey, ej.FilterOperators.equal, primaryKey); 
                                            currentData = deleteManager.executeLocal(query); 
                                            if ($.type(kObj._currentJsonData[0][pKey]) == "number") 
                                                primaryKey = parseInt(primaryKey); 
                                            args = { div: cardDiv, data: currentData[0], requestType: "delete", primaryKeyValue: primaryKey }; 
                                            kObj._saveArgs = args; 
                                            if (kObj._trigger("actionBegin", args)) 
                                                return true; 
                                            kObj._cDeleteData = currentData; 
                                            kObj.updateCard(primaryKey, currentData[0]); 
                        if (args.itemName == "Delete" && this.element.find(".e-kanbancard").hasClass("e-cardselection")) { 
                            var selectedcard = this.element.find(".e-cardselection"); 
                            kanbanObj.deleteCard(selectedcard.attr("id"));  //Here you can call the delete card method 
     <script id="Delete" type="text/x-jsrender"> 
        <a class="e-customdelete  e-icon" /> 
   <style type="text/css" class="cssStyles"> 
        .e-customdelete:before { 
            content: "\e800"; 
            line-height: 26px; 
            min-height: 26px; 
            min-width: 14px; 
            display: inline-block; 
we provided workaround solution sample given below. 
Please let us know if you need any further assistance.  
Rajesh kumar.A 


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