1. Home
  2. Forum
  3. ASP.NET MVC
  4. EJ1 Kanban control

EJ1 Kanban control

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)


3 Replies
VD Vinitha Devi Murugan Syncfusion Team 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 
 


DA David 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 ?

VD Vinitha Devi Murugan Syncfusion Team 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. 
 


Loader.
Up arrow icon