Click icon in card to open edit dialog

[Sam Tran]

Hi,

To open the edit dialog on a kanban card, right now, I have to double click.

I have an icon/link inside of a card and I want to open the edit dialog when I click my icon.

Could not find reference to that in documentation...how would I do that?

Thanks!

[Buvana Sathasivam]

Hi Sam,   

  

Thanks for using Syncfusion Support.   

  

Your requirement can be achieved in three ways.     

   

Type #1: You can achieve your requirement using queryCellInfo event.  The queryCellInfo event will rendered in a single card while triggering every time.  Using this event, we have changed the card title into anchor tag.  If you click card title, anchor tag will open Kanban dialog form using startEdit public method.  Please find the below code.    

   

KanbanFeatures.cshtml   

  

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

               .ClientSideEvents(eve => eve.QueryCellInfo("queryCellInfo")) // Query cell info event   

)   

   

<script>   

    function queryCellInfo(args) {  // Triggered when every single card rendered   

        $($(args.card).find(".e-primarykey")).html("<a class='cursor' onclick='myFunction(this)'>" + args.data.Id + "</a>"); // Change card title into anchor tag with click event   

    }   

   

    function myFunction(args) { // Triggered when card anchor tag clicked   

        var kanbanObj = $("#Kanban").data("ejKanban");   

        kanbanObj.KanbanEdit.startEdit(parseInt($(args).html()));  // StartEdit public method was used for dialog form open   

    }   

</script>   

   

<style>   

     .cursor {   

           cursor: pointer;   

     }   

</style>   

    

API link: https://help.syncfusion.com/api/js/ejkanban#events:querycellinfo    

  

Sample:http://www.syncfusion.com/downloads/support/forum/134541/ze/SyncfusionMvcApplication61_query1387133390    

   

Type #2:  You can achieve the requirement using custom card layout.  Render templates are used to create custom card layout as per your convenience.  HTML templates can be specified in the template property of the CardSettings as an ID of the template’s HTML element.  If you wish to customize the Kanban card, then use CardSettings property.  We have created anchor tag inside the card using card template.  If you click card Id, then dialog box was opened using startEdit public method.  Please refer to the following code.    

   

KanbanFeatures.cshtml   

   

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

          .CardSettings(card =>   

                    {   

                        card.Template("#cardtemplate"); // Card template   

                   })   

)   

   

<script id="cardtemplate" type="text/x-jsrender"> // Here, customize the Kanban cards   

    <table class="e-templatetable">   

        <colgroup>   

            <col width="10%">   

            <col width="90%">   

        </colgroup>   

        <tbody>   

            <tr>   

                <td class="photo">   

                    <img src="../content/images/kanban/{{:Priority}}.png">    

                </td>   

                <td class="details">   

                    <table>   

                        <colgroup>   

                            <col width="10%">   

                            <col width="90%">   

                        </colgroup>   

                        <tbody>   

                            <tr>   

                                <td class="CardHeader">   CardId: </td>   

                                <td><a class="cursor" onclick='myFunction(this)'>{{:Id}}</a></td> // Anchor tag with click event   

                            </tr>   

                            <tr>   

                                <td class="CardHeader">   Assignee: </td>   

                                <td>{{:Assignee}}</td>   

                            </tr>   

                            <tr>   

                                <td class="CardHeader">   Summary: </td>   

                                <td>{{:Summary}}</td>   

                            </tr>   

                        </tbody>   

                    </table>   

                </td>   

            </tr>   

        </tbody>   

    </table>   

</script>   

   

<script>   

    function myFunction(args) { // Triggered when card anchor tag clicked   

        var kanbanObj = $("#Kanban").data("ejKanban");   

        kanbanObj.KanbanEdit.startEdit(parseInt($(args).html()));  // StartEdit public method was used for dialog form open   

    }   

</script>   

   

<style>   

     .cursor {   

           cursor: pointer;   

      }   

</style>   

   

API link: https://help.syncfusion.com/api/js/ejkanban#members:cardsettings-template    

  

UG link: https://help.syncfusion.com/aspnetmvc/kanban/cards#template    

  

Sample:  http://www.syncfusion.com/downloads/support/forum/134541/ze/SyncfusionMvcApplication61_template-805028119    

   

Type #3:  You can use context menu options for achieving your requirement. Right click on any of the card context menu will open.  If you click on edit card option, it will open Kanban dialog form.  Please refer to the following code.     

KanbanFeature.cshtml   

   

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

       .ContextMenuSettings(menu => menu.Enable(true))      

)   

   

API link: https://help.syncfusion.com/api/js/ejkanban#members:contextmenusettings-enable    

  

UG link: https://help.syncfusion.com/aspnetmvc/kanban/context-menu    

  

Sample:http://www.syncfusion.com/downloads/support/forum/134541/ze/SyncfusionMvcApplication61_context-222460934    

   

Regards,   

Buvana S.