ej-kanban not filling data table from Viewbag in asp.net core.

Hi, 

I am using syncfusion kanban in my project. As per described in kanban documentation I have set datasource, css and js but it's not showing data on the screen. It's showing only for header section from table but not showing records or data from table body. When I inspect the board then it's showing table body is an empty. However everything I have place same as described in documentation. Please can you guide me to resolve this?

My code is as below : 

Html file : 

@using Syncfusion.JavaScript;
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<environment include="Development,Staging,Production">
    <script id="svgTemplate" type="text/x-jsrender">
        <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="225px" height="28px" viewBox="0 -5 225 28">
            <g visibility="visible">
                <image width="20px" height="20px" opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:rel='nofollow' href="{{:addInfo.source}}"></image>
                <text x="40" y="18" font-size="14">
                    <tspan>{{:name}}</tspan>
                </text>
            </g>
        </svg>
    </script>
</environment>

        <ej-kanban id="KanbanBoard" key-field="Status" dataSource="@ViewBag.datasource">
                <e-kanbancolumns>
                    <e-kanbancolumn header-text="Backlog" key=@(new List<string>(){"Open"})>
                    </e-kanbancolumn>
                    <e-kanbancolumn header-text="In Progress" key=@(new List<string>() {"InProgress"})></e-kanbancolumn>
                    <e-kanbancolumn header-text="Done" key=@(new List<string>() {"Close"})></e-kanbancolumn>
                </e-kanbancolumns>
                <e-kanbanfield content="Summary" primary-key="Id">
                </e-kanbanfield>
            </ej-kanban>

<ej-script-manager></ej-script-manager>

_Layout page:

<head>
<environment include="Development,Staging,Production">
<link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
<script src="~/Assets/js/libs/jquery-3.2.1.min.js"></script>
<script src="~/lib/jsrender/jsrender.js"></script>
<script src="~/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"></script>
</environment>
</head>
<body>
@RenderBody()
</body>

Controller.cs

List<Tasks> Task = new List<Tasks>();
public IActionResult Tickets()
{
Task.Add(Datasource from syncfusion documentations);
ViewBag.datasource = Task;
return View();
}

So it's loading kanban board but under the task list it's not showing records there. Please check it. Data is moving from controller to view using viewbag but it's not showing/displaying under the task list. Please can you guide about this?

Kanban.jpg


1 Reply

VJ Vinitha Jeyakumar Syncfusion Team January 19, 2022 11:15 AM UTC

Hi Hardik,


We suspect that the issue occurred due to lack of reference in the layout page. please include the below codes in your layout.cshtml file.

Code snippet:
<html>
    <head>
        <environment names="Development">
            <link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <link rel="stylesheet" rel='nofollow' href="~/css/site.css" />
            <link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
            <link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css" rel="stylesheet" />
        </environment>
    </head>
    <body>
        <environment names="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/js/site.js" asp-append-version="true"></script>        
            <script src="~/lib/syncfusion-javascript/Scripts/jsrender.min.js"></script>
            <script src="~/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"></script>
        </environment>
    </body>
    </html>


We want to let you know that our Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Please refer to the documentation and demos of EJ2 Syncfusion Kanban control which has all features as same as EJ1.



Regards,
Vinitha


Loader.
Up arrow icon