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

4 posts, 0 answers
  1. AkAlan
    AkAlan avatar
    121 posts
    Member since:
    Jun 2009

    Posted 05 Jan 2014 Link to this post

    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.

     
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 07 Jan 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. AkAlan
    AkAlan avatar
    121 posts
    Member since:
    Jun 2009

    Posted 07 Jan 2014 Link to this post

    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. 
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 09 Jan 2014 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready