Kanban New Task Event

[Sarah]

Hi,

What is the name of the event that is called after clicking on +? I want to show the dialog that I have designed myself after clicking + and not show the default syncfusion dialog.

[Kokila Poovendran]

Hi Sarah,

We have reviewed your query, and we understand that you want to show a custom dialog after clicking the "+" button in the Kanban control, instead of the default Syncfusion dialog. Based on your requirements, we have provided a code snippet below that you can use as a reference to implement this functionality:

<SfDialog @bind-Visible="@isDialogVisible" Width="400px">

    <DialogTemplates>

        <Content>

            <div>

                <label>Title:</label>

                <SfTextBox CssClass="e-field" @bind-Value="@newTaskTitle"/>

            </div>

            <div>

                <label>Summary:</label>

                <SfTextBox CssClass="e-field" @bind-Value="@newTaskSummary" />

            </div

            <div>

                <label>Status:</label>

                <SfTextBox CssClass="e-field" @bind-Value="@newTaskStatus" />

            </div>

            <div>

                <button class="e-btn" @onclick="AddNewTask">Add</button>

                <button class="e-btn"  @onclick="CloseDialog">Cancel</button>

            </div>

        </Content>

    </DialogTemplates>

</SfDialog>

 

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks" @ref="kanbanObj">

    <KanbanColumns>

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

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

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

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

    </KanbanColumns>

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

    <KanbanEvents TValue="TasksModel" DialogOpen="@DialogOpenHandler"></KanbanEvents>

</SfKanban>



  public void DialogOpenHandler(DialogOpenEventArgs<TasksModel> args)

  {

      newTaskStatus = args.Data.Status;

      args.Cancel = true;

      isDialogVisible = true;

  }

 

  private void AddNewTask()

  {

      // Create a new task

      var newTask = new TasksModel

          {

              Id = Guid.NewGuid().ToString(),

              Title = newTaskTitle,

              Status = newTaskStatus,

              Summary = newTaskSummary

          };

 

      kanbanObj.AddCardAsync(newTask);

 

      isDialogVisible = false;

 

      newTaskTitle = "";

      newTaskSummary = "";

  }

In this code snippet, we have used the DialogOpen event to handle the opening of the dialog and prevent the default Syncfusion dialog from showing. The AddNewTask method is responsible for adding a new task and closing the custom dialog.

Please note that there is a known issue related to the "DialogOpen event not triggering for the second time when the Cancel argument is set to true". We have acknowledged this as a bug, and a fix is expected to be included in our upcoming patch release at the end of December.

Now you can track the status of the reported issue through the feedback below,

Feedback Link:https://www.syncfusion.com/feedback/49034/dialogopen-event-itself-not-triggered-for-the-second-time-when-we-set-cancel

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

API references: 

AddCardAsync: 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_AddCardAsync__0_System_Int32_

DialogOpen:

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DialogOpen

Regards,
Kokila Poovendran.

Attachment: BlazorRTESample_1051981e.zip

[Sarah]

Hello,

Thank you for your reply.

How can I set the width of the columns? I used the link below and it doesn't work in Blazer.

https://www.syncfusion.com/forums/182709/how-to-set-the-fixed-width-to-each-column-like-300px

[Vinothkumar Yuvaraj]

Hi Sarah,

We have validated your reported query, and as we explained in the 182709 forum, the table layout for the Kanban Component has been implemented, and you can adjust the width of the Kanban column using the provided style. Specifically, the kanban width is set as a view port width, resulting in automatic column width adjustment. If you intend to decrease the column width, it is necessary to set the width of the entire Kanban using the width property.

Here's a code snippet illustrating how you can achieve this:

Code snippet:

<SfKanban @ref="kanbanObj" Width="600px">

</SfKanban>

<style>

   .e-kanban .e-kanban-table colgroup col{

       width: 150px !important;

    }

</style>

If the provided details do not fully address your requirements, we kindly request the following information to assist us in replicating and resolving your issue effectively:

• Could you please share the exact code used in your application?
• Alternatively, providing an issue-replicating sample would greatly aid us in understanding and resolving the matter promptly.

Your cooperation is essential in ensuring we provide the most accurate and tailored assistance.

Attachment: BlazorRTESample_8d4ddb1_b0aa070d.zip