I am developing a custom extension for Azure DevOps work item. I'm building the extension in React using the azure-devops-ui package. I need to have a table as a part of this extension where I would be able to drag and drop the rows, so as to reorder them. The order is important for my usecase. The documentation says that drag and drop is supported, but doesn't have any further details. I would like to know if there is any property on the Table component that I could use. Screenshot
4
-
1I was able to get this done. Will provide more updates when I have the code available to share.Saleel Ali– Saleel Ali2020-07-30 07:09:52 +00:00Commented Jul 30, 2020 at 7:09
-
1Glad to know you've found the answer to this issue? You could consider adding it as answer so that members with similar issue in this forum can benefit from that!LoLance– LoLance2020-07-31 08:56:02 +00:00Commented Jul 31, 2020 at 8:56
-
2Sure. I thought of raising a PR to the azure-devops-extension-samples repo. But I think I can add an answer for now and then update it later.Saleel Ali– Saleel Ali2020-07-31 09:23:11 +00:00Commented Jul 31, 2020 at 9:23
-
2So @SaleelAli can you add and answer?Karel Kral– Karel Kral2020-10-12 13:45:23 +00:00Commented Oct 12, 2020 at 13:45
Add a comment
|
2 Answers
Here's how you can do it. Fill in the place holders as needed and omit any property that may not be needed for your case. I hope this should be enough to get anyone started.
Credit to John Wilkes who helped me find the solution.
import { BoltListDragEvent, IListDropData, ListDragDropBehavior, ListDragImage} from "azure-devops-ui/List";
import { DragAndDropGripper, Table } from "azure-devops-ui/Table";
const onDragEnd = (event: BoltListDragEvent<HTMLElement, ILocationTableItem>) => {
console.log("Dragged from " + event.detail.dataTransfer.secondaryData.index + " - (" + event.detail.dataTransfer.dropEffect + ")");
};
const onDrop = (event: BoltListDragEvent<HTMLElement, ILocationTableItem>, dropData: IListDropData) => {
console.log("Dropped at " + dropData.index);
};
const dragDropBehavior = new ListDragDropBehavior<IMyTableItem>({
allowedTypes: ["MyType"],
id: "myTableId",
onDragEnd: onDragEnd,
onDrop: onDrop,
renderDragImage: event => <ListDragImage text={event.detail.dataTransfer.data.myProperty} />,
type: "MyType"
});
function renderGripper(index: number, left: boolean) {
if (left) {
return <DragAndDropGripper />;
}
return null;
}
<Table
behaviors={[dragDropBehavior]}
columns={myColumns}
itemProvider={myTableItemProvider}
onActivate={(event, data) => console.log("Activate Row - " + data.index)}
renderSpacer={renderGripper}
/>
Comments
@SaleelAli, you never actually posted the answer. It would greatly help the community if you can post your findings on this. Thanks
