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
close icon

delete card

Hi,

I'm using a kanban, but I can't delete a card. When I press del button no events is fired.

In your examples I can delete a card.

This is my kanban (I use a template for edit)

 @(Html.EJ().Kanban("kbPlanificacion")

                      .DataSource(ds => ds.URL(@Url.Action("GetKanbanData", "Planificacion", new RouteValueDictionary(new { id = ViewBag.idProyecto }))).CrudURL(@Url.Action("KanbanCRUD", "Planificacion")).Adaptor(AdaptorType.UrlAdaptor))
                      .AllowSelection(true)
                      .AllowKeyboardNavigation(true)
                      .EnableTouch(true)
                      .Locale("es-ES").AllowDragAndDrop(true).AllowTitle(true)
                      .EnableTotalCount(true)
                      .Columns(col =>
                      {
                          col.HeaderText("Actividad").Key("1").ShowAddButton(true).IsCollapsed(false).Add();
                          col.HeaderText("Sin Empezar").Key("5").AllowDrag(false).AllowDrop(false).Add();
                          col.HeaderText("Fuera de Plazo").Key("4").AllowDrag(false).AllowDrop(false).Add();
                          col.HeaderText("En progreso").Key("2").AllowDrag(false).AllowDrop(false).Add();
                          col.HeaderText("Finalizadas").Key("3").AllowDrag(false).AllowDrop(false).Add();
                          col.HeaderText("Pdte. Empezar").Key("6").AllowDrag(false).AllowDrop(false).Add();
                      })
                      .CardSettings(card =>
                      {
                          card.ColorMapping(
                              col =>
                              {
                                  col.Add("black", "1");  // Negro
                                  col.Add("#ee4e76", "5");  // Rojo
                                  col.Add("#edba3c", "2");  // Azul
                                  col.Add("#57b94c", "3");  // Verde
                                  col.Add("#ee4e75", "4");  // Rojo
                              });
                      })
                      .KeyField("IdEstado")
                      .Fields(field =>
                      {
                          field.PrimaryKey("Id").Title("Nombre").Content("Denominacion").Color("IdEstado");
                      })                     
                      .EditSettings(edit =>
                      {
                          edit.AllowEditing(true).AllowAdding(true)
                          .EditItems(e =>
                          {
                              e.Field("Id").Add();
                              e.Field("FechaInicio").EditType(KanbanEditingType.DatePicker).Add();
                              e.Field("FechaFin").EditType(KanbanEditingType.DatePicker).Add();
                              e.Field("Observaciones").EditType(KanbanEditingType.TextArea).Add();
                          })
                          .EditMode(KanbanEditMode.DialogTemplate)
                          .DialogTemplate("#editTemplate");
                      })

                      .ClientSideEvents(eve => eve.Load("onKanbanLoad").ActionComplete("onKanbancomplete"))
                )


Thanks

1 Reply

BS Buvana Sathasivam Syncfusion Team July 24, 2017 12:26 PM UTC

Hi Manolo,   
  
Thanks for using Syncfusion Product.   
  
You need to focus on a Kanban control to access the keyboard shortcuts.   You can configure the keys to focus the Kanban control. Once the control is on focused state, then you can select any card by clicking on it or by navigating through arrows. The selected card will be deleted if we press “Delete” key and make sure that control is focused properly. We had prepared the sample with the given code example and deleting is working when the control is focused properly.    
  
Please refer to the following code example.     
  
KanbanFeatures.cshtml   
   
<script>   
    //Control focus key   
    $(document).on("keydown", function (e) {   
        if (e.altKey && e.keyCode === 74) { // j- key code.   
            $("#Kanban").focus();   
        }   
    });   
</script>   
  
  
First, you can select any one card and focus the Kanban control using “alt + j” key.  Please refer to the below screenshot.   
  
  
Now, CRUD method was called properly when you pressed “delete” key.  Please refer to the below screenshot.   
  
    
  
Kanban card delete operation was working fine.  Please refer to the below screenshot.   
  
    
  
  
   
  
Please check with the sample and still if you continue to get the error, then let us know more details about the scenario in which issue reproducing or share the issue reproducible sample.  
  
Regards,   
  
Buvana S.   
 


Loader.
Live Chat Icon For mobile
Up arrow icon