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
 }
 ...
}

• Manjunath: hi @LucScu, Thank you for the answer possible to update the code for extending this file?
• LucScu: Hi @Manjunath, what do you mean?
• Manjunath: hi @LucScu,I just asked how to extend that js file? using require-js? I am just doing it,
• LucScu: Like i wrote in the answer take a look to dynamic-rows-grid.js that extends dynamic-rows.js. Just copy it and customize it to your module and use this new custom js as component of your ui component.
• Manjunath: hi @LucScu Thank you, can you help me on this magento.stackexchange.com/questions/330548/…