Forums Home / Wijmo / General Discussion
Posted by: jubin.jacob on 9 December 2019, 4:56 am EST
jubin.jacob
Posted 9 December 2019, 4:56 am EST
We are using angular2 extension of wijmo.
All the cells are having object values - no primitives. Now we have to implement copy/paste of cells and rows.
Will the default copy/paste feature, by using [autoClipboard] do any help here?
Can you provide an example.
ashwin.saxena
Posted 9 December 2019, 4:42 pm EST
Hi Jubin,
Yes, the normal copy/pasting will work even in the case in which cells are bound to objects instead of primitive values. While copying or pasting the data in the FlexGrid, it uses the actual values stored in the cells instead of the data that it is bounded to. You may refer to the sample below for a demonstration:
https://stackblitz.com/edit/angular-3hjsjf
Let me know if this was your requirement.
Regards,
Ashwin
jubin.jacob
Posted 9 December 2019, 5:16 pm EST
Hi Ashwin,
Thanks for the reply.
The example is different from what I was looking for.
Here with binding, you are binding a primitive to cell.
But in my case its an object assigned to cell and with use of formatters we are formatting the content and showing.
So on copy/paste, this object should be copied to the next cell.
ashwin.saxena
Posted 10 December 2019, 4:01 pm EST
Hi Jubin,
I think I understand your use case properly. But still, could you confirm whether you wish to copy/paste only the data displayed in the cell or the whole object which is bound to the cell?
~regards
pratik.darak
Posted 10 December 2019, 5:41 pm EST
Hi Ashwin,
We want to paste the whole object in the bound cell.
ashwin.saxena
Posted 11 December 2019, 3:11 pm EST
Hi Pratik,
I have created a sample for you using the copying and pasting event of the FlexGrid:
https://stackblitz.com/edit/angular-ggcsf1
If you will copy any cell and paste it to the same grid, the whole data bound to the cell will be pasted.
Let me know if this works for you.
~regards
kishore.k
Posted 5 February 2020, 3:40 pm EST
Hi Ashwin,
Here we are using wijmo provided ‘copying’ and ‘pasting’ events and also we are using ‘lostFocus’ event from wijmo which clears all cell selection (grid.select(-1, -1).
Here the problem is when i copy the cell everything works fine but when i do pasting, ‘lostFocus’ event triggered before ‘pasting’ event which is setting ‘row’ and ‘column’ index to -1.
Can you please help me out how can i prevent lostFocus while pasting?
Thanks,
Kishore
ashwin.saxena
Posted 6 February 2020, 5:39 pm EST
Hi Kishore,
The data is not being pasted because of how Wijmo pastes the data. When we press the paste shortcut keys, Wijmo creates an element, moves the focus to it and paste the data. When Wijmo moves the focus to textarea, the lostFocus event of the FlexGrid is fired thereby calling the select method.
Therefore, in the pasting event, the row and columns indexes come to be -1 and -1. To resolve this issue, simply call the select method in a setTimeout callback:
onLostFocus(s) {
setTimeout(() => s.select(-1, -1), 100);
}
https://stackblitz.com/edit/angular-ea8svy
~regards
kishore.k
Posted 10 February 2020, 5:12 pm EST
Hi Ashwin,
Thanks for your response…Is there is any other way to identify the click event outside wijmo grid table (empty area).
My requirement is upon clicking on blank area whatever cells has been selected should be unselected. Kindly let me know if there is any wijmo provided event for that.
Thanks,
Kishore
ashwin.saxena
Posted 11 February 2020, 2:56 pm EST
Hi,
You may handle the mousedown event on the hostElement of the FlexGrid and if use the hitTest method to check where the mouse is clicked in the FlexGrid and select the cell accordingly. Please refer to the updated sample below:
https://stackblitz.com/edit/angular-xwu1mq
~regards
cdennington
Posted 14 February 2024, 1:01 pm EST
In the above example: https://stackblitz.com/edit/angular-xwu1mq
If I double click any of the cells to edit them I see the text
[object Object]This is obviously because the HTML input is loading the object into the value rather than the value we want within that object.
How can we pass the correct value to the edit? Whilst maintaining copay and paste ability?
sonu.pandey
Posted 14 February 2024, 4:33 pm EST
Hello,
Based on our understanding, you want the copy/paste behavior in your shared sample to be the same while getting displayed values in the edit mode of a cell. If this is the case, you can update the binding values of the columns accordingly. For instance, in the provided sample, the binding value for the “Country” column should be binding=“data.country”, and for the “Sales” column, it should be binding=“amounts.sales”. Making these adjustments should resolve the issue.
Sample link: https://stackblitz.com/edit/angular-35kirp?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
Regards
cdennington
Posted 20 February 2024, 5:12 pm EST
If I am using FlexSheet, how would I bind data in the same way?
sonu.pandey
Posted 21 February 2024, 5:26 pm EST
Hello,
In the case of FlexSheet, you can create a grid with the desired columns’ bindings, which will be used to generate a Sheet for the FlexSheet. Please refer to the code snippet and sample link below demonstrating the same:
var grid = new wjcGrid.FlexGrid(document.createElement('div'), {
autoGenerateColumns: false,
columns: this.columnsArr,
itemsSource: this.source,
});
var sheet = new wjcSheet.Sheet(flex, grid);
//push created sheet into FlexSheet
flex.sheets.push(sheet);Sample link: https://stackblitz.com/edit/angular-8um598?file=src%2Fapp%2Fapp.component.ts
Regards
