validate existing rows

[marcus]

Hallo,

i'm fairly new to Kendo UI MVC and am trying to rebuild an old app with the kendo grid in .net.

What i am trying to do is: Use the Grid in batch editing mode and allow in line editing on the client side. I have some problems with the client side validation of the grid data. The grid is filled with data from the Viewmodel. If the user hit's the "kontigente speichern" button i want to validate the existing rows, because the HOTEL field is empty by default, but the  $('#kontingenteHinzu').data().kendoGrid.editable.validatable.validate() method always comes back as "true" and try's to submit the grid data/ the page is reloaded. This happens although the HOTEL field is marked as required in the mvc view model. Additionally the KONTINGENT field ist only validated once it is clicked into, otherwise the validate() methoded just reloades the page. I do not use the build in "save changes" method because we use a seperate button in oure design/layout. If the user hit's the "+ Kontigent hinzufügen" button the existing rows should be validated bevor he can do that but i'm not sure how to accomplish this since the existing rows always return true with the validate() method, although they are not "valid".

Maybe someone has an idea how to get this working or even an easyer way with the build in grid methodes.

Kind regards

Marcus

Viewmodel

public class KontingentBuchung
 {
     public int LehrgangId {get;set;}
     public List<HotelKontigent> Kontingente {get;set;}
     public bool ShowModal {get;set;}
     public bool Success {get;set;}
     public string Message {get;set;}

 }

public class HotelKontigent
    {
        public int Id { get; set; }

        [Required(ErrorMessage ="Bitte ein Hotel eintragen")]
        public string Hotel {get;set;}
        [Required]
        [Range(1, Int32.MaxValue, ErrorMessage = "Bitte ein Kontingent eintragen")]
        public int Kontingent {get;set;}
        public DateTime Zeitraum {get;set;}
        public DateTime? Frist {get; set;}
    }

cshtmlview

@model Hotelinformationen.Models.KontingentBuchung

@{
    Layout = "~/Views/Shared/_BCWLayout.cshtml";
    bool hasFrist = false;
    DateTime firstDay = DateTime.Now;
    DateTime frist = DateTime.Now;
    var id = Model.LehrgangId;
    var first = Model.Kontingente.FirstOrDefault();
    if (first != null)
    {
        hasFrist = first.Frist.HasValue;
        firstDay = first.Zeitraum;
        if (hasFrist)
        {
            frist = first.Frist.Value;
        }
    }


}
@Model.LehrgangId
<div class="panel panel-primary panel-content z-depth-1 fade-in">
<div class="panel-heading">Veranstaltungen ohne Kontingente</div>
<div class="panel-body">
    <div class="row">
        <div class="col-xs-10 col-xs-push-1">
            @(Html.Kendo().Grid(Model.Kontingente)
                  .Name("kontingenteHinzu")
                  .Columns(cs =>
                  {
                      cs.Bound(c => c.Hotel).Width(500);
                      cs.Bound(c => c.Zeitraum).Format("{0:dd.MM.yyyy}").EditorTemplateName("Date").Width(150);
                      cs.Bound(c => c.Kontingent).Width(500);
                      cs.Bound(c => c.Frist).Format("{0:dd.MM.yyyy}").EditorTemplateName("Date").Width(150);
                      cs.Command(command => { command.Destroy().IconClass("fas fa-trash fa-2x").Text(" "); }).Width(75);
                  })
                  .ToolBar(toolBar =>
                  {
                      toolBar.Create().Text("Kontingent hinzufügen");
                  })
                  .Editable(editable => editable.Mode(GridEditMode.InCell)
                      .DisplayDeleteConfirmation(false)
                      .CreateAt(GridInsertRowPosition.Bottom))
                  .DataSource(ds => ds.Ajax()
                      .Batch(true)
                      .PageSize(20)
                      .Model(model =>
                      {
                          model.Id(k => k.Id);
                          model.Field(k => k.Kontingent).DefaultValue(0);
                          model.Field(f => f.Frist).Editable(false).DefaultValue(frist);
                          model.Field(k => k.Zeitraum).DefaultValue(firstDay);

                      })
                      .ServerOperation(false)
                  ))
        </div>
    </div>
</div>
</div>

 

[Konstantin Dikov]

Hi Marcus,

The validation with "InCell" (Batch) edit mode works only for the opened cells, which means that if the user do not click in the cells that should be validated, no validation will be triggered. This behavior is made that way by design and in most cases, existing rows should not be validated, because they are validation when they are created. 

A possible solution would be to handle the "SaveChanges" event, traverse all records on the current page and perform manual validation over the values of each dataItem. If the validation fails, you could prevent the event, stop the saving and inform the user that the data is incomplete:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/savechanges

For getting reference to the items you can use the "view" method of the DataSource:

var items = e.sender.dataSource.view()

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[marcus]

Hello Konstantin,

thx for your answer, i'll give it a try and come back to this post.

Regards,

Marcus