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

[Eric Griffith]

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]

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.

 

  

[HTML] 

<script type="text/javascript"> 

        $(function () { 

            var kanbanObj; 

            var data = ej.DataManager(window.kanbanData).executeLocal(ej.Query().take(30)); 

            $("#Kanban").ejKanban( 

                { 

                    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> 

     <script id="Delete" type="text/x-jsrender"> 

        <a class="e-customdelete  e-icon" /> 

    </script> 

   <style type="text/css" class="cssStyles"> 

        .e-customdelete:before { 

            content: "\e800"; 

            line-height: 26px; 

            min-height: 26px; 

            min-width: 14px; 

            display: inline-block; 

        } 

    </style> 

  

  

we provided workaround solution sample given below. 

  

Sample file:  http://www.syncfusion.com/downloads/support/forum/128274/ze/Delete_card_sample378037353 

  

Please let us know if you need any further assistance.  

  

Regards, 

Rajesh kumar.A