Set Limit for Dynamic rows UI Component in magento 2

Question

I have used Dynamic rows in product edit form.

Here is my DataProvider class code

use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Magento\Framework\Stdlib\ArrayManager;
use Magento\Ui\Component\DynamicRows;
class Attachments extends AbstractModifier
{
  private $arrayManager;
  public function __construct(
   ) {
     $this->arrayManager = $arrayManager;
   }

   $dynamicRows['arguments']['data']['config'] = [
        'addButtonLabel' => __('Add Row'),
        'componentType' => DynamicRows::NAME,
        'itemTemplate' => 'record',
        'renderDefaultRecord' => false,
        'columnsHeader' => true,
        'additionalClasses' => 'admin__field-wide',
        'dataScope' => 'downloadable',
        'deleteProperty'=> 'is_delete',
        'deleteValue' => '1',
        'currentPage' => 1,
        'pageSize' => 10
    ];

    return $this->arrayManager->set('children/record', $dynamicRows, $this->getRecord());
  }

In the above code 'pageSize' is limiting the rows for one page, is there any way where we can set the limit to 10?

I am just looking for the code maximum we have to show only 10 rows, can we show any error message if it crosses 10?

Please someone guide me on this. Thank you!!

Answer 1

Try to extend the default javascript for dynamicRows component vendor/magento/module-ui/view/base/web/js/dynamic-rows/dynamic-rows.js and assign it to your component with

'component' => 'Your_Module/js/extend-dynamic-rows',

Here try to override the function processingAddChild like magento does in the core vendor/magento/module-ui/view/base/web/js/dynamic-rows/dynamic-rows-grid.js where you could see

processingAddChild: function (ctx, index, prop) {
    if (this._elems.length > this.pageSize) {
        // insert here your error message
    }
    ...
}