DataTable - copy row

Forms Public Forms
1

I have a DataTable on a public form. When the user clicks, 'Add new record' I would like to copy the value from a column in the previous row and insert it into the same column for the new row. The column involved is a Dropdown type.

I also would like to make this behavior optional based on the value of a Single Choice field (e.g., choice options are "copy previous value" or "do NOT copy previous value).

2

Dear @donald.kantik ,
If I understand correctly, you want something like this:

JSWuuIQCHB
JSWuuIQCHB1249×807 696 KB

This can be achieved with the following JavaScript code:

fd.rendered(function() {
    var dt = fd.control('DataTable1');
    var isNew = false;
    dt.widget.wrapper.find('.k-grid-add').on('click', e => {
        isNew = true;
    });
    dt.widget.bind('edit', function(e) {
        if (isNew && fd.field('Copy').value == 'Copy row') {
            isNew = false;
            e.model.set('Dropdown', fd.control('DataTable1').value[1].Dropdown);
        }
    });
});

You just need to replace DataTable1 with the name of your DataTable, Copy with the name of your dropdown field and Copy row with the value which is used for copying. Finally, replace Dropdown used twice in one line with the name of the column to copy.

Now, if you want something even more advanced, it's also possible to add a button to each row, which will allow copying this specific row, essentially creating an exact duplicate.

3

Nikita,

Yes, that is basically what I wanted except I am copying the values for both Column1 and Column2. Your solution works but only if I make Column1 NOT required - otherwise I get an error.

Thanks,
Don

4

Dear @donald.kantik,
Okay, I see, will try to rectify it! What about something like this? - Form Preview

This will add a duplicate button to each row instead. Try the following code to make this work:

fd.rendered(function() {
    var dt = fd.control('DataTable1');
    var columns = dt.widget.options.columns;
    var customRowDataItem = null;
    var isCustomAdd = false;
    columns.push({
        command: {
            text: "Copy row",
            iconClass:"k-icon k-i-copy",
            click: function(e) {
                e.preventDefault();
                customRowDataItem = this.dataItem($(e.currentTarget).closest("tr"));
                isCustomAdd = true;
                this.addRow();
            }
        }
    });
    dt.widget.setOptions({
        columns: columns
    });
    dt.widget.bind('edit', function(e) {
        if (isCustomAdd && e.model.isNew()) {
            isCustomAdd = false;
            for (var i = 0; i < columns.length; i++) {
                var field = columns[i].field;
                if (field) {
                    e.model.set(field, customRowDataItem[field]);
                }
            }
            e.sender.closeCell(e.container);
        }
    });
});
5

Hello,

Can I hide the text of the button "Copy row"? Only the icon is fine for me :wink:

Thanky you,

Daniël

6

Dear @danieljr,
It does need some text, at least an empty space, but you can add a custom CSS class:

fd.rendered(function() {
    var dt = fd.control('DataTable1');
    var columns = dt.widget.options.columns;
    var customRowDataItem = null;
    var isCustomAdd = false;
    columns.push({
        command: {
            text: ' ',
            iconClass:"k-icon k-i-copy no-margin",
            click: function(e) {
                e.preventDefault();
                customRowDataItem = this.dataItem($(e.currentTarget).closest("tr"));
                isCustomAdd = true;
                this.addRow();
            }
        }
    });
    dt.widget.setOptions({
        columns: columns
    });
    dt.widget.bind('edit', function(e) {
        if (isCustomAdd && e.model.isNew()) {
            isCustomAdd = false;
            for (var i = 0; i < columns.length; i++) {
                var field = columns[i].field;
                if (field) {
                    e.model.set(field, customRowDataItem[field]);
                }
            }
            e.sender.closeCell(e.container);
        }
    });
});

And use it with CSS code in Theme settings > Custom CSS to center the icon:

.no-margin{
    margin: 0!important;
}
7

Works fine! thanks :+1:

8

I found a problem (same text is confusing for the datatable)

My solution: also added "name"

//Manueal sort - specify what the column will be like
columns.push({
    command: {
        name: "moveUp",
        text: " ",
        iconClass:"k-icon k-i-sort-asc-sm no-margin", 
        click: function(e) {
            e.preventDefault();
            var selectedItem = $(e.currentTarget).closest("tr");
            var selectedUid = selectedItem.attr("data-uid");
            var itemIndex = selectedItem.index();
            var dataItem = grid.dataItem(selectedItem);

            var newIndex = itemIndex - 1;
            var content = $(".k-grid-content");
            var offset = selectedItem.offset().top;

            if (newIndex <= 0) {
              newIndex = 0;
            }

            grid.dataSource.remove(dataItem);
            grid.dataSource.insert(newIndex, dataItem);

            grid.select("[data-uid=" + selectedUid +"]");
        }
    }
});
columns.push({
    command: {
        name: "moveDown",
        text: " ",
        iconClass:"k-icon k-i-sort-desc-sm no-margin",
        click: function(e) {
            e.preventDefault();
            var selectedItem = $(e.currentTarget).closest("tr");
            var selectedUid = selectedItem.attr("data-uid");
            var itemIndex = selectedItem.index();
            var dataItem = grid.dataItem(selectedItem);

            var newIndex = itemIndex + 1;
            var content = $(".k-grid-content");

            var offset = selectedItem.offset().top;

            if (newIndex < grid.dataSource.view().length) {
              grid.dataSource.remove(dataItem);
              grid.dataSource.insert(newIndex, dataItem);

              grid.select("[data-uid=" + selectedUid +"]");
            }
        }
    }
});
dt.widget.setOptions({
    columns: columns
});
1 Like
9

Hello @Nikita_Kurguzov,

I am trying to use this code to duplicate a row in a data table. However, I am getting an error "TypeError: Cannot read properties of undefined (reading 'isFieldEditable')" after I click the "Copy row" button. The result is a blank row with only the "Copy row" button, but no data.

I have all of the code in spRendered.

I believe the error is with the assignment to customRowDataItem as it either shows undefined (without the this.dataItem) or null (the full line of code).

I have window.fd = fd;
defined in my code.

What am I missing to get this to work?

Thanks, Rhonda

10

Dear @rhonda,
Just tested the code, still works as intended. Are you sure you're using Data Table and not List or Library control instead? You can try removing all the code that's not relevant to the issue, to see if something else is causing the problem.

If nothing helps, please, export the form and send it to us to analyze.

11

Hi @Nikita_Kurguzov,

I got this to work.

Here is my situation: I have a Parent form that has a list/library control to a child list. The Child Form contains a list/library control to its child list.

If my user selects one of the records on the Parent form to Duplicate a row in the child list, I also need to duplicate the records in the Child Form's child list/library. In other words, I need to duplicate two levels of children from the Parent form. Do you have any examples of duplication of multiple lists that are in a hierarchy when the top list is selected for duplication?

I have been banging my head on this one for a while now.

Thanks, Rhonda

12

Dear Rhonda,
Not for two layers, only for one - Add duplicate button to the toolbar of List or Library — Plumsail SharePoint Forms Documentation

And here's my video on it - https://youtu.be/gErlXVH3sC8?si=ma3qOmV-Vg3kKlBf&t=2349

Theoretically, it's possible to do the copying for two levels, but you'll have to get both children, and children of children in your requests, so it would require more code.

We can help you get started with it, understand the code sample and what you can do to customize it, but to write a complete code for that might require paid support from our dev team, and if that sounds okay you can contact us with this request at support@plumsail.com