Hi,
I want to copy a row into a new row when the user click a button placed on each row in a "copy button column" of a WebHierarchicalDataGrid. The grid has a depth of 2 bands, and I want to be able to copy any of the child band into a new row at the bottom of the band. How can I do that?
I've looked many workaround and now I'm using clipboard to copy/paste the row, but I am unable because I cannot select the last row of the band (how may I do that?) and I have to set the unique ID of the added line (I don't know how, I know I have to remember the unique ID).
Thanks!
I precise I add a row at the bottom of the band. Some more détails about actual code:
Grid in .aspx:
<ig:WebHierarchicalDataGrid ID="whdg" runat="server" AutoGenerateBands="False" AutoGenerateColumns="False" DataKeyFields="ref_ADC_id" Height="600px" InitialDataBindDepth="-1" Key="Niv1" Width="95%" StyleSetName="Default">
<ClientEvents Click="whdg_ContainerGrid_Click" />
<Columns>
<ig:BoundDataField DataFieldName="ref_ADC_id" Key="ref_ADC_id" Hidden="true" Width="65px" />
<ig:BoundDataField CssClass="Cell_Right_Niv2" DataFieldName="code" Key="code" Width="25px">
<Header CssClass="Entete_Right" Text="Ordre" />
</ig:BoundDataField>
... (other BoundDataFields)
<ig:BoundDataField CssClass="Cell_Right_Niv2" DataFieldName="quantite" Key="quantite" Width="50px">
<Header CssClass="Entete_Right" Text="Quantité" />
</Columns>
<Behaviors>
<ig:Selection CellClickAction="Row" Enabled="true" RowSelectType="Single" />
<ig:Activation>
</ig:Activation>
<ig:EditingCore>
<EditingClientEvents RowAdding="Grid_RowAdding" />
<ig:CellEditing/>
<ig:RowEditing/>
<ig:RowDeleting>
</ig:RowDeleting>
</Behaviors>
</ig:EditingCore>
<ig:Clipboard/>
<ig:RowSelectors>
</ig:RowSelectors>
<Bands>
<ig:Band AutoGenerateColumns="false" DataKeyFields="heureID" DataMember="Niv2" Key="Niv2" ShowHeader="true">
<ig:BoundDataField DataFieldName="heureID" Key="heureID" Hidden="true" Width="65px" />
... (other BoundDataFields)<ig:TemplateDataField CssClass="Cell_Center" Key="Copy" Width="20px">
<Header CssClass="Entete_Center" Text="" />
<ItemTemplate>
<asp:Image ID="imgCopy" ToolTip="Copier" runat="server" ImageUrl="img/Copier.png" CssClass="imgClickYes" />
</ItemTemplate>
</ig:TemplateDataField>
<ig:TemplateDataField CssClass="Cell_Center" Key="Delete" Width="20px">
<asp:Image ID="imgDelete" ToolTip="Supprimer" runat="server" ImageUrl="img/Supprimer.png" CssClass="imgClickYes" OnClientClick="DeleteRow(); return false;" />
<ig:BoundCheckBoxField CssClass="Cell_Center" DataFieldName="isLivrable" Key="isLivrable" Width="50px" />
<ig:EditingCore Enabled="true" EnableInheritance="true" AutoCRUD="false" BatchUpdating="True">
<ig:CellEditing Enabled="true" EditModeActions-EnableF2="true" EnableInheritance="true" EditCellCssClass="Cell_LeftBlueEnabled">
<ColumnSettings>
<ig:EditingColumnSetting ColumnKey="code" ReadOnly="false" />
<ig:EditingColumnSetting ColumnKey="nom" ReadOnly="false" />
</ColumnSettings>
<EditModeActions EnableOnKeyPress="True" MouseClick="Double" />
</ig:CellEditing>
<ig:RowAdding AddNewRowCssClass="Cell_LeftBlueEnabled" EditCellCssClass="Cell_LeftBlueEnabled" EnableInheritance="True">
<AddNewRowClientEvents EnteringEditMode="Grid_RowAdding_EnteringEditMode" />
<EditModeActions EnableOnKeyPress="True" />
</ig:RowAdding>
<ig:RowDeleting ButtonHtml="Delete" ShowDeleteButton="false">
<ig:RowSelectors RowNumbering="True" Enabled="true">
</ig:Band>
</Bands>
</ig:WebHierarchicalDataGrid>
The function that handles to Copy button click event - note that delete button seems to work:
function whdg_ContainerGrid_Click(sender, eventArgs) {
if (eventArgs.get_type() == "cell") {
var columnKey = eventArgs.get_item().get_column().get_key()
switch (columnKey) {
case "Delete":
var grid = sender;
var gridRows = sender.get_rows();
var row = eventArgs.get_item().get_row();
var selectedRows = grid.get_behaviors().get_selection().get_selectedRows();
for (var i = selectedRows.get_length() - 1; i >= 0; i--) {
var row = selectedRows.getItem(i);
gridRows.remove(row);
}
break;
case "Copy":
var rowsLength = grid.get_rows().get_length();
var row = new Array(myRowUniqueID);
var selectedRows = grid.get_behaviors().get_selection().get_selectedRows()
var clip = sender.get_behaviors().getBehaviorByName('Clipboard');
clip.copy();
sender.get_rows().add(row);
clip.paste(); //manque juste á coller dans la bonne row
Hello Rino,
That would really work in IE only as Chrome and Mozilla do not let you using the clipboard. I've looked over the Internet for a workaround but that's the way it is really.
You can surely see the following sample that we build for copy-pasting entire rows - http://www.infragistics.com/samples/aspnet/data-grid/clipboard.
Thank you for your reply.
I've been able to copy and paste in a new row by iterating each row's cell text, putting it in an array and and add a new row passing the array as parameter. But I have two columns showing an asp image (one for copying the row, another one to delete the row) that I want to be shown in the added row. Instead of seeing the images, i see the HTML code for the image in the cell. I do a trim in the array indexes for the button so it should be added correctly and showed correctly in the cell, but they are not. I took a look at the client-side dynamically generated html page and it appears to me the image name is not sent to the browser by the server but the image maybe be dynamically sent to the browser (as data?), so I decided not to show the image in the added row. I am right? Here's my code for all this (sorry for a few french in it) :
Copy and Delete columns html in the WebHierarchicalDataGrid:
<ig:TemplateDataField CssClass="Cell_Center" Key="Copy" Width="20px">
<!--I know the function DeleteRow() above is not called, but that's ok, I found a new workaround-->
Code to copy/paste a row in a new row:
var grid = $find("MainContent_whdg");
var parentGrid = grid.get_gridView();
if (parentGrid != null) {
var selectedRow = grid.get_gridView().get_behaviors().get_selection().get_selectedRowsResolved()[0];
var rowCellTextAsArray = [];
var columnQty = grid.get_gridView().get_columns().get_length() + 2; // +2 parce qu'il y a 2 colonnes affichées en plus des colonnes visibles
for (var i = 0; i <= columnQty ; i++) {
rowCellTextAsArray.push(selectedRow.get_cell(i).get_text());
var parentRow = selectedRow.get_grid().get_parentRow();
var rowIslands = parentRow.get_rowIslands();
var prochainCode = 0;
for (i = 0; i < rowIslands.length ; i++) {
var retour = getNextNumericValForView(rowIslands[i], CODE_COLUMN_KEY);
if (retour > prochainCode) {
prochainCode = retour;
rowCellTextAsArray[CODE_COLUMN_INDEX] = prochainCode; //Line number
rowCellTextAsArray[HEUREID_COLUMN_INDEX] = prochainCode; //Unique ID (same as line number for now)
rowCellTextAsArray[BTNCOPY_COLUMN_INDEX] = rowCellTextAsArray[BTNCOPY_COLUMN_INDEX].trim(); //Trim of Copy image shown in the cell of Copy column
rowCellTextAsArray[BTNDELETE_COLUMN_INDEX] = rowCellTextAsArray[BTNDELETE_COLUMN_INDEX].trim(); //Trim of Delete image shown in the cell of Delete column
sender.get_rows().add(rowCellTextAsArray);
Hi Rino,
Is this image the same for every row? If it is, then you won't have an issue knowing its name.
If it's really dynamic, you can make one more hidden column and put the respective image name for the row there.
Yes it is the same image for each row. I don't know how I could handle it because it is the same image.
As I said, I don't go into the idea of copying the images into new rows, but your suggestions could be good ideas! Thank you very much.