This is a migrated thread and some comments may be shown as answers.

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

3 Answers 254 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AkAlan
Top achievements
Rank 2
AkAlan asked on 06 Jan 2014, 12:56 AM
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.

 

3 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 07 Jan 2014, 09:41 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
AkAlan
Top achievements
Rank 2
answered on 07 Jan 2014, 03:53 PM
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. 
0
Alexander Popov
Telerik team
answered on 09 Jan 2014, 11:33 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
AkAlan
Top achievements
Rank 2
Answers by
Alexander Popov
Telerik team
AkAlan
Top achievements
Rank 2
Share this question
or