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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

EJ1 Kanban control

Thread ID:

Created:

Updated:

Platform:

Replies:

146551 Aug 7,2019 11:23 PM UTC Aug 13,2019 12:12 PM UTC ASP.NET MVC 3
loading
Tags: Kanban
David
Asked On August 7, 2019 11:23 PM UTC

Hi All new to the community what an excellent Kanban board, will be using it in a project tool.
Question how does one adjust the width and height of the card and the swim lanes at present its chopping of some of my text on labels.
Also, their example which shows them changing a text on the card to be a label can someone explains how this works.


I tried adding the card settings tag but what I want to do is where the field is for 
What I want is if the task is done it would wrap a label around the word.

   
                 ' .CardSettings(card=>
                    {
                        card.ColorMapping(color =>
                        {
                            color.Add("#cb2027", "Backlog")
                                .Add("#67ab47", "Doing")
                                .Add("#fbae19", "Done")
                                .Add("#fbae19", "ReleaseBraking")
                                .Add("#fbae19", "Deployed")
                                 .Add("#fbae19", "UAT")
                                    .Add("#fbae19", "Completed")
                                .Add("#6a5da8", "Testing");
                        });
                        card.Template("#cardTemplate");
                    })
    )'
![](https://i.imgur.com/vJRZUPi.png)


Vinitha Devi Murugan [Syncfusion]
Replied On August 8, 2019 12:45 PM UTC

Hi Cliff, 
 
Greetings from Syncfusion. 
 
By default kanban cards are responsive. But in your shared image you have rendered cards using cardTemplate. To overcome this ‘text chapping’ you need to align the card text by using CSS. We have prepared a sample with the Kanban card template. Please refer to the following code.  
 
 
  // Card Template 
   
<script id="cardtemplate" type="text/x-jsrender">              
        <table class="e-templatetable"> 
          <tbody> 
           <tr> 
            <td class="photo"> 
                <img class="e-imgCard"src="{{:ImageUrl}}".png"> 
            </td>             
            <td class="details"> 
                <table> 
                    <tbody> 
                        <tr> 
                            <td class="CardHeader">   Assignee: </td> 
                            <td>{{:Assignee}}</td> 
                        </tr>                       
                        <tr> 
                            <td class="CardHeader">   Summary: </td> 
                            <td>{{:Summary}}</td> 
                        </tr> 
                        <tr> 
                            <td class="CardHeader">   Type: </td> 
                            <td>{{:Type}}</td>                                                 
                        </tr> 
                    </tbody> 
                </table> 
            </td> 
            </tr> 
            <tr> 
            <td></td> 
            <td class="e-trianglecell">"  // You need to define td for applycolor  
            <div class="e-bottom-triangle {{:Type}}"></div> 
            </td> 
           </tr> 
        </tbody> 
    </table>   
    </script> 
    <style type="text/css">   
                .e-kanban .e-kanbancard .Improvement{ 
                            border-bottom-color: #67ab47; 
                        } 
                        .e-kanban .e-kanbancard .Bug{ 
                            border-bottom-color: #cb2027; 
                        } 
                        .e-kanban .e-kanbancard .Story{ 
                            border-bottom-color: #179bd7; 
                        } 
                        .e-kanban .e-kanbancard .Epic{ 
                           border-bottom-color: #fbae19; 
                        } 
                        .e-kanban .e-kanbancard .Others{ 
                            border-bottom-color: #6a5da8; 
                        } 
      .e-trianglecell{ 
            padding: 0; 
        } 
        .e-templatetable { 
            width: 100%; 
            border-collapse: collapse; 
        } 
           .details >table { 
            margin-left:2px;             
                                    border-collapse: separate; 
            border-spacing: 2px; 
            width: 100%; 
        } 
                .details td { 
                    vertical-align: top; 
                } 
        .details { 
            padding: 8px 8px 10px 0; 
        } 
        .photo { 
            padding: 8px 6px 10px 6px; 
            text-align: center; 
        } 
        .CardHeader { 
            font-weight: bolder; 
            padding-right: 10px; 
        } 
    </style> 
 
      $("#Kanban").ejKanban({  
           ……………………  
           queryCellInfo: "queryCellInfo"  // You can define queryCellInfo event  
      });  
 
             function queryCellInfo(args){ // query cell info event was called when render Kanban card  
                 var type = args.data.Type, color;  
                 if(type == "Improvement") // Get card type and assign color value  
                     color = "#67ab47";   
                 if(type == "Bug")  
                     color = "#cb2027";  
                 if(type == "Story")   
                     color ="#179bd7";  
                 if(type=="Epic")  
                    color= "#fbae19";   
                 if (type == "Others")  
                    color  = "#6a5da8";  
              }  
  
   
Please check with JS playground and let us know if solution is different from your requirement, then please provide us more details about it.  So, that we can check and provide you the best solution.  
 
Regards, 
M.Vinitha devi 
 


David
Replied On August 8, 2019 07:40 PM UTC

Hi No Matter what I do I cannot get the photo to appear correctly in the template

Please see the image here showing that all entries have an image attached

https://i.imgur.com/6xkzIuV.png

Here you will the source has just the word unkown instead of the file name.

https://i.imgur.com/29BCRJA.png

Here is my code 


You will notice also my mvc application is not applying the colors as well maybe a css file i am missing in my layout file ?

Vinitha Devi Murugan [Syncfusion]
Replied On August 13, 2019 12:12 PM UTC

Hi Cliff, 
 
Thanks for your patience. 
 
We have checked the reported scenarios by preparing a sample based on your shared code, and we are able to reproduce the issue. We suggest you use the below highlighted code to overcome the issue and same can be available in below link. 
  
@{ 
    ViewBag.Title = "ScheduleFeatures"; 
} 
 
@(Html.EJ().Kanban("Kanban").Width("100%") 
.IsResponsive(true) 
…………………….. 
……………….. 
 
      .AllowScrolling(true) 
      .ScrollSettings(sSettings => { sSettings.Width(1000).Height(400); }) 
…………………….. 
……………….. 
      
            .ClientSideEvents(eve => 
            { 
                eve 
                .ToolBarClick("toolbarClick") 
                .ActionComplete("complete") 
                .QueryCellInfo("queryCellInfo"); 
            }) 
…………………….. 
……………….. 
 
            .CardSettings(card => 
            { 
                card.Template("#cardtemplate"); 
            }) 
…………………….. 
……………….. 
) 
 
 
<script type="text/javascript"> 
     
    // To change the triangle color based on the type 
    function queryCellInfo(args) { 
        var type = args.data.Type, color; 
        if (type == "Backlog") 
            color = "#cb2027"; 
        if (type == "Doing") 
            color = "#67ab47"; 
        if (type == "Done") 
            color = "#fbae19"; 
        if (type == "ReleaseBraking") 
            color = "#fbae19"; 
        if (type == "Deployed") 
            color = "#fbae19"; 
        if (type == "UAT") 
            color = "#fbae19"; 
        if (type == "Completed") 
            color = "#fbae19"; 
        if (type == "Testing") 
            color = "#cb2027"; 
 
    } 
  ……………….. 
……………….. 
</script> 
<script id="cardtemplate"> 
        <table class="e-templatetable"> 
            <colgroup> 
                <col width="10%"> 
                    <col width="90%"> 
        </colgroup> 
            <tbody> 
                <tr> 
                    <td class="photo"> 
                        <img class="e-imgCard" src="../content/images/kanban/{{:ImgUrl}}.png"/> 
                    </td> 
                    <td class="details"> 
                                <table> 
                                    <colgroup> 
                                        <col width="10%"> 
                                            <col width="90%"> 
                                         </colgroup> 
                            <tbody> 
                                <tr> 
                                    <td class="CardHeader">   Assignee: </td> 
                                                    <td>{{: Assignee}}</td> 
                                </tr> 
                                <tr> 
                                    <td class="CardHeader">   Summary: </td> 
                                    <td>{{:Summary}}</td> 
                                </tr> 
                                <tr> 
                                    <td class="CardHeader">   Type: </td> 
                                    <td>{{:Type}}</td> 
                                </tr> 
                            </tbody> 
                        </table> 
                    </td> 
                </tr> 
                <tr> 
                    <td></td> 
                    <td class="e-trianglecell"> 
                        <div class="e-bottom-triangle {{:Type}}"></div> 
                    </td> 
                </tr> 
            </tbody> 
        </table> 
</script> 
<style> 
    .e-imgCard { 
        border-radius: 50%; 
        border: 1px solid; 
        border-color: #c8c8c8; 
        background: #ececec; 
    } 
 
    .e-kanban .e-kanbancard .Backlog { 
        border-bottom-color: #cb2027; 
    } 
 
    .e-kanban .e-kanbancard .Doing { 
        border-bottom-color: #67ab47; 
    } 
 
    .e-kanban .e-kanbancard .Done, 
    .e-kanban .e-kanbancard .ReleaseBraking, 
    .e-kanban .e-kanbancard .Deployed, 
    .e-kanban .e-kanbancard .UAT, 
    .e-kanban .e-kanbancard .Completed 
    { 
        border-bottom-color: #fbae19; 
    } 
 
    .e-kanban .e-kanbancard .Testing 
    { 
        border-bottom-color: #cb2027; 
    } 
     
    .e-kanban .e-kanbancard .Epic { 
        border-bottom-color: #fbae19; 
    } 
 
    .e-kanban .e-kanbancard .Others { 
        border-bottom-color: #6a5da8; 
    } 
 
    .e-trianglecell { 
        padding: 0; 
    } 
 
    .e-templatetable { 
        width: 100%; 
        border-collapse: collapse; 
    } 
 
    .details > table { 
        margin-left: 2px; 
        border-collapse: separate; 
        border-spacing: 2px; 
        width: 100%; 
    } 
 
    .details td { 
        vertical-align: top; 
    } 
 
    .details { 
        padding: 8px 8px 10px 0; 
    } 
 
    .photo { 
        padding: 8px 6px 10px 6px; 
        text-align: center; 
    } 
 
    .CardHeader { 
        font-weight: bolder; 
        padding-right: 10px; 
    } 
</style> 
 
Kindly use the above suggested way and let us know, if it resolves your problem and also, if you need any further assistance on this 
 
Regards, 
M.Vinitha devi. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon