Hoping for a suggestion on nesting sortable lists

GLARDEN commented 3 months ago

First of let me say THANK YOU SO MUCH FOR THIS CONTROL! I have learned so much from looking at the code! I was doing this with pure razor events and CSS but it was not nearly as responsive. This method functions much better! So thank you again!

I have this structure and got it working no trouble at all by changing the div tag to the tbody to use on my table.

There is a row that contains a custom nested table component with a unique name from the outer Sortable List component. When I try to sort the rows in the nested table it triggers the events on the parent table. Is there a way to stop the events from bubbling to the outer Sortable List component?

My Structure:

<table>
   <thead>
           <th></th>
          <th>Column 1</th>
          <th>Column 2</th>
 </thead>
 <SortableList Id="parentTable" Handle=".drag-handle" Items="_items" OnUpdate="@SortStatements" Context="item">
     <SortableItemTemplate>
          <tr>
              <td class="has-cursor-grab">
                        <div class="drag-handle"> <i class="fa-solid fa-up-down"></i> </div>
              </td>
             <td>Row 1</td>
             <td>Row 2</td>
          </tr>
          <tr>
              <td class="has-cursor-grab">
                        <div class="drag-handle"> <i class="fa-solid fa-up-down"></i> </div>
              </td>
              <td>Row 1</td>
              <td>Row 2</td>
          </tr>
           <tr>
                 <td class="has-cursor-grab">
                        <div class="drag-handle"> <i class="fa-solid fa-up-down"></i> </div>
                 </td>
                  <td colspan="2">  
                        <nestedTableComponent>
                                <!-- 
                                      This component is a table as well with a SortableList component rendering the table body. 
                                       The nested tables SortableList component has an id of "nestedTable"
                                 -->
                        </nestedTableComponent>
                   </td>
           </tr>
     </SortableItemTemplate>
</SortableList>
</table>

GLARDEN commented 3 months ago

Looks like sortable.js has a nested table example. So I should be able to port that to this component. I will post an update when I get it working!

kinetiq commented 2 months ago

@GLARDEN Curious if you ever got this working? I need nested sort just like you.

AlexNek commented 2 months ago

Try the develop branch, please. Is it what you want?

GLARDEN commented 1 month ago

@AlexNek Apologies for taking so long to reply! I had more pressing features to implement before I could revisit this. I looked at the nested list. Yes that is exactly what I need! I actually don't need move rows in & out of the child table. I just need to be able to sort child tables!

I am going to start on this again.

Thank you so much for the awesome work!!

AlexNek commented 1 month ago

Thank you for notifying me. Then I will close this issue. oops, this is not my repo :)

GLARDEN commented 1 month ago

Thank you for notifying me. Then I will close this issue. oops, this is not my repo :)

Ah right, sorry! Well thanks for pointing me to the dev branch :)

AlexNek commented 1 month ago

Well thanks for pointing me to the dev branch

At this time master and develop branches are the same. It was for beta version.

the-urlist / BlazorSortable

Hoping for a suggestion on nesting sortable lists #7