DataTable Component and Blazor

JoeConaty

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hello All,

I found this great post for making a DataTable Component in Blazor. This works great. Unfortunately the sDom settings I have are somehow removing my Blazor events. Namely a click Event. Has anyone every experienced this? I'm guessing it has to do with either and instance or a refresh. I appreciate any help. Here is my example:

I'm using the DataTable Component example described here: https://datatables.net/forums/discussion/60598/working-with-datatable-and-blazor-server-side

My JavaScript has the following setting (When I comment this it works, but I lose my filter etc.)

sDom: '<"row view-filter"<"col-sm-12"<"float-left"l><"float-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',`

In my component I have the following:

 <DataTable id="tblJournalEntries" class="data-table responsive nowrap dataTable no-footer dtr-inline" style="width: 100%;"
         data-order="[[ 2, &quot;desc&quot; ]]">
     <thead>
     <tr>
         <th>Entry</th>
         <th>Author</th>
         <th>Date</th>
         <th class="empty">&nbsp;</th>
     </tr>
     </thead>
     <tbody>
     @foreach (var entry in journal.JournalEntries)
     {
         <tr>
             <td>
                 <p class="list-item-heading">
                         <a class="list-item-heading mb-0 w-40 w-xs-100 h-link" href=" javascript:;" @onclick="() => showEntryDetail(entry)" @onclick:preventDefault>
                             @entry.EntryHeader
                         </a>
                 </p>
             </td>
             <td>
                     <p class="mb-0 text-muted ">@entry.EntryBy</p>
             </td>
             <td>
                 <p class="mb-0 text-muted ">@entry.EntryDate.ToShortDateString()</p>
             </td>
             <td></td>
         </tr>
     }
     </tbody>
 </DataTable>

Server Side Code in Component:

protected override async Task OnAfterRenderAsync(bool firstRender)
 {
     // await base.OnAfterRenderAsync(firstRender);

     if (firstRender)
     {

         JournalDetailModule = new(await JS.InvokeAsync<IJSObjectReference>("import", "./Pages/JournalDetails.razor.js"));         
         await JournalDetailModule.Value.InvokeVoidAsync("init");

     }
 }

 private void showEntryDetail(JournalEntry entry)
 {
     entryDetail = entry.Entry;
     entryTitle = entry.EntryHeader;
     entryBy = entry.EntryBy;
     entryDate = entry.EntryDate.ToShortDateString();
     withMe = (entry.WithMe.HasValue? entry.WithMe.Value : false);
 }

This code works when I use a regular html table.

Edited by Allan - Syntax highlighting and general markdown formatting. Details on how to highlight code using markdown can be found in this guide.

allan

I've no idea why setting dom would effect the Blazer events. If you link to a test case showing the issue I might be able to identify something, but I'm really surprised by that.

Allan

JoeConaty

Hi @allan ,
I am too. I just tested it on another grid with simple redirects from HREF's and the datatable component kills them. I'm not sure how to build a test case as Im new to this forum, but will try and whip something up.

JoeConaty

Update: its not due to setting the dom. Its for any Razor event. Once I use the datatable component everything dies.