Allow row drag only from the drag column, instead of the whole row, cells and detail template.

[Istvan Piroska]

The given feature worked as expected in the earlier versions, maybe 26.x

I recently updated to 29.x, since I experience this behavior.

Please suggest a solution, because the Grid became useless in this form.

[Prathap Senthil]

Hi Istvan Piroska,

Based on your requirement, you want to allow row dragging only from a specific column, rather than from the entire row. Before we proceed with a suitable solution, we kindly request a few additional details from your end:

• Could you please let us know which features are currently enabled on the Grid?
• Kindly share the complete Grid code snippet along with the associated model class.
• Could you please confirm whether the JavaScript solution works for you or not?

Providing these details will greatly help us validate the reported requirement and offer you an accurate solution as soon as possible.

Regards,
Prathap Senthil

[Istvan Piroska]

Dear Prathap,

I appreciate your answer.

I understand your request, but to keep it simple, please show me a solution using the Grid from the demo site.
Here, I can experience and replicate the same behavior for the selected rows.
As soon as a row is selected (highlighted as gray), it can be dragged by any column.

Blazor DataGrid Drag and Drop within Grid Example - Syncfusion Demos

In my case, the row selection is not needed. I prefer to disable it completely.

I didn't expect that it could be related, but please show me a solution to disable row selection.
Based on the documentation and demos, I couldn't find any proper way.

Blazor DataGrid Default Selection Example - Syncfusion Demos

Regards,

Istvan

[Prathap Senthil]

Based on your query, if you want to disable row selection, we suggest setting the AllowSelection property to false. However, the drag operation will still work when you drag a row cell. In this case, we recommend using the CSS customization below to allow row dragging only from the drag column, instead of the entire row cell. Kindly refer to the code snippet and sample below for your reference

 

<style>

    #Grid.e-grid .e-gridcontent .e-content .e-row .e-rowcell {

        pointer-events: none;

    }

</style>

Sample: https://blazorplayground.syncfusion.com/embed/rXBIjTByffSByenI?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Istvan Piroska]

The given css trick is not applicable because there are controls on the row that need to be accessed directly, like 

SfSwitches.

Please let me know if you have any other solution.

[Prathap Senthil]

Thanks for the update ,

Based on your requirement, we regret to inform you that it is currently not possible to achieve the functionality described in your scenario. Thank you for your understanding.

[Istvan Piroska]

I found this amazing breaking change in the release history

Version: 27.2.2

• #FB60658 - The RowDragAndDrop functionality has been enhanced to allow dragging a row from anywhere in the row inside the grid. Previously, row dragging was only supported using the drag icon in Within Grid.

For your information, it makes no sense.
Please add an option to be able to disable it by the user or limit the drag area to the selected columns.
Additionally, you may consider adding more control over the automatically injected drag column.
In this stage, it has no meaning, but it's impossible to remove or hide.

[Prathap Senthil]

Thank you for the update.

Yes, starting from version 27.2.2, we have enhanced the functionality to allow dragging a row from anywhere within the row. If you would like to enable interaction for a specific column, we recommend using the CSS customization below to achieve your requirement. Please refer to the following code snippet and sample for your reference.

<style>

    #Grid.e-grid .e-gridcontent .e-content .e-row .e-rowcell {

        pointer-events: none;

    }

 

        /* Re-enable pointer events only for this column's template cell */

        #Grid.e-grid .e-gridcontent .e-content .e-row .e-rowcell .allow-pointer {

            pointer-events: auto;

        }

</style>

Sample: https://blazorplayground.syncfusion.com/embed/VZBeDyLXfCvxMlCe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Ryan Tomko]

I think the update to "allow dragging a row from anywhere within the row" it not helpful, it actually gets in the way.  It would be better if the row dragging only worked from the left drag column with the drag dots icon.  

Can you add a property like "OnlyDragFromDragIcon" to the grid?   Or at least in the RowDragStarting event can you add a "Cancel" property to the args so that a drag being started can be cancelled if the column index is one of the real columns? 

My use case is that I have grid column templates and when dragging is enabled then i can't properly click and select text in the textbox because that starts a row drag which interferes and looks awful.  Also I see the user accidentally dragging rows when they mistakenly hold the left mouse button too long when the click into a box and slightly move the mouse.  It would be better to only allow dragging (to reorder grid rows specifically) from the drag icon.

 <SfGrid @ref=theGrid ID="quoteGrid" TValue="QuoteItem" DataSource="quote.Items" AllowRowDragAndDrop="true" AllowGrouping="false" AllowSorting=true>
     <GridEvents TValue="QuoteItem" RowDropped="OnItemDropped"></GridEvents>
     <GridColumns>
         <GridColumn Field=@nameof(QuoteItem.Id) Visible=false IsPrimaryKey=true />
         <GridColumn Field=@nameof(QuoteItem.QuoteRoomId) HeaderText="Room" Width="120px">
             <Template>
                 @{
                     var item = context as QuoteItem;
                     <SfDropDownList TItem="QuoteRoom" TValue="int" DataSource="quote.Rooms.Where(x => x.Alive)" @bind-Value="item.QuoteRoomId" AllowFiltering=false>
                         <DropDownListFieldSettings Text="Name" Value="Id" />
                         <DropDownListEvents TItem="QuoteRoom" TValue="int" OnValueSelect="(x) => AS.AutoSaveList<QuoteRoom>(x, item, sec.User)" />
                     </SfDropDownList>
                 }
             </Template>
         </GridColumn>

         <GridColumn Field=@nameof(QuoteItem.ItemCategoryId) HeaderText="Category" Width="180px">
             <Template>
                 @{
                     if (CategoryList != null) {
                         var item = context as QuoteItem;
                         <SfDropDownList TItem="ItemCategory" TValue="int" DataSource="CategoryList" @bind-Value=@((context as QuoteItem).ItemCategoryId) PopupWidth="250px">
                             <DropDownListFieldSettings Text="Category" Value="Id" />
                             <DropDownListEvents TItem="ItemCategory" TValue="int" OnValueSelect="(x)=>{item.Category = x.ItemData.Category; AS.AutoSaveList<ItemCategory>(x, item, sec.User); }"></DropDownListEvents>
                         </SfDropDownList>
                     }
                 }
             </Template>
         </GridColumn>
         <GridColumn Field=@nameof(QuoteItem.Description)>
             <Template>
                 @{
                     var item = context as QuoteItem;
                     <div class="d-flex">
                         <SfTextBox @bind-Value=item.Description ValueChange="async (x)=>await AS.AutoSaveText(x, quote, sec.User)" maxlength=@DB.GetColumnMaxLength(item.GetType().GetProperty(nameof(QuoteItem.Description))) />
                         <SfButton CssClass="w40" IconCss="e-icons e-edit" OnClick="async ()=> await WRUtils.EditString(item, nameof(QuoteItem.Description), sec.User, StringEditService)"></SfButton>
                     </div>
                 }
             </Template>
         </GridColumn>
etc

[Prathap Senthil]

Hi Rayn,

Based on the details you shared, you want to enable row dragging only. We would like to clarify that we currently do not support a property like OnlyDragFromDragIcon, and the cancel operation is also not supported in the RowDragStarting event. However, you can achieve your requirement through CSS customization. Kindly refer to the code snippet and sample provided below for your reference.

Code Snippet :

<SfGrid @ref="theGrid"

        ID="quoteGrid"

        TValue="QuoteItem"

        DataSource="@quote.Items"

        AllowRowDragAndDrop="true"

        AllowGrouping="false"

        AllowSorting="true"

        Height="420px">

    <GridEvents TValue="QuoteItem" RowDragStarting="RowDragStarting"

                RowDropped="OnItemDropped">

    </GridEvents>

 

    <GridColumns>

        <!-- Hidden Primary Key -->

        <GridColumn Field="@nameof(QuoteItem.Id)"

                    IsPrimaryKey="true"

                    Visible="false" />

       

        <!-- Room column with DropDownList -->

        <GridColumn Field="@nameof(QuoteItem.QuoteRoomId)"

                    HeaderText="Room"

                    Width="160">

            <Template>

                @{

                    var item = (context as QuoteItem)!;

                    var roomOptions = quote.Rooms.Where(r => r.Alive).ToList();

                }

                 <div class="allow-pointer">

                <SfDropDownList TItem="QuoteRoom"

                                TValue="int"

                                DataSource="@roomOptions"

                                @bind-Value="item.QuoteRoomId"

                                AllowFiltering="false"

                                Placeholder="Select room">

                    <DropDownListFieldSettings Text="Name" Value="Id" />

                  

                </SfDropDownList>

                </div>

            </Template>

        </GridColumn>

 

        <!-- Category column with DropDownList -->

        <GridColumn Field="@nameof(QuoteItem.ItemCategoryId)"

                    HeaderText="Category"

                    Width="220">

            <Template>

                @{

                    var item = (context as QuoteItem)!;

                }

                <div class="allow-pointer">

                    <SfDropDownList TItem="ItemCategory"

                                    TValue="int"

                                    DataSource="@CategoryList"

                                    @bind-Value="item.ItemCategoryId"

                                    PopupWidth="250px"

                                    Placeholder="Select category">

                        <DropDownListFieldSettings Text="Category" Value="Id" />

 

                    </SfDropDownList>

                </div>

   

            </Template>

        </GridColumn>

 

        <!-- Description column with TextBox + optional button -->

        <GridColumn Field="@nameof(QuoteItem.Description)"

                    HeaderText="Description"

                    Width="320">

            <Template>

                @{

                    var item = (context as QuoteItem)!;

                }

                <div class="allow-pointer" >

                     <div class="d-flex">

                    <SfTextBox @bind-Value="item.Description"

                               Placeholder="Type description"

                           >

                    

                    </SfTextBox>

 

                    <!-- Optional: an edit button (placeholder) -->

                    <SfButton CssClass="e-primary"

                              IconCss="e-icons e-edit"

                              Content="Edit"

                              OnClick="() => QuickEditDescription(item)">

                    </SfButton>

                    </div>

                </div>

            </Template>

        </GridColumn>

    </GridColumns>

</SfGrid>
<style>

    #quoteGrid.e-grid .e-gridcontent .e-content .e-row .e-rowcell {

        pointer-events: none;

    }

 

        /* Re-enable pointer events only for this column's template cell */

        #quoteGrid.e-grid .e-gridcontent .e-content .e-row .e-rowcell .allow-pointer {

            pointer-events: auto;

        }

</style>

Screen recording : Check the attachment.

Sample: https://blazorplayground.syncfusion.com/embed/hDLHDAjyhmJlGaTW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,
Prathap Senthil

Attachment: Recording_griddragicon_f2b88d59.zip