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

[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

[Craig]

Reactivating this item. Some of the REPL links are not working or missing. Overview and Editing demos both do not load in REPL. The State demo does not include any link to REPL.

The first two also do not include all model definitions, etc. so I can't manually copy the code to a REPL. Some of the other demos do have models defined in their source.

But also we are finally to the point of adding editing to our cards. The comment above said the edit card should overlay the Taskboard columns. But in the demos most of the time the edit card pushes the columns instead of overlaying. The Editing demo does overlay but most of the others squash the columns. Can you clarify? I'm seeing it push the columns in my local example and am trying to figure out why.

[Craig]

OK so I noticed when the edit card shows you are adding a margin-left or margin-right to the k-taskboard-content div. In our scenario we are using Start position and it always pushes the columns to the right. I added the below and it now overlays

margin-left: 0 !important;
margin-right: 0 !important;

IMO this needs some clarification in the docs. What is expected behavior, or why some demos overlay vs. push, etc.

[Dimo]

Hi Craig,

You are right about the REPL links and the TaskBoard edit behavior, sorry about these oversights. While we fix them, you can download our MSI installer or ZIP archive from the Downloads page and run the demo site locally.

[Dimo]

P.S. It may be a matter of personal opinion, but the TaskBoard edit pane does not overlay columns. What happens is:

• If there is enough horizontal space, the edit pane displays next to the columns ("push")
• If there is not enough space, the column container shrinks and becomes scrollable ("push").

When a container shrinks and becomes scrollable, browsers display keep its "start" side visible by default. This leads to the different user perception when PanePosition is Start and End.

[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; }
    }
}