Blazor Table toggle to Tr data-target not working properly

[bulutkartal]

My regular bootstrap table which works fine;

<div class="table-responsive">
<table class="table table-striped table-bordered table-responsive table-condensed">
<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
</thead>
<tbody>
  <tr  data-toggle="collapse" data-target="#Id1" class="clickable">
   <td>1.1</td>
    <td>2.1</td>
    <td>3.1</td>
  </tr>
  <tr  class="collapse" id="Id1">
   <td>1.1</td>
    <td>2.1</td>
    <td>3.1</td>
  </tr>
  <tr  data-toggle="collapse" data-target="#Id2" class="clickable">
   <td>1.2</td>
    <td>2.2</td>
    <td>3.2</td>
  </tr>
  <tr  class="collapse" id="Id2">
   <td>1.2</td>
    <td>2.2</td>
    <td>3.2</td>
  </tr>
</tbody>
</table>
</div>

When I add it to blazor I changed it as follow;

<div class="table-responsive">
<table class="table table-striped table-bordered table-responsive table-condensed">
<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
</thead>
<tbody>
  <tr  data-toggle="collapse" data-target="#@berth.Id" class="clickable" @onclick="ToggleTableTr">
   <td>1.1</td>
    <td>2.1</td>
    <td>3.1</td>
  </tr>
  <tr  class="@NavMenuCssClass" id="Id1">
   <td>1.1</td>
    <td>2.1</td>
    <td>3.1</td>
  </tr>
  <tr  data-toggle="collapse" data-target="#Id2" class="clickable">
   <td>1.2</td>
    <td>2.2</td>
    <td>3.2</td>
  </tr>
  <tr  class="collapse" id="Id2">
   <td>1.2</td>
    <td>2.2</td>
    <td>3.2</td>
  </tr>
</tbody>
</table>
</div>
@code {

    bool collapseNavMenu = true;

    string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    void ToggleTableTr()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

When I click on tr it opens all the all rows instead of targeting the clicked one. data-target is not working.

[javiercn]

@bulutkartal thanks for contacting us.

Could you provide a minimal repro project so that we can help you with your issue?

[bulutkartal]

I created a fiddle

when you click on first table's first row it also opens the second table's first row as well. Even the Ids and data-target values are different.

Same code works perfectly out of blazor. Here is jsfiddle example

[bulutkartal]

I made it work by using JSInterop.

window.ToggleJsFunctions = { elementId: function (eId) { var element = document.getElementById(eId); element.classList.toggle("collapse"); } };

[mkArtakMSFT]

@ajaybhargavb can you please look what needs to happen here? Thanks!

[Andrzej-W]

In click handler function ToggleTableTr you are changing collapseNavMenu variable. This variable is then used to return CSS class name in NavMenuCssClass function. Return value from this function is used to render two table rows Id1 and Id3. That is the reason why both rows are hidden or visible and that is correct behaviour.

Unfortunately your program works incorrectly. Try to click on row 1 and then on row 3 and you will see what I mean. You cannot use Blazor and jQuery at the same time to change the same class name in the same html element.

[bulutkartal]

I agree it works incorrectly because blazor cannot find the dom element. data-target is not working properly. In bootstrap example they also have the same class name which is "collapse" as well. But handles it based on data-target.

[Andrzej-W]

You have to understand that data attributes and some class names are used by Bootstrap to implement its functionality and Blazor has no knowledge how Bootstrap or any other JS library works. If you want to use Bootstrap in Blazor you should probably only use css file and remove jquery.js and bootstrap.js completely. Then you have to reimplement some logic from bootstrap.js in C#. Unfortunately it is not a trivial task and befere you start doing it yourself you should check BlazorStrap project (https://github.com/chanan/BlazorStrap) or something similar.

I think that this issue can be closed because in my opinion it is not related to any bug in Blazor.

[ghost]

Thank you for contacting us. Due to no activity on this issue we're closing it in an effort to keep our backlog clean. If you believe there is a concern related to the ASP.NET Core framework, which hasn't been addressed yet, please file a new issue.