Products

[sparki smith]

No, I havent tried that approach. I did not find it in the docs. That is why I wrote here.

After trying it out, it looks like it does the job as required. Thank you for pointing it out!

I believe the GanttChart with this approach for updating dedicated items will cover our requirements for dynamic data.

The only remaining component for evaluation is the Kanban.

Could you please take a look at my other thread?
https://www.htmlelements.com/forums/topic/any-known-issues-with-kanban-in-blazor/

• This reply was modified 2 weeks, 3 days ago by sparki smith.

[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 2 weeks, 3 days ago by sparki smith.

[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.

[Author]

Posts