Class MultiRecordCustomScripting

Deprecated

Use CSL.multiRecord.undoChanges instead. @deletion-target 5.0.0 Undo all changes currently made. This will remove added rows, restore deleted rows and set original value on the updated cells.

Sets the multi record view in the read only mode. A console message will be set if the view doesn't support inline editing. Or the view not in edit mode.

Triggers the delete function on the component for the given record.

// Delete the record with rowKey (primary key) '3'
CSL.multiRecord.deleteRecord('3');

// Delete the fifth row.
CSL.multiRecord.deleteRecord(5);

Deselects the given record(s).

// Deselects row with primary key '458'
CSL.multiRecord.deselect('458');
// Deselects the second row.
CSL.multiRecord.deselect(2);
// Deselects the first and the row with primary key 87.
CSL.multiRecord.deselect([1, '87']);

Deselects all the records.

CSL.multiRecord.deselectAll();

Triggers the export functionality of the component.

CSL.multiRecord.export();

Gets the value of a cell in a row. If you want to get the distinct values for a field in the current page, please use the getColumnValues method.

// Get the value of stock from the row with primary key '33'.
var stockValue = CSL.multiRecord.getCellValue('33', 'stock');

// Get the value of productName from the second row.
var productName = CSL.multiRecord.getCellValue(2, 'productName');

Gets the distinct values for a view field in the current page of a multi record view.

var stockValues = CSL.multiRecord.getColumnValues('stock');

Gets the data in the current page of the grid.

var pageData = CSL.multiRecord.getPageData();

Gets an object containing the selected items. The keys in the object are the unique keys for a record, the values are the row values that correspond to the row key.

var selectedItems = CSL.multiRecord.getSelectedItems();

Whether the inline editing has pending changes.

Whether the component is in inline edit mode.

Gets the current mode of the grid.

var gridMode = CSL.multiRecord.mode();

Sets the multi record view in the inline editing mode. A console message will be set if the view doesn't support inline editing. Or the view is already in edit mode.

Shows or hides the progress indicator on the multi record view.

// Starts progress
CSL.multiRecord.progress();

setTimeout(function() {
 // After 1.5s stop progress indication.
 CSL.multiRecord.progress(false);
}, 1500);

Sets the multi record view in the inline editing mode.

Ensures that a certain row is selected.

// Select the first row.
CSL.multiRecord.select(1);
// Select the row with primary key '87'
CSL.multiRecord.select('87');
// Select the second row and the row with primary key '33'
CSL.multiRecord.select([2, '33']);

Selects all the rows on the current page.

CSL.multiRecord.selectAll();

Sets the value for a cell.

CSL.multiRecord.setCellValue('1', 'stock', 1750);

Sets a condition on the styling of a field. This will execute the condition for each record in the set and apply the styles returned by the condition function. The condition will be checked when an interaction in the view is made. (loadComplete, value changed, refresh, ...). Because this is extra configuration on the view, the most logical place to call this function is in the configuration script.

// Set the productName and productDescription to a purple background and a white color.
CSL.multiRecord.setFieldStyling(
  {'background-color': 'purple', 'color': 'white'},
  ['productName', 'productDescription']
);

// Sets the color for the productId and productDescription columns based on the productActive column.
// If productActive = true, set the background to green with a white color. If false to red background. If the value
// is unkown, the background will be blue.
CSL.multiRecord.setFieldStyling((rowData) => {
  if (rowData.productActive === 'True') {
         // Object return example.
        return { 'background-color': 'green', color: 'white' };
   } else if (rowData.productActive === 'False') {
      // String return example.
     return 'background-color:red; color:black;';
} else {
  return 'background-color:blue; color:white'
  }
}, ['productId', 'productDescription']);

Sets a condition on the styling of a header. The condition will be checked when an interaction in the view is made. (loadComplete, value changed, refresh, ...). Because this is extra configuration on the view, the most logical place to call this function is in the configuration script.

CSL.multiRecord.setHeaderStyling((dataSet) => {
 // Find a record where productActive is 'False'.
 const inActive = dataSet.find(d => d.productActive === 'False');

 // Set background-color based on whether there’s a record with productActive set to 'False'.
 if (inActive) {
     return 'background:#FF8977';
 } else {
     return { 'background-color': '#C3FFA6' };
 }
}, ['productActive']);

Sets the styling of a group row. The condition will be checked when an interaction in the view is made. (loadComplete, value changed, refresh, ...). Because this is extra configuration on the view, the most logical place to call this function is in the configuration script.

// If the group contains the name 'John', make background purple. Else set it to orange.
CSL.multiRecord.setRecordGroupStyling((groupRows, groupData) => {
 // Get all the names of the persons
 const names = groupData.map((person) => person.name);
 // Check if the array contains a 'John'
 const hasJohn = names.includes('John');

 if (hasJohn) {
        return 'background-color:purple'
 } else {
     return 'background-color:orange'
 }
});

Sets the styling of a row. The condition will be checked when an interaction in the view is made. (loadComplete, value changed, refresh, ...). Because this is extra configuration on the view, the most logical place to call this function is in the configuration script.

// Set the record styling to a purple background and a white color.
CSL.multiRecord.setRecordStyling({ background: 'purple', color: 'white' });

// Sets the record styling based on a condition.
CSL.multiRecord.setRecordStyling((rowData) => {
  if (rowData['productActive'] === 'True') {
     // Object return example.
      return { 'background-color': 'green', color: 'white' };
   } else if (rowData['productActive'] === 'False') {
      // String return example.
      return 'background-color:red; color:black; font-size:20px';
   } else {
      return 'background-color:black; color:white';
   }
});

Set a condition to enable the selection of certain records. The condition will be executed for each record in the current page. If the condition function returns true, a row is selectable.

// Only make records selectable where the First Name starts with the capital letter J.
CSL.multiRecord.setSelectionCondition(rowData => rowData['First Name'].indexOf('J') === 0);

Undo all changes currently made. This will remove added rows, restore deleted rows and set original value on the updated cells.