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

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

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?

1 Reply

RK Rajesh Kumar Anburajan Syncfusion Team 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 

Live Chat Icon For mobile
Up arrow icon