Grid edition regression issue on limiting number of rows

Hello Laurent,

Indeed, it seems that the suggested approach using the cancelChanges() method causes undesired behavior in some other cases like the ones you described in your reply. 

What I would suggest for an alternative approach, aside from the one you have implemented, is configuring your own custom button in the Grid toolbar, that would be responsible for adding new rows:

toolbar: [
     { name: 'add-row-custom', template: kendo.template($('#template').html()) }
]

<script type="x-kendo/template" id="template">
    <button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-toolbar-button k-grid-add k-toolbar-tool" role="button">Add new record</button>
</script>

Then, you could implement your previous approach for preventing the addition of new rows based on the desired condition, and use the addRow() method if the condition is not valid:

$("#grid").find(".k-grid-add").on("click", function(e) {
          if (grid.dataSource.total() >= 2) {					
            console.log("reach max number of lines");
            return false;
          } else {
            grid.addRow();
          }
});

Below I am linking a Dojo example, in which you can observe the suggested approach:

• https://dojo.telerik.com/@Zornitsa/olUjUwUl 

I hope that the proposed suggestion would be suitable for your scenario.

Please let me know if you have any additional questions.

Regards,
Zornitsa
Progress Telerik

Hi Laurent,

Since the 2023 R1 SP1 Kendo release, the toolbar of the Grid has been substituted with the Kendo UI Toolbar component. You may observe this information in our Kendo UI Release History, also linked below:

• https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r1-2023-sp1-(version-2023-1-314)

Due to this change, the internal attachment of the click handlers to the Toolbar buttons has also been modified, which is the reason why the behavior you described occurs. 

In the previous versions, the event was attached to an element in the Grid that contains the 'k-grid-add' class, so when you click on any element with this class, a new row would be added, e.g.:

$("#grid").on("click", ".k-grid-add", executeAddNewRow);

$(commandButton).on("click", executeAddNewRow);

This means that, in the current case, your approach would not be able to prevent the execution of the handler for adding a new row to the Grid anymore.

Nevertheless, in order to overcome the experienced issue, I have prepared an alternative approach for you to achieve the desired scenario:

beforeEdit: function(e) {
    if (grid.dataSource.total() - 1 >= 2) {
      e.preventDefault();
      e.sender.cancelChanges();
    }
}

As you can see in the above code snippet, I am preventing the default action of the beforeEdit event that you have also mentioned in your reply, and then using the cancelChanges() method of the Grid to cancel any pending changes in the data source. 

Please note that since the approach with this event basically creates a new record and then removes it, the grid.dataSource.total() method would return the number of current records + the one record that is being created at the moment. That is the reason why I have also modified the if condition in the respective way.

Below I am sharing the provided Dojo example, demonstrating the desired behavior using the suggested approach:

• https://dojo.telerik.com/@Zornitsa/UhuMibUk 

Please observe the above information and let me know how that works for your scenario.

Regards,
Zornitsa
Progress Telerik