Posted 31 August 2023, 12:23 am EST
I was trying to implement cell editing via an event(input field, drag and drop) on top of custom merging of cells. Is there a way to combine these two features?
Custom merging and cell editing by drag event
Posted by: yashpreetsingh8596 on 31 August 2023, 12:23 am EST
-
yashpreetsingh8596
-
anirudh.verma
Posted 31 August 2023, 5:53 pm EST
Hi,
As per my understanding, your requirement is to change the value of one cell by dragging and dropping another cell value in it. Also, this operation is required to be performed when the cell that is required to be edited is not in the edit mode.
Please confirm if this is your requirement or not. Also, if this is not your requirement or If I have missed something in understanding the requirement then kindly share the requirements in detail.
Thank you.
Regards,
Anirudh -
yashpreetsingh8596
Posted 1 September 2023, 4:53 pm EST
Just to be more clear. Im trying to drag and drop a div element in cell. As a cell is also a div element, so dragging and dropping a div(with some content) in cell should be possible. But along with this functionality, i also need custom merging functionality, where cells with same names or content merge to form a single cell.
Summing it up, first i want to custom merge cells with same name to make one cell. Then drag and drop elements into the cells, thereby populating or editing the values of cells. -
yashpreetsingh8596
Posted 1 September 2023, 4:53 pm EST
Just tl br more clear. Im trying to drag and drop a div element in cell. As a cell is also a div element, so dragging and dropping a div with some value in cell should be possible. But along with this functionality, i also need custom merging functionality, where cells with same names or content merge to form a single cell.
Summing it up, first i want to custom merge cells with same name to make one cell. Then drag and drop elements into the cells. -
anirudh.verma
Posted 3 September 2023, 3:46 pm EST
Hi,
Thank you for explaining the use case. You can modify the merge behavior for FlexGrid by overwriting the getMergedRange() method of FlexGrid. To drag and drop a div into the cell you need to handle the dragover and drop event on the hostElement of the grid. Also, to make the source div draggable please set the draggable attribute to true and handle the dragstart event for the source div.
Please refer to this sample for reference: https://jscodemine.grapecity.com/share/mVQQTT6Am0O9_dqqPw1sGw/
Regards,
Anirudh -
yashpreetsingh8596
Posted 3 September 2023, 5:22 pm EST
Hi,
Thank you for the solution. But there are some points that were missed. Lemme iterate the whole scenario again.- I want to custom merge the cells on the basis of their names. Like it is given in custom merging demo. Then once we have our desired structure of cells.
- We know that a cell is a div. Like this. Cell1. But when i drag and drop an element. This cell should contain a nested a div, like this - <dic class
-
yashpreetsingh8596
Posted 3 September 2023, 5:26 pm EST - Updated 3 September 2023, 5:32 pm EST
Hi,
Thank you for the solution. But there are some points that were missed. Lemme iterate the whole scenario again.
I want to custom merge the cells. Like it is given in custom merging demo. Then once we have our desired structure of cells.
We know that a cell is a div. Like this.<div wjcell></div>. But when i drag and drop an element. This cell should contain a nested div, like this -
<div >class=wjcell> <div>Cell content A<div></div>
Since i need multiple such drag and drop divs, im using copyArray method of cdk drag and drop library in angular.
So if its possible can you implement it using angular -
yashpreetsingh8596
Posted 3 September 2023, 5:34 pm EST
Hi
Apologies for multiple queries, please consider the last one above. I was having some troubles while typing the divs, hence i replied multiple times while figuring out and cant find any option to delete these queries. So please consider the last query. Thanks
-
anirudh.verma
Posted 4 September 2023, 5:36 pm EST
Hi,
I have updated the sample as per the requirements. To move the whole div into the cell div please set the isContentHtml property of Column class to true. This will allow to render the HTML stored in a cell. When a div is dropped then you need to copy the outerHTML of the div into that cell.
Please refer to this sample for reference: https://jscodemine.grapecity.com/share/lcnWAHL45kK7q30fmZOphg/
I am currently in the process of making this sample using the cdk drag-and-drop library and will let you know when it is completed and the feasibility of the solution.
Regards,
Anirudh -
yashpreetsingh8596
Posted 4 September 2023, 7:51 pm EST
Hi Anirudh,
This is brilliant. Drag and drop is working fine. But there is one point you missed. Lets suppose there are 10 cells occupied by content named “news”. So these 10 cells combine to make 1 cell. But when i drag and drop, “Cell content A” on top of news. Not just one cell(“news”) out of 10. But all 10 cells of news must get replaced with “Cell content A”
This is the functionality that i want.And if possible, is there a way to change the content(news, sport, kid zone" ) from front end. Like i just want the flexibility of merging cells on UI.
Like if i could do it on click by selecting some cells and when i click on a button these cells would merge.Regards,
Yashpreet Singh -
yashpreetsingh8596
Posted 4 September 2023, 10:19 pm EST
And just noticed one more thing. I dont want cell merging on the basis of dropped content(Cell content A etc). Merging should only be on the basis of what data is held in the cell(news, sports etc). There should be no merging of cells on the basis of dropped content
-
yashpreetsingh8596
Posted 5 September 2023, 12:34 am EST - Updated 5 September 2023, 12:39 am EST
I will explain it in better way -
Lets suppose initially we have this grid as shown in first pic -Now we want to merge these cells by selecting cells and clicking on a merge button or by any other event as shown in 2nd image -
3rd step - Now in these merged cells, i want to drag and drop divs as shown in below picture
So this is my use case.
-
anirudh.verma
Posted 5 September 2023, 5:53 pm EST
Hi,
Thank you for providing a detailed explanation. I have updated the previous sample as per the current requirement. To customize a merging behavior please override the MergeManger class and define a custom functionality for getMergedRange(). You can then simply pass the object of this custom class to the mergeManger property of the FlexGrid.
Please refer to this sample for reference: https://jscodemine.grapecity.com/share/yy4CFkEaTESqJWhK1imv3w/
Regards,
Anirudh -
yashpreetsingh8596
Posted 5 September 2023, 9:06 pm EST
Hi Anirudh,
This is exactly what i wanted. Thank you. Now, the only issue is that im encountering some errors while making it work on angular 16. Can you please make it compatible with angular 16.
I have one wijmo zip file of custom merging which is compatible for angular 16, made by one of you guys. And, this was the version which was compatible for it,
."@grapecity/wijmo.angular2.all": "5.20231.892-rc",This was one of the demo for wijmo angular 16 attached below-
file-4de24276-eca4-4a24-813b-78b612dabe1c (2).zipEventually i want it to be run on angular 16. I have attached above zip just for your help.
Regards,
Yashpreet Singh -
sonu.pandey
Posted 6 September 2023, 5:07 pm EST
Hi Yashpreet,
Here you go: FlexGrid_Updated_Sample.zip
I have added the shared code by Anirudh to your Angular16 sample. It has a few typescript issues which I have updated. Please let us know in case you still face any issues.
Regards
-
yashpreetsingh8596
Posted 9 September 2023, 4:59 pm EST
Thanks a lot. This has been really helpful. I will let you know if i need anything else. For now, i would say this library is amazing.
Thanks -
anirudh.verma
Posted 10 September 2023, 2:07 pm EST
Hi Yashpreet,
We are glad that we were able to help you. In case of further queries please let us know.
Regards,
Anirudh
