How do I prevent a new Grid row from being created if current row is not valid

[AkAlan]

I'm using a grid in an MVVM environment. The grid that starts out with now rows. Once the Add New Row button is clicked the grid adds a row but the user can keep clicking the button and add new rows without any validation on existing rows. How can I either disable the New Row button, perform validation on the current row before adding a new row or client side validate all rows before trying to update to the server. I don't care if a user wants to add several rows and then edit the columns before saving the changes back to the server but I need to validate all required fields first.

 

[Alexander Popov]

Hello Alan,

I would recommend you to configure the dataSource schema.model so that the fields are required. For example:  

var viewModel= kendo.observable({
  dataSource: new kendo.data.DataSource({
    schema: {
      model: {
        id: "Id",
        fields: {
          Text: {type: "string", validation: {required: true}}
        }
      }
    },
    batch: true,
    transport: {
      ...
    })
});

kendo.bind($("#grid"), viewModel);

Regards,
Alexander Popov
Telerik

[AkAlan]

Hi Alexander. Sorry but the Kendo grid does not validate the model before adding a new row, unless the user actually enters the field requiring validation.
It would  be nice if it did, that would make things very simple. Here s a JS Bin that demonstrates that fact. Click Add Row several times.
Even though the Name field is required you get new rows. Then enter the Name field and try to add a row, now you can't without entering some text. 

[Alexander Popov]

Hello again Alan,

I apologize for misleading you. The approach I suggested works only in cases where the first field is required and it still allows adding new item if the editing is canceled first. The behavior you described is not supported out of the box, however it could be achieved using a custom solution. For example you could use the Grid's dataBinding event to validate the existing rows and in case the validation fails - prevent the Grid from adding new items. For convenience I prepared this small example that illustrates the above approach.

Regards,
Alexander Popov
Telerik