How I can show toast message in Kanban?

[Ahmed]

Hi, 

How I can show toast message in Kanban after update?

Thank you

[Indrajith Srinivasan]

Hi Ahmed, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query “How I can show toast message in Kanban after update”. You can show the Toast after the KanbanData is edited in the Kanban, by comparing the card data in the dialogOpen and dialogClose events. We have also prepared a sample that tries to meet your requirements. 

 

 

 

<ejs-kanban id="Kanban" keyField="Status" dataSource="@ViewBag.data" dialogOpen="onOpen" dialogClose="OnClose"> 

    <e-kanban-columns> 

        <e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column> 

        <e-kanban-column headerText="In Progress" keyField="InProgress"></e-kanban-column> 

        <e-kanban-column headerText="Testing" keyField="Testing"></e-kanban-column> 

        <e-kanban-column headerText="Done" keyField="Close"></e-kanban-column> 

    </e-kanban-columns> 

    <e-kanban-cardsettings contentField="Summary" headerField="Title"></e-kanban-cardsettings> 

    <e-kanban-swimlanesettings keyField="Assignee"></e-kanban-swimlanesettings> 

</ejs-kanban> 

 

<ejs-toast id="element" title="Alert..!" content="Updated" cssClass="e-toast-success" created="toastCreated"></ejs-toast> 

 

<script> 

    var toastObj; 

    var initalData; 

    function toastCreated() { 

        toastObj = this; 

    } 

    function onOpen(args) { 

        initalData = JSON.stringify(args.data); 

    } 

    function OnClose(args) {   

        if (initalData !== JSON.stringify(args.data)) { 

            toastObj.position.X = 'Right'; 

            toastObj.position.Y = 'Top';  

            toastObj.show(); 

        } 

    } 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170224/ze/Kanban_data_update221478510 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Ahmed]

Thanks Very much,

This is perfect.

But I want to request other questions, please.

1-How I can show toast message in Kanban after Swimlane, in other words after move card from status to another?

2-How I can change card color based on specific field in it?

Thank you

Thank you

[Revanth Krishnan]

Hi Ahmed, 

 

 

Good day to you. 

 

 

We have validated your queries, 

 

Query 1: “How I can show toast message in Kanban after Swimlane, in other words after move card from status to another?” 

 

This requirement can be achieved by using the `dragStart` and the `dragStop` then showing the toast in the ‘dragStop’ event. We have prepared a sample for your reference, 

 

Code Snippet: 

<ejs-kanban id="Kanban" keyField="Status" dataSource="@ViewBag.data" dialogOpen="onOpen" dialogClose="OnClose" dragStart="dragStart" dragStop="dragStop"> 

    . . . 

</ejs-kanban> 

 

<ejs-toast id="element" title="Alert..!" content="Updated" cssClass="e-toast-success" created="toastCreated"></ejs-toast> 

 

<script> 

    var toastObj; 

    var initalData; 

    function toastCreated() { 

        toastObj = this; 

    } 

    . . . 

 

    function dragStart(args) { 

        initalData = JSON.stringify(args.data); 

    } 

    function dragStop(args) { 

        if (initalData !== JSON.stringify(args.data)) { 

            toastObj.position.X = 'Right'; 

            toastObj.position.Y = 'Top'; 

            toastObj.show(); 

        } 

    } 

</script> 

 

Query 2: “How I can change card color based on a specific field in it?” 

 

The color of the card based on the specific field can be changed by applying the CSS styles for the class ‘e-card’ with certain attribute(fields). We have prepared a sample for your reference, 

 

Code Snippet: 

<style> 

    .e-card[data-id="Task  - 29002"] { 

        background-color: red; 

    } 

</style> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170224/ze/Kanban_data_update2214785101553105277 

 

Please check the above code snippets and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[Ahmed]

Thanks Very much,

This is perfect.

But I have another question, please.

1-How I can make button in Card to show template dialog from partial view ?

note: "Template dialog fields come from another ViewModel (not the same card ViewModel)".  

Thank you

[Indrajith Srinivasan]

Hi Ahmed, 

 

We have further validated on the reported query “How I can make button in Card to show template dialog from partial view ?”. You can render the buttons inside the cards by using the card template. And render the dialog using the partialview, showing it only when clicking the button in the kanban cards. Check the below shared sample and code blocks for reference. 

 

Code blocks: 

 

 

<ejs-kanban id="Kanban" keyField="Status" dataSource="@ViewBag.data" dialogOpen="onOpen" dialogClose="OnClose" created="created"> 

    <e-kanban-columns> 

        <e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column> 

        <e-kanban-column headerText="In Progress" keyField="InProgress"></e-kanban-column> 

        <e-kanban-column headerText="Testing" keyField="Testing"></e-kanban-column> 

        <e-kanban-column headerText="Done" keyField="Close"></e-kanban-column> 

    </e-kanban-columns> 

    <e-kanban-cardsettings headerField="Title" template="#cardTemplate"></e-kanban-cardsettings> 

    <e-kanban-swimlanesettings keyField="Assignee"></e-kanban-swimlanesettings> 

</ejs-kanban> 

 

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

    <table> 

        <tr> 

            <td>card template</td> 

            <td><button>showDialog</button></td> 

        </tr> 

    </table> 

</script> 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/kanban/cards/#template 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170224/ze/Kanban_with_dialog_partialView1944273932 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith