Kanban edit dialog does not have header template

[desmond]

The blazor kanban edit dialog is missing header template, content template and footer template like other components do. I just want to add the Bootstrap 4 attachment e-icon at the top right of the edit dialog, and let it act as a button that can open an attach file dialog. If the feature really does not exist, can I request a JS code or whatever to do that?

[Ajithkumar Gopalakrishnan]

Hi Desmond,

Greetings from Syncfusion Support,

Based on your query, we understand that you would like to customize the header, content, and footer of the Kanban edit dialog. Currently, the Kanban component does not provide support for header and footer templates. However, it does support a content template, which can be used to customize the dialog fields.

To achieve your requirement:

• You can use the content template to add and customize input fields within the dialog
• Additionally, by using JavaScript interop, you can inject custom elements (such as an attachment icon) into the dialog header area

<SfKanban @ref="kanbanRef" KeyField="Status" DataSource="tasks">

    …

   <KanbanEvents TValue="TasksModel" DialogOpen="OnDialogOpen"></KanbanEvents>

    <KanbanDialogSettings>

        <Template>

            @{

                TasksModel data = (TasksModel)context;

                <div style="position: relative;">

                    <table>

                        <tbody>

                            <tr>

                                <td class="e-label">Attach File</td>

                                <!-- Hidden file input -->

                                <td><input type="file" @onchange="HandleFileAttach" /></td>

                            </tr>

                            …

                       </tbody>

                    </table>

                </div>

            }

        </Template>

    </KanbanDialogSettings>

</SfKanban>

[Inject] IJSRuntime JS { get; set; }

async Task OnDialogOpen(DialogOpenEventArgs<TasksModel> args)

{

    await JS.InvokeVoidAsync("addAttachIcon");

}

[JSInvokable]

public static Task ReceiveFile(string fileName, string base64Data)

{

     Console.WriteLine($"File received: {fileName}");

 

     // remove base64 prefix

     var base64 = base64Data.Split(',')[1];

 

     byte[] fileBytes = Convert.FromBase64String(base64);

 

     // ✅ now file is available

 

     return Task.CompletedTask;

}

Sample link: Attached as zip file.



For more details, please refer to the following User Guide documentation:

https://blazor.syncfusion.com/documentation/kanban/dialog#creating-a-custom-dialog-template

Please let us know if you need any further assistance.

Regards,
Ajithkumar G

Attachment: App_75093643.zip

[desmond]

The only problem left is I added on your code and now have this code in Kanboard.cshtml's script section:

        var GLOBAL = {};

        GLOBAL.DotNetReference = null;

        GLOBAL.SetDotnetReference = function (pDotNetReference) {

            GLOBAL.DotNetReference = pDotNetReference;

        };

and Kanboard.razor:

    protected override void OnInitialized()

    {

        var lDotNetReference = DotNetObjectReference.Create(this);

        JS.InvokeVoidAsync("GLOBAL.SetDotnetReference", lDotNetReference);

    }

so that I can replace DotNet.invokeMethodAsync with:

                        GLOBAL.DotNetReference.invokeMethodAsync(

                            'FunctionName',

                            var2,

                            var3,

                            var4

                        );

Am I right to create a reference of the whole kanban object, or should I pass the reference of the child object of the kanboard, or more accurately the dialog object, everytime DialogOpenHandler fires? Both seems to work, but I think good habit matters.

[Dhinesh Govindharaji]

Hi Desmond,

Thank you for the update.

Based on your query, we understand that you would like to know which of the two approaches is the recommended practice, even though both are working in your application. We would recommend creating and maintaining a single DotNetObjectReference for the parent Kanban component/page instance (for example, your Kanboard.razor component) rather than creating a new reference each time the dialog is opened.

If the JavaScript callback methods (such as FunctionName) are implemented within the Kanboard.razor component, creating the reference once and storing it globally is a valid and preferred approach:

protected override void OnInitialized() {

    var lDotNetReference = DotNetObjectReference.Create(this);

    JS.InvokeVoidAsync("GLOBAL.SetDotnetReference", lDotNetReference);

}

This approach offers the following benefits:

• Avoids creating multiple DotNetObjectReference instances whenever the dialog opens.
• Provides a centralized point for JavaScript-to-.NET communication.
• Reduces unnecessary object creation and improves maintainability.
• Aligns with common Blazor JS interop best practices when the callback methods belong to the parent component.
  
  

Therefore, for your scenario, maintaining a single reference to the parent Kanban component is the recommended approach rather than passing a child dialog reference during every DialogOpen event.

Please let us know if you need any further assistance.

Regards,

Dhinesh G