Any known issues with Kanban in Blazor?

[emily.thorne91]

Is it possible to use virtual scrolling with Smart Kanban in JavaScript?

[Markov]

Hi,

We do not have known issues with the Kanban. Also, set the virtualization: true property and it will be in virtualized mode.

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[sparki smith]

Hello there,

I am trying to use the Kanban in a Blazor WASM application. Its performance is good and we would like to integrate it into our production system.
However, I still need to resolve some scenarios before proceeding with license purchase and full component integration. The scenario that I have issues is as follows:

The DataSource of the component should be bound to a C# collection with custom items in it. At runtime some properties of items inside the collection get updated. These changes should be visualized in the Kanban.
For example:
The C# collection contains 2 000 custom Tasks. Each Task has property Description. The collection gets loaded and visualized on screen. After that at runtime Task number 3 gets an update and its Description is changed. This change should be visualized on screen. Such updates can happen to as much as 500 to 800 items every 2 seconds.

Reinitializing the entire DataSource of the Kanban re-renders the control and visualizes the change, however the entire visual state of the component (e.g. selection, scroll position and more) gets lost – which is a deal breaker for us.

My question is whether the Kanban and GanttChart are up to such performant scenario?
Is there a way to update only 1 of the items inside the components without re-initializing their entire DataSource?
Is there a way to precisely restore the entire visual state of the components (e.g. precise to the pixel scroll position of all columns, selection and more)?

We also have to visualize the same C# collection inside the GanttChart. The same performance and functional requirements apply there. Please keep in mind this when reviewing this inquiry.

Please let me know if you need any additional information related to the usecase.

I am looking forward to your answer.

Thank you,
Pavlov.

[Markov]

Hi Pavlov,

The Kanban has UpdateTask method to update a single task. Similar is available for the Gantt component. I suggest you to check this: https://www.htmlelements.com/docs/blazor-kanban-server-side-crud/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[sparki smith]

Hello Markov,

I have reviewed the provided demo, unfortunately it does not showcase how the Kanban component should be used. Instead it demonstrates how to create a service, fetching data from DB. This is not what I asked for.

On the other hand, your note about the UpdateTask() method pushed me in the correct direction. I tested it out and the GanttChart works as expected. I believe I can use the component for my last evaluation test.

The Kanban however does not work in the same way. It simply does not update using the same method and shape of objects.
I looked through the available repositories and I managed to find the example, demonstrating how the UpdateTask() can be used in the Kanban. Here is link to the exact page I investigated
https://github.com/HTMLElements/smart-blazor/blob/main/Smart.Blazor.Demos/Pages/KanbanDemos/KanbanMethodsPage.razor

I managed to recreate the issue I am facing with the Kanban in that page. At the end of this post I will paste the entire code of the mentioned page, so that you can take it and easily recreate the scenario on your end.

Long-story-short:
The DataSource is a custom object with GUID as Id. There is DataSourceMap to change the expected property names and custom logic for generating the required Dictionary<string,string> object which represent the changes which should be visualized by the Kanban.

Please inspect the code and let me know what is missing from it. Does the MyTask class fit the minimum requirements of the Kanban? What is lacking and why the Kanban can visualize this class but not update it at runtime?

 

 

Thank you for your cooperation!

<div>

@page "/kanban-methods"

@using System.Reflection
@using System.Text.Json.Serialization

        <Kanban @ref="kanban" DataSource="dataRecords" DataSourceMap="map" Columns="@columns" />

        <div class="options">
            <Button OnClick="UpdateTaskOnClick">Update task</Button>
        </div>

@code {

    public class MyTask
    {
        [JsonPropertyName("label")]
        public string Label { get; set; }
        [JsonPropertyName("status")]
        public string Status { get; set; }

        [JsonPropertyName("id")] public Guid Id { get; set; } = Guid.NewGuid();
    }

    Kanban kanban;

    Dictionary<string, string> map =
        new()
        {
            {"text", "label"}
        };


    List<KanbanColumn> columns = new List<KanbanColumn>()
    {
        new KanbanColumn()
        {
            DataField = "ToDo",
            Label = "To do"
        },
        new KanbanColumn()
        {
            DataField = "InProgress",
            Label = "In progress"
        },
        new KanbanColumn()
        {
            DataField = "Testing",
            Label = "Testing"
        },
        new KanbanColumn()
        {
            DataField = "Done",
            Label = "Done"
        }
    };
    
    private List<MyTask> dataRecords;
    private readonly Random _random = new();
    
    protected override void OnInitialized()
    {
        base.OnInitialized();
        dataRecords =
            new()
            {
                new MyTask()
                {
                    Label = $"Label: {_random.Next()}",
                    Status = "ToDo"
                },
                new MyTask()
                {
                    Label = $"Label: {_random.Next()}",
                    Status = "InProgress"
                },
                new MyTask()
                {
                    Label = $"Label: {_random.Next()}",
                    Status = "Testing"
                },
                new MyTask()
                {
                    Label = $"Label: {_random.Next()}",
                    Status = "Done"
                },
            };
    }

    private void UpdateTaskOnClick()
    {
        var toUpdate = dataRecords[0];
        toUpdate.Label = $"@@@@@@@@@@@@@@@@@@@@@@ {DateTime.Now}";
        
        var updateDict = ToDictionary(toUpdate);
        kanban.UpdateTask(toUpdate.Id, updateDict);
    }
    
    private static Dictionary<string, string> ToDictionary(object obj)
    {
        var dict = new Dictionary<string, string>();
        if (obj == null) return dict;

        
        PropertyInfo[] properties = obj.GetType().GetProperties(BindingFlags.Public | BindingFlags.Instance);

        foreach (var prop in properties)
        {
            if (prop.Name == "Id") continue;
            
            
            string key = prop.Name;
            if (!string.IsNullOrEmpty(key) && char.IsUpper(key[0]))
            {
                key = char.ToLower(key[0]) + key.Substring(1);
            }
            
            object value = prop.GetValue(obj);
            string valueString = value?.ToString() ?? string.Empty;

            dict[key] = valueString;
        }

        return dict;
    }
}

</div>

• This reply was modified 1 month, 2 weeks ago by sparki smith.

[Markov]

Hi,

Please, find below a demo which shows how to update a Task in the Blazor Kanban.

@page "/kanban-overview"

@using Smart.Blazor.Demos.Data
@inject RandomDataService dataService

<style>
    /* This is the CSS used in the demo */

    html,
    body {
    margin: 0;
    }
</style>
<Example Name="Kanban">
    <p>
        Kanban represents a UI component for mapping and visualizing each step of your process as a flow. The Kanban is usually named after the project you are assigned to work on.
        Every Kanban has three main sections that show the state of your tasks in the flow:
        <br /><br />
        - To Do - the area where you place the work that you plan to work on next.
        <br />- In Progress: when you start working on a particular task/card, you have to move it to "In Progress".
        <br />- Done: when the task is completed -> move it to Done.
    </p>

    @if (dataRecords == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <Kanban @ref="kanbanRef"  Editable OnOpening="OpeningEvent" DataSource="dataRecords" Columns="@columns" Collapsible />
        <button class="btn btn-primary" @onclick="UpdateFirstTask">Update First Task</button>
    }
</Example>

@code {
    private Kanban kanbanRef;
    List<KanbanColumn> columns = new List<KanbanColumn>()
    {
        new KanbanColumn()
        {
            DataField = "ToDo",
            Label = "To do"
        },
        new KanbanColumn()
        {
            DataField = "InProgress",
            Label = "In progress"
        },
        new KanbanColumn()
        {
            DataField = "Testing",
            Label = "Testing"
        },
        new KanbanColumn()
        {
            DataField = "Done",
            Label = "Done"           
        }
    };

    void OpeningEvent(Event e)
    {
        KanbanOpeningEventDetail ed = e["Detail"];
        Console.WriteLine(ed);
    }

    private List<KanbanDataRecord> dataRecords;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        dataRecords = dataService.GenerateKanbanData();
    }

    private void UpdateFirstTask()
    {
        if (dataRecords != null && dataRecords.Count > 0)
        {
            var updatedTask = new Dictionary<string, object>
                {
                    ["status"] = "Done",            // update the column/status
                    ["text"] = "Test"     // keep other properties unchanged
                                                    // add other fields if necessary
                };

            kanbanRef.UpdateTask(0, updatedTask); // call UpdateTask to refresh Kanban
        }
    }
}

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts