[Solved] TelerikTaskBoard - REPLs are broken + question

[Craig]

It appears none of the 'open in REPL' buttons work for the TelerikTaskBoard component. Some don't load any code in the REPL, others error at runtime.

I was trying to figure out how you got the Add Card pane to overlay the task board instead of push, when using the default Add Card hooks. The default behavior appears to be the Add card pushes the taskboard content. The online AI bot said this wasn't exposed via a parameter, but your demos that run in the Demos it uses an overlay. And I didn't see how this was working, as we want the same behavior.

Also there's no option to add TaskBoard as a tag here in forum posts.

[Craig]

It turns out to be that we were using flex widths on the taskboard. E.g. overall width was flexing to 100% of the container and the column widths were set to percentages (e.g. 33% for each col, 3 cols).

It appears this isn't really workable with how taskboard injects the Add panel, as the cols would compress and be pushed. Not sure if trying to remove the margin auto-injected when the Add Card is shown would help. But using fixed measurements for col widths and overall taskboard width seems to make it behave, similar to the demos. Supporting percentages would be nice tho, as an enhancement. Thanks.

[Dimo]

@Craig

It is possible to configure the TaskBoard to use equal percentage column widths. You need a couple of CSS rules. However, this can produce undesired effects on small (narrow) screens. You may want to consider a min-width style on the TaskBoard component or the columns.

The following example is based on the one in the TaskBoard Events documentation.

<p>Last Event: @TaskBoardEventLog</p>

<TelerikTaskBoard CardData="@TaskBoardCards"
                  ColumnData="@TaskBoardColumns"
                  ColumnReorderable="true"
                  Height="600px"
                  OnCardCreate="@OnTaskBoardCardCreate"
                  OnCardClick="@OnTaskBoardCardClick"
                  OnCardDelete="@OnTaskBoardCardDelete"
                  OnCardMove="@OnTaskBoardCardMove"
                  OnCardUpdate="@OnTaskBoardCardUpdate"
                  OnColumnCreate="@OnTaskBoardColumnCreate"
                  OnColumnDelete="@OnTaskBoardColumnDelete"
                  OnColumnReorder="@OnTaskBoardColumnReorder"
                  OnColumnUpdate="@OnTaskBoardColumnUpdate"
                  SelectedCard="@TaskBoardSelectedCard"
                  SelectedCardChanged="@TaskBoardSelectedCardChanged"
                  TColumn="@TaskBoardColumn"
                  TItem="@TaskBoardCard">
    <TaskBoardToolBar>
        <TaskBoardToolBarAddColumnTool />
    </TaskBoardToolBar>
</TelerikTaskBoard>

<style>
    .k-taskboard-content,
    .k-taskboard-columns-container {
        width: 100%;
        margin-block: 0 !important;
    }

    .k-taskboard .k-taskboard-column {
        width: @($"{100 / TaskBoardColumns.Count}%") !important;
        min-width: 240px;
        flex: 1 1 auto;
    }
</style>

@code {
    private List<TaskBoardCard> TaskBoardCards { get; set; } = new();
    private List<TaskBoardColumn> TaskBoardColumns { get; set; } = new();
    private TaskBoardCard? TaskBoardSelectedCard { get; set; }

    private string TaskBoardEventLog { get; set; } = string.Empty;

    private void OnTaskBoardCardCreate(TaskBoardCardCreateEventArgs<TaskBoardCard> args)
    {
        args.Item.Id = ++LastId;

        TaskBoardCards.Add(args.Item);

        TaskBoardEventLog = $"Added card {args.Item.Title}";
    }

    private void OnTaskBoardCardClick(TaskBoardCardClickEventArgs<TaskBoardCard> args)
    {
        TaskBoardEventLog = $"Clicked card {args.Item.Title}";
    }

    private void OnTaskBoardCardDelete(TaskBoardCardDeleteEventArgs<TaskBoardCard> args)
    {
        TaskBoardCards.Remove(args.Item);

        TaskBoardEventLog = $"Deleted card {args.Item.Title}";
    }

    private void OnTaskBoardCardMove(TaskBoardCardMoveEventArgs<TaskBoardCard> args)
    {
        //args.IsCancelled = true;

        args.Item.Index = args.NewIndex;
        args.Item.Status = args.NewStatus;

        TaskBoardEventLog = $"Moved card {args.Item.Title} from index {args.OldIndex} to index {args.NewIndex} and from status {args.OldStatus} to status {args.NewStatus}";
    }

    private void OnTaskBoardCardUpdate(TaskBoardCardUpdateEventArgs<TaskBoardCard> args)
    {
        //args.IsCancelled = true;

        args.OriginalItem.Description = args.Item.Description;
        args.OriginalItem.Title = args.Item.Title;

        TaskBoardEventLog = $"Updated card {args.Item.Title}";
    }

    private void OnTaskBoardColumnCreate(TaskBoardColumnCreateEventArgs<TaskBoardColumn> args)
    {
        TaskBoardColumns.Add(args.Item);

        TaskBoardEventLog = $"Added column {args.Item.Title}";
    }

    private void OnTaskBoardColumnDelete(TaskBoardColumnDeleteEventArgs<TaskBoardColumn> args)
    {
        TaskBoardColumns.Remove(args.Item);

        // Optionally, delete or move all Cards from the column
        string newCardStatus = TaskBoardColumns.FirstOrDefault()?.Status ?? string.Empty;
        TaskBoardCards.ForEach(c =>
        {
            if (c.Status == args.Item.Status)
            {
                c.Status = newCardStatus;
            }
        });

        TaskBoardEventLog = $"Deleted column {args.Item.Title}";
    }

    private void OnTaskBoardColumnReorder(TaskBoardColumnReorderEventArgs<TaskBoardColumn> args)
    {
        //args.IsCancelled = true;

        TaskBoardEventLog = $"Reordered column {args.Item.Title} from index {args.OldIndex} to index {args.NewIndex}";
    }

    private void OnTaskBoardColumnUpdate(TaskBoardColumnUpdateEventArgs<TaskBoardColumn> args)
    {
        //args.IsCancelled = true;

        args.OriginalItem.Title = args.Item.Title;

        TaskBoardEventLog = $"Updated column {args.Item.Title}";
    }

    private void TaskBoardSelectedCardChanged(TaskBoardCard newSelectedCard)
    {
        TaskBoardSelectedCard = newSelectedCard;

        TaskBoardEventLog = $"Selected card {newSelectedCard?.Title}";
    }

    private int LastId { get; set; }

    protected override void OnInitialized()
    {
        int columnsCount = 5;
        int cardsCount = 15;

        for (int i = 1; i <= columnsCount; i++)
        {
            int columnId = ++LastId;

            TaskBoardColumns.Add(new TaskBoardColumn()
            {
                Index = i - 1,
                Status = $"Status {columnId}",
                Title = $"Column {columnId}"
            });
        }

        for (int i = 1; i <= cardsCount; i++)
        {
            string cardStatus = $"Status {(i % columnsCount) + 1}";
            int cardIndex = TaskBoardCards.Where(c => c.Status == cardStatus).Count();
            int cardId = ++LastId;
            
            TaskBoardCards.Add(new TaskBoardCard()
            {
                Description = $"Description {cardId}",
                Id = cardId,
                Index = cardIndex,
                Status = cardStatus,
                Title = $"Card {cardId}"
            });
        }

        base.OnInitialized();
    }

    public class TaskBoardCard
    {
        public string Description { get; set; } = string.Empty;
        public int Id { get; set; }
        public int Index { get; set; }
        public string Priority { get; set; } = string.Empty;
        public string Status { get; set; } = string.Empty;
        public string Title { get; set; } = string.Empty;
    }

    public class TaskBoardColumn
    {
        public TaskBoardColumnButtons? Buttons { get; set; }
        public bool Enabled { get; set; } = true;
        public int Index { get; set; }
        public string Status { get; set; } = string.Empty;
        public string Title { get; set; } = string.Empty;
        public string Width { get; set; } = string.Empty;
        public int? WipLimit { get; set; }
    }
}

[Dimo]

Hello Craig,

Indeed, currently the REPL playground cannot run code snippets that contain a TaskBoard component. This is due to an integration issue that we have recently resolved, and the changes will take effect in our next release in mid August.

With regard to the edit form pane - it uses a position:absolute style and should overlay the TaskBoard columns. There is no push mode and I am not sure how do you achieve such a behavior. My only assumption is some custom CSS on the page, which overrides the TaskBoard layout. You can:

• Place a TaskBoard component on a separate empty page (or a separate new empty app), check if it behaves and expected, and compare with the other component instance.
• Send us an isolated runnable example for inspection.

Regards,
Dimo
Progress Telerik