DataTable¶

//make at least one record required
fd.spRendered(function(){
    fd.control('Control1').addValidator({
        name: 'Control1 validator',
        error: 'Enter at least one record into the table',
        validate: function(value) {
            //change this number to make more records required
            if (value.length < 1) {
                return false;
            }

            return true;
        }
    });
});

fd.spRendered(function() {
    //select the DataTable control to prepopulate
    var dt = fd.control('Control1');

    //specify information for rows using columns' Name property
    var dtRows = [
        {Product: "Forms for SharePoint Online", Price: 599, Subscription: true, Date: new Date()},
        {Product: "Charts for Office365", Price: 399, Subscription: false, Date: new Date()}
    ];

    //assign rows to DataTable
    dt.value = dtRows;
});

fd.spRendered(function() {
  //select the DataTable control to automatically prepopulate new rows
  var dt = fd.control('Control1');

  dt.widget.bind('beforeEdit', function(e) {
     var model = e.model;
     if (model.isNew()) {
           model.set('Name', 'John Smith');
           model.set('Email', '[email protected]');
     }
  });
});

fd.spRendered(function() {
    fd.control('Control1').$on('edit', function(e) {
        console.log(e)
        if (e.column.field === "Column1") {
            //pass widget + current column value
            console.log(e.model);
            populateColumn(e.widget, e.model.Column1);
        }
    })

});

function populateColumn(widget, value) {

    widget.setDataSource({
        data: ['Category A', 'Category B', 'Category C']
    });

    //set value if one was select
    widget.value(value);
}

//we store prices in JS object
var merch = {};
//use bracket notation to accurately copy dropdown values
merch['Baseball cap'] = 9.99;
merch['T-shirt'] = 19.99;
merch['Key chain'] = 4.99;

fd.spRendered(function(){
    //set unit price column (2nd column) to be non-editable, as we set it with code
    fd.control('Control1').columns[1].editable = function(){return false};
    fd.control('Control1').$on('change', function(value) {
        var modifiedValue = null;
        if(value) {
            for (var i = 0; i < value.length; i++) {
                if (value[i].UnitPrice !== merch[value[i].Product]) {
                    if (!modifiedValue) {
                        modifiedValue = Object.assign({}, value);
                    }
                    modifiedValue[i].UnitPrice = merch[value[i].Product];
                }
            }
        }
        if (modifiedValue) {
            fd.control('Control1').value = value;
            fd.control('Control1').widget.refresh();
        }
    });
});

fd.spRendered(function() {
    //Disable OrderTotal field
    fd.field('OrderTotal').disabled = true;
    //Make LineTotal column noneditable
    fd.control('Control1').columns[3].editable = function(){return false};
    fd.control('Control1').$on('change', function(value) {
        //variable to count Order Total
        var orderTotal = 0.0;
        //if there are records in the table
        var modifiedValue = null;
        if(value){
            //go through each one by one
            for (var i = 0; i < value.length; i++){
                //if this record has Amount and UnitPrice
                if(value[i].Amount && value[i].UnitPrice){
                    //set LineTotal to their product
                    var cost = value[i].Amount * value[i].UnitPrice;
                    if (value[i].LineTotal !== cost) {
                        if (!modifiedValue) {
                            modifiedValue = Object.assign({}, value);
                        }
                        modifiedValue[i].LineTotal = cost;
                    }
                }
                //add Total to the Order Total
                orderTotal += parseFloat(value[i].LineTotal);
                console.log(orderTotal);
            }
        }
        //here we refresh the table
        if (modifiedValue) {
            fd.control('Control1').value = value;
            fd.control('Control1').widget.refresh();
        }
        //we set Order Total field to sum of Totals
        fd.field('OrderTotal').value = orderTotal;
    });
});

fd.spRendered(function() {
    //select the DataTable control to add new column to
    var dt = fd.control('Control1');
    var columns = dt.widget.options.columns;
    var customRowDataItem = null;
    var isCustomAdd = false;

    //specify what the column will be like
    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);
        }
    });
});