Hello Support.
Im trying to make 2 grids where i can drag and drop between the two, which i can, however im trying to prevent som default behaviour.
I would like to decide myself if the rows are being added or simply updating already exsisting values in the list.
Using the events OnRowDragStart and RowDropped.
and
Issues:
1 - In OnRowDragStart the boolean args.Cancel = true, does not prevent the drag event from happening, it does nothing.
2 - OnRowDropped the Items from args.data are already in the list, so my question is "In which method/event is the items appendend to the List given to datasource?
Hi Daniel,
Greetings from Syncfusion support.
Query 1: “OnRowDragStart the boolean args.Cancel = true, does not prevent the drag event”
We checked your query by given codes ,It is not possible to cancel In RowDragstart event and it can be canceled in RowDropped Event only. It is our default behavior
Query 2 : “In which method/event is the items appended to the List given to datasource”
We checked your query and we would like to inform that, If the two grids datasource are of same type, data will be inserted to second grid datasource in the source level. If you have any further query then kindly share the below details to validate further at our end.
The above-requested details will be helpful for us to validate the reported query at our end and provide the solution as early as possible.
Regards,
Naveen Palanivel
Razor Page:
<divclass="row">
<SfDateRangePickerAllowEdit="false"TValue="DateTime?"@bind-StartDate="StartValue"@bind-EndDate="EndValue"Placeholder="Choose a range"ShowClearButton="true">
<DateRangePickerEvents
TValue="DateTime?"
ValueChange="OnDPValueChange"
Cleared="OnDPCancel">
</DateRangePickerEvents>
</SfDateRangePicker>
</div>
<divclass="container-fluid control-section row">
<divclass="col-lg-5">
<h4>Current Assets</h4>
<SfGrid@ref=DialogCurrentGridID="current"DataSource="DialogCurrentAssets"AllowRowDragAndDrop="true"AllowSelection="true"AllowPaging="true"AllowSorting="true">
<SfToolbar>
<ToolbarItems>
<ToolbarItemType="ItemType.Input"Align="ItemAlign.Right">
<Template>
<ImmidaiteSeachBoxTItem=PermittedAssetsDto></ImmidaiteSeachBox>
</Template>
</ToolbarItem>
</ToolbarItems>
</SfToolbar>
<GridSelectionSettingsType="Syncfusion.Blazor.Grids.SelectionType.Multiple">
</GridSelectionSettings>
<GridPageSettingsPageSize="_pageSize"></GridPageSettings>
<GridRowDropSettingsTargetID="allAssets"></GridRowDropSettings>
<GridEventsTValue="PermittedAssetsDto"RowDataBound="RowBound"></GridEvents>
<GridColumns>
<GridColumnField=@nameof(PermittedAssetsDto.Id)IsPrimaryKey="true"HeaderText="Asset Id"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
<GridColumnField=@nameof(PermittedAssetsDto.Name)HeaderText="Asset Name"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
<GridColumnField=@nameof(PermittedAssetsDto.Identifier)HeaderText="Asset Identifier"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
<GridColumnField=@nameof(PermittedAssetsDto.Serial)HeaderText="Asset Serial"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
<GridColumnField=@nameof(PermittedAssetsDto.ValidFrom)HeaderText="Valid From"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
<GridColumnField=@nameof(PermittedAssetsDto.ValidTo)HeaderText="Valid To"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
<GridColumnField=@nameof(PermittedAssetsDto.CreatedAt)HeaderText="Created At"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
<GridColumnField=@nameof(PermittedAssetsDto.CreatedBy)HeaderText="Created By"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
</GridColumns>
</SfGrid>
</div>
<divclass="col-lg-2"style="display: flex; justify-content: center; align-items: center;">
<SfIconName="IconName.Replace"Size="IconSize.Large"></SfIcon>
</div>
<divclass="col-lg-5">
<h4>Applicable Assets</h4>
<SfGridID="allAssets"DataSource="ApplicableAssets"AllowRowDragAndDrop="true"AllowSelection="true"AllowPaging="true"AllowSorting="true">
<SfToolbar>
<ToolbarItems>
<ToolbarItemType="ItemType.Input"Align="ItemAlign.Right">
<Template>
<ImmidaiteSeachBoxTItem=PermittedAssetsDto></ImmidaiteSeachBox>
</Template>
</ToolbarItem>
</ToolbarItems>
</SfToolbar>
<GridEventsTValue="PermittedAssetsDto"RowDropped="DroppingOnCurrentAssets"OnRowDragStart="OnRowDragStart"></GridEvents>
<GridSelectionSettingsType="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>
<GridPageSettingsPageSize="_pageSize"></GridPageSettings>
<GridRowDropSettingsTargetID="current"></GridRowDropSettings>
<GridColumns>
<GridColumnField=@nameof(PermittedAssetsDto.Id)HeaderText="Id"IsPrimaryKey="true"TextAlign="TextAlign.Right"></GridColumn>
<GridColumnField=@nameof(PermittedAssetsDto.Name)HeaderText="Name"TextAlign="TextAlign.Right"></GridColumn>
<GridColumnField=@nameof(PermittedAssetsDto.Identifier)HeaderText="Identifier"TextAlign="TextAlign.Right"></GridColumn>
<GridColumnField=@nameof(PermittedAssetsDto.Serial)HeaderText="Serial"TextAlign="TextAlign.Right"></GridColumn>
</GridColumns>
</SfGrid>
</div>
</div>
Cs:
publicpartialclassAsset2Companies : ComponentBase
{
[Inject]
IDataService_dataService { get; set; }
publicDateTime? StartValue { get; set; } = null;
publicDateTime? EndValue { get; set; } = null;
SfGrid<PermittedAssetsDto> DialogCurrentGrid { get; set; }
publicList<PermittedAssetsDto> DialogCurrentAssets = newList<PermittedAssetsDto>();
publicList<PermittedAssetsDto> ApplicableAssets = newList<PermittedAssetsDto>();
publicasyncTaskOnDPValueChange(RangePickerEventArgs<DateTime?> args)
{
IEnumerable<PermittedAssetsDto> res;
if (StartValueisnull)
{
res = await_dataService.GetPermittedAssets((int)DialogCompany.Id, CompanyPermissionSelected[(int)DialogCompany.Id]);
DialogCurrentAssets = res.ToList();
return;
}
res = await_dataService.GetPermittedAssetsWithTimeValidation((int)DialogCompany.Id, CompanyPermissionSelected[(int)DialogCompany.Id], (DateTime)StartValue, (DateTime)EndValue);
DialogCurrentAssets = res.ToList();
}
publicasyncTaskOnDPCancel(ClearedEventArgsargs)
{
StartValue = null;
EndValue = null;
}
publicasyncTaskDroppingOnCurrentAssets(RowDragEventArgs<PermittedAssetsDto> args)
{
//Items are already in the list at this point so adding them will create duplicates and is redundant, i want to manipulate them before they are added.
foreach (PermittedAssetsDtoiteminargs.Data)
{
if (DialogCurrentAssets.Contains(item))
{
item.ValidFrom = StartValue;
item.ValidTo = EndValue;
item.CreatedBy = "UI User";
item.ColourSetting = "Updated";
UpdatedRows.Add(item);
}
else
{
item.ColourSetting = "Added";
AddedRows.Add(item);
}
}
awaitDialogCurrentGrid.Refresh();
}
publicasyncTaskOnRowDragStart(RowDragEventArgs<PermittedAssetsDto> args)
{
if (args.Data[0].ValidFromisnull)
{
args.Cancel = true;
//Print error
return;
}
//If DateTime is set, set values
foreach (PermittedAssetsDtoiteminargs.Data)
{
item.ValidFrom = StartValue;
item.ValidTo = EndValue;
item.CreatedBy = "UI User";
}
}
}(This code is all in a dialog so removed all none related code).
As the code shows im trying to have a datepicker, and two Grids with the same Type.
I want to drag items from the last grid into the first grid (Grid with id = "AllAssets to Grid with id= "Current"), Whenever the user start dragging i want to make sure that a datetime is assigned, if it isnt it should cancle the event and tell the user immdiatly that the action they are trying to do, is not allowed untill a DateRange have been picked,
If a DateRange is picked the user is eligible to drag and drop, however before the rows/items are added to
DialogCurrentAssets(datasource of grid with id ="Current")
i want to assign the values StartValue to ValidFrom and EndValue to ValidTo.
Im
unsure what you mean by source level as im new to syncfusion, can you
clarify how i access this, or how i can implement the above mentioned
functionality.
Hi Daniel,
Sorry for the inconvenience.
We are currently Validating the reported query at our end and we will update the further details within two days(Oct 11, 2022). Until then we appreciate your patience.
Regards,
Naveen.
Hi Daniel,
We have confirmed this as an issue and logged the defect report “ Drag and Drop RowDragEventArgs” for the same. Thank you for taking time to report this issue and helping us to improve our product. At Syncfusion, we are committed to fix all validated defects (subject to technological feasibility and Product Development Life Cycle) and this fix will be included in our upcoming patch release which is expected to be rolled out on or before 09th Nov , 2022.
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.
https://www.syncfusion.com/feedback/38456/drag-and-drop-rowdrageventargs
Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization”
Until then we appreciate your patience.
Regards,
Naveen Palanivel
That's just great, thank you Naveen.
However im still curious about my second question,
Where your answer was
"If the two grids datasource are of same type, data will be
inserted to second grid datasource in the source level."
Im a little unsure as to what this means, one would imagine it is through the
SfDataManager class, with an overriden insert method, however this doesnt seem to do anything.
Could you maybe provide an example where you have two grids, drag and drop to another grid, but before inserting the data just manipulating a simple string or something.
Or maybe a more detailed answer as too how i can obtain this functionality.
Best regards
Daniel
Hi Daniel,
sorry for the inconvenience and delay
We have analyzed your query and currently, we are validating your Query at our
end. Further details will be updated on or before 3rd November
2022.
Until then we appreciate your patience.
Regards,
Naveen
Hi Daniel,
We prepared a sample when we drag the row and drop to another grid based on your requirements, but you want to change the drop data in another grid. We attached the sample and snippet code for your reference.
|
public async Task RowDropHandler(RowDragEventArgs<Order> args) { await Grid.DeleteRecordAsync("OrderID", args.Data[0]);
await Grid.AddRecordAsync(new Order() { OrderID = 1, CustomerID = "Customer", ShipCity = "gcvhgd", OrderDate = DateTime.Now }); |
Please let us know if you have any concerns.
Regards,
Naveen Palanivel
Thank you Naveen.
Thats exactly what i wanted.
Best regards,
Daniel
Hi Daniel,
Thanks for the update.
We are glad to hear that you have achieved your requirement using our solution.
Kindly get back to us if you have further queries.
Regards,
Vignesh Natarajan
Hi Daniel,
We are glad to announce that our Essential Studio 2022 Volume 4 Release v20.4.0.38 is rolled out and is available for download under the following link and we have included fix for the issue “Not able to cancel the drop operation when performing drag and drop between two grids” in our volume 4 release (20.4.0.38).
We would like to inform that, we included the new event RowDropping. By using this event we can able to use cancel operation When performing drag and drop between two grids. Please refer the below documentation link for more information
Documentation - https://blazor.syncfusion.com/documentation/datagrid/events#rowdropping
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.
Regards,
Naveen