1. Home
  2. Forum
  3. Blazor
  4. Can Customize the Kanban Dialog Editing ?

Can Customize the Kanban Dialog Editing ?

Hi Support,


Can I Customize the Kanban Dialog Editing ?Refer follow Sample ,Can I trigger custom event to operate the real CRUD for database record ?


Best Regards!

Jacky





13 Replies 1 reply marked as answer
VJ Vinitha Jeyakumar Syncfusion Team August 29, 2022 06:51 AM UTC

Hi Jacky,


Query 1. "Can I Customize the Kanban Dialog Editing"

Your requirement to customize the Kanban dialog editing can be achieved by the ssing the dialog template, you can render your own form fields with dialog by using the Template.

Code snippet: 
<SfKanban @ref="KanbanRef" KeyField="Status" DataSource="Tasks">
      <KanbanDialogSettings>
        <Template>
            @{
                TasksModel data = (TasksModel)context;
                <table>
                    <tbody>
                        <tr>
                            <td class="e-label">ID</td>
                            <td>
                                <SfTextBox CssClass="e-field" Value="@data.Id" Enabled="false"></SfTextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="e-label">Status</td>
                            <td>
                                <SfDropDownList @ref="StatusRef" TValue="string" TItem="DropDownModel" CssClass="e-field" DataSource="@StatusData" Value="@data.Status">
                                    <DropDownListFieldSettings Text="Value" Value="Value"></DropDownListFieldSettings>
                                </SfDropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td class="e-label">Assignee</td>
                            <td>
                                <SfDropDownList @ref="AssigneeRef" TValue="string" TItem="DropDownModel" CssClass="e-field" DataSource="@AssigneeData" Value="@data.Assignee">
                                    <DropDownListFieldSettings Text="Value" Value="Value"></DropDownListFieldSettings>
                                </SfDropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td class="e-label">Summary</td>
                            <td>
                                <SfTextBox @ref="SummaryRef" CssClass="e-field" Multiline="true" @bind-Value="@data.Summary"></SfTextBox>
                            </td>
                        </tr>
                    </tbody>
                </table>
            }
        </Template>
    </KanbanDialogSettings>
</SfKanban>


Documentation: https://blazor.syncfusion.com/documentation/kanban/dialog#dialog-template

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/KanbanServer1156735942

Query 2. "Can I trigger custom event to operate the real CRUD for database record ?"


The modified card data can be persisted in the database using the RESTful web services. All the CRUD operations in the Kanban are done through SfDataManager. The SfDataManager has an option to bind all the CRUD related data on the server-side.

The below documentation covers how to get the edited data details on the server-side using the UrlAdaptor.

Documentation: https://blazor.syncfusion.com/documentation/kanban/dialog#url-adaptor

Regards,
Vinitha



JA Jacky August 29, 2022 07:58 AM UTC

Hi  Vinitha,


Thank you for quickly response, I will refer to the implementation.


Best Regards!

Jacky


VJ Vinitha Jeyakumar Syncfusion Team August 30, 2022 05:06 AM UTC

Hi Jacky,


We are glad to assist you.

Regards,
Vinitha

JA Jacky September 3, 2022 03:54 AM UTC

Hi  Vinitha ,

Thank you for your information.

I refered the Query 2.  Document link Official GitHub Sample : https://github.com/SyncfusionExamples/blazor-kanban-crud-url-adaptor

However the result shown below after running the Offical GitHub sample, as you can see there is no data display (review below image 1 )

Therefore, I tried to use your on-line example link (below image 2) to run the test, but you can see the result is not the same of image 1.  ( please review below image 3)   

Is there something different on your on-line example link ? Is the function or program of your on-line exmple is differnt from your Official GitHub Codes ?

Thank you and waiting for your prompt reply


Best Regards!

Jacky


Image 1



Image 2


Image 3: 



VJ Vinitha Jeyakumar Syncfusion Team September 5, 2022 11:17 AM UTC

Hi Jacky,


We have prepared a sample as per your requirement to use CRUD operations with Kanban control. we have also referred and used the GitHub sample,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/blazor-kanban-crud-url-adaptor1753301505

Please change the file path in the orderContext.cs file and delete the NORTHWIND_log.ldf file from the App_Data folder, before running the sample to avoid exceptions. 

Regards,
Vinitha

JA Jacky September 7, 2022 08:36 AM UTC

Hi  Vinitha,


Thank your Sample.

I use follows step :

  1. upgrade to .NET 6.0 and Syncfusion.Blazor 20.2.0.48
  2. Change the MDF path.
  3. Delete the NORTHWND_log.ldf
  4. Rebuild the Project ok.

Run the project, disply the Kanban data is ok, but the Add , Update seems not work .


Please kindly help  and waiting for your prompt reply


Best Regards!

Jacky





VJ Vinitha Jeyakumar Syncfusion Team September 8, 2022 09:34 AM UTC

Hi Jacky,


We have tried to replicate the reported issue using the sample we have shared in the last update. but unfortunately, we didn't face any issues while adding, deleting, and updating the card. we have also prepared a video illustration for your reference,

Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video_Crud-1889077687

Can you please share us with the exact issue replication steps along with the issue reproducing sample or modify the sample attached in previous update with the issue reproducing code.

Regards,
Vinitha

JA Jacky September 8, 2022 02:36 PM UTC

Hi Vinitha,


I found upgrade to .NET 6.0 and Syncfusion.Blazor 20.2.0.48 and EntityFrameworkCore 6.0.8.

the sample just only read data, other function not work.


Attach my project Sample and include my video.


Best Regards!

Jacky



Attachment: blazorkanbancrudurladaptor_e29b420c.zip

VJ Vinitha Jeyakumar Syncfusion Team September 9, 2022 09:23 AM UTC

Hi Jacky,


Your reported issue in the shared sample can be resolved by adding script and style sheet reference in the host.cshtml file.

Code snippet:
<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />
<script  src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"  type="text/javascript"></script>

Modified Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/blazorkanbancrudurladaptor_e29b420c-2076236646

Documentation: https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio#add-style-sheet

Regards,
Vinitha

JA Jacky September 9, 2022 10:23 AM UTC

Hi Vinitha,


It's worked, thank for your help.


Bset Regards!

Jacky


BS Buvana Sathasivam Syncfusion Team September 13, 2022 04:02 AM UTC

Hi Jacky,


We are glad your problem has been resolved. Please let us know if you need any further assistance.


Regards,

Buvana S


SZ Szoke March 18, 2023 09:29 PM UTC

And is it possible to change the caption of the dialog header?


kanban.png





VY Vinothkumar Yuvaraj Syncfusion Team March 20, 2023 12:21 PM UTC

Hi Jacky,


Yes, it is possible to change the caption of the dialog header in Syncfusion Blazor components by using localization based on culture. We suggest referring to the following documentation and image that provide detailed information on how to achieve this.


Resources/SfResources.en-US.resx



Documentation : https://blazor.syncfusion.com/documentation/common/localization#blazor-server-app-1


We hope this resolves your concern. Please let us know if you have any further questions or concerns. 


Regards,

Vinothkumar


Attachment: Localizationwithdynamicculture_a31390b3_334afeeb_152b5f54.zip

Marked as answer
Loader.
Up arrow icon