Error messge when bringing data from the database

[Aaron K]

Hi there,

I am trying to bring data from my database to populate the Kanban board.

I have been getting this error message below when i try it. 

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]

      Unhandled exception rendering component: Object reference not set to an instance of an object.

      System.NullReferenceException: Object reference not set to an instance of an object.

         at Syncfusion.Blazor.Kanban.SfKanban`1.<>c__DisplayClass134_0.<GetColumnData>b__0(TValue data)

         at System.Linq.Enumerable.WhereListIterator`1.ToList()

         at Syncfusion.Blazor.Kanban.SfKanban`1.GetColumnData(List`1 key, IEnumerable`1 dataSource)

         at Syncfusion.Blazor.Kanban.SfKanban`1.GetColumnCards(IEnumerable`1 data)

         at Syncfusion.Blazor.Kanban.SfKanban`1.RefreshLayout()

         at Syncfusion.Blazor.Kanban.SfKanban`1.ClientPropertyChangeHandler(List`1 changedKeys)

         at Syncfusion.Blazor.Kanban.SfKanban`1.OnParametersSetAsync()

         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]

      Unhandled exception in circuit 'An_XMWGURiue7zs8JSZFflpKNJhMai3tV_8YQiiKINo'.

      System.NullReferenceException: Object reference not set to an instance of an object.

         at Syncfusion.Blazor.Kanban.SfKanban`1.<>c__DisplayClass134_0.<GetColumnData>b__0(TValue data)

         at System.Linq.Enumerable.WhereListIterator`1.ToList()

         at Syncfusion.Blazor.Kanban.SfKanban`1.GetColumnData(List`1 key, IEnumerable`1 dataSource)

         at Syncfusion.Blazor.Kanban.SfKanban`1.GetColumnCards(IEnumerable`1 data)

         at Syncfusion.Blazor.Kanban.SfKanban`1.RefreshLayout()

         at Syncfusion.Blazor.Kanban.SfKanban`1.ClientPropertyChangeHandler(List`1 changedKeys)

         at Syncfusion.Blazor.Kanban.SfKanban`1.OnParametersSetAsync()

         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

I don't see many tutorial online to help with this so if there is one,can you please provide it.

Below is the code for razor page. Storyboard is the name of the model.

<h3>StoryBoardPage</h3>

@page "/storyboardpage"

@using Syncfusion.Blazor.Kanban

@using Models

@using Data

@inject IStoryBoardService storyboardService

@inject ApplicationDbContext _context

<div style="padding :10px">

    <button class="e-btn" @onclick="@ShowAddCardDialog">Add new card</button>

</div>

<SfKanban TValue="StoryBoard" DataSource="@StoryboardList" KeyField="Status">

    <KanbanColumns>

        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open" })"></KanbanColumn>

        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress" })"></KanbanColumn>

        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing" })"></KanbanColumn>

        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close" })"></KanbanColumn>

    </KanbanColumns>

    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>

    <KanbanSwimlaneSettings KeyField="Assignee"></KanbanSwimlaneSettings>

</SfKanban>

@code {

    SfKanban<StoryBoard> KanbanRef;

    protected List<StoryBoard> StoryboardList = new();

    public StoryBoard storyBoard = new StoryBoard();

    protected override async Task OnInitializedAsync()

    {

        StoryboardList = await Task.Run(() => storyboardService.GetStoryboardDetails());

    }

    private async void ShowAddCardDialog()

    {

        StoryBoard data = new StoryBoard()

            {

                StoryBoardId = (this.StoryboardList.Count() + 1)

            };

        await this.KanbanRef.OpenDialog(CurrentAction.Add, data);

        _context.StoryBoards.Add(storyBoard);

        await _context.SaveChangesAsync();

    }

}

Thanks,

Aaron

[Vinothkumar Yuvaraj]

Hi Aaron,

We recommend displaying the database data on your Kanban board in the following manner: First, verify that the data is retrieved from the remote before rendering the Kanban board. For your convenience, please refer to the provided code and sample.

@using Syncfusion.Blazor.Kanban

@using Syncfusion.Blazor.Buttons

@inject HttpClient HttpClient

@using System.Collections.Generic;

 

@if (KanbanTasks != null)

{

<SfKanban ID="kanban_board_project" @ref="Kanban" TValue="KanbanTask" KeyField="Status" DataSource=@KanbanTasks> 

    <KanbanColumns>

        <KanbanColumn HeaderText="To do" KeyField="@(new List<string>() { "Open" })" AllowAdding="true"></KanbanColumn>

        <KanbanColumn HeaderText="Doing" KeyField="@(new List<string>() { "InProgress" })"></KanbanColumn>

        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() { "Validate" })"></KanbanColumn>

        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() { "Close" })"></KanbanColumn>

    </KanbanColumns>

    <KanbanCardSettings HeaderField="Id" ContentField="Summary">

    </KanbanCardSettings>

</SfKanban>

}

@code {

    SfKanban<KanbanTask> Kanban;

    public IEnumerable<KanbanTask> KanbanTasks { get; set; }

    protected SfKanban<KanbanTask> kanban;

    private string errorMessage;  

    protected override async Task OnInitializedAsync()

    {

      KanbanTasks = await HttpClient.GetFromJsonAsync<IEnumerable<KanbanTask>>($https://ej2services.syncfusion.com/production/web-services/api/Kanban);

    }

    public class KanbanTask

    {

        public int Id { get; set; }

        public string Status { get; set; }

        public string Summary { get; set; }

        public string Type { get; set; }

        public string Priority { get; set; }

        public string Tags { get; set; }

        public double Estimate { get; set; }

        public string Assignee { get; set; }

        public string ImgUrl { get; set; }

        public int RankId { get; set; }

    }

}

 

Regards,

Vinothkumar

Attachment: RichTextEditor_aa99642c_7eed42a5.zip

[Aaron K]

Hi there,

That isn't the solution i am looking for unfortunately.

I am running a local database connections so i'm not sure how I can implement this with your solution. Most of  your grids i've seen so far allow for this through Entity Framework and CRUD Operations. 

This link here is what i'am talking about : https://blazor.syncfusion.com/documentation/datagrid/entity-frame-work

Note I am using the "handle crud in data layer access". 

I hope this can be implemented in some way.

Kind regards,

Aaron

[Vinothkumar Yuvaraj]

Hi Aaron,

We have prepared a sample as per your requirement to use CRUD operations with Kanban control. Please see the attached sample for your reference.

Please change the file path in the orderContext.cs file and delete the NORTHWIND_log.ldf file from the App_Data folder, before running the sample to avoid exceptions. 

GitHub Sample : https://github.com/SyncfusionExamples/blazor-kanban-crud-url-adaptor

Regards,

Vinothkumar

Attachment: blazorkanbancrudurladaptor_3419c4d5_1b8a4118.zip

[Aaron K]

Hi  Vinothkumar,

I've tried to implement this into my solution with the same error message popping up.

Can i sent this onto you and the syncfusion team to verify?

Kind regards,

Aaron

[Indrajith Srinivasan]

Sure Aaron,

Share us the complexity you are still facing with the suggested solution/sample. We will check and get back to you.

Regards,
Indrajith

[Aaron K]

Hi Indrajith,

I tried to implement your solution in my application which is attached below.

Everything is the same as your solution except instead of being called Order, it is called Storyboard.

Kind regards,

Aaron

Attachment: BugTrackingProject__SyncFusion_3ad8ff9d.zip

[Vinothkumar Yuvaraj]

Hi Aaron,

We attempted to run the sample you provided, but unfortunately, we were unable to do so on our end. Please refer to the attached video for your reference.

Could you please provide us with the following information so that we can replicate your issue on our end?

• Please share the issue-reproducing sample. 
• Please share the steps to replicate your issue so that we can check it on our end.
• Would you be able to modify your sample to address the issue you're experiencing?
• If possible, please share a video demonstrating the issue.

Regards,

Vinothkumar

Attachment: RichTextEditor_Video_d8f2b356.zip

[Aaron K]

Hi,

Sorry for the delay in replying.

Can you remove the 

<AuthorizeView Roles="Admin, User">  & </AuthorizeView>

lines in the storyboardpage.razor. It is not allowing you to  see the page as you need to be an admin or logged in user.

Kind regards,

Aaron

[Vinothkumar Yuvaraj]

Hi Aaron,

We have created a new ticket under your account to follow up with this query. We suggest you to follow up with the ticket for further updates. Please login using the below link.

https://support.syncfusion.com/support

Regards,

Vinothkumar