Add buttons to each row for a DataTable control

Forms SharePoint Online
1

I have a DataTable control on a form and the rows are dynamically populated. I need to add two buttons or icons "MoveUp" and "MoveDown" to each row. Is it possible? How can I do it?

2

Dear @cathy,
Please, try the following:

fd.rendered(function() {
    //select DataTable control to add new column to
    var dt = fd.control('DataTable1');
    var grid = dt.widget;
    var columns = grid.options.columns;

    //specify what the column will be like
    columns.push({
        command: {
            text: "Move up",
            iconClass:"k-icon k-i-sort-asc-sm",
            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: {
            text: "Move down",
            iconClass:"k-icon k-i-sort-desc-sm",
            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
    });
});
3

It works like a charm! Many thanks for your help!!!