Validation in hierarchical Grid

2 posts, 0 answers
  1. Anton.S
    Anton.S avatar
    2 posts
    Member since:
    Aug 2016

    Posted 08 Aug Link to this post

    Hi!

    I've got a small MVC application with hierarchical Kendo UI MVC Grid in it. Here is the code for the main grid.

    01.Html.Kendo().Grid<PurchaseStageViewModel>()
    02. .Name("purchaseStagesGrid")
    03. .ToolBar(toolbar =>
    04. {
    05.     if (!Model.ReadOnly)
    06.     {
    07.         toolbar.Create();
    08.     }
    09. })
    10. .Editable(e => e.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))
    11. .Resizable(resize => resize.Columns(true))
    12. .Columns(c => {
    13.     c.Bound(s => s.Name);
    14.     c.Bound(s => s.StartDate).Format("{0:dd.MM.yyyy}");
    15.     c.Bound(s => s.EndDate).Format("{0:dd.MM.yyyy}");
    16. })
    17. .DataSource(d => d.Ajax().
    18. Model(m =>
    19. {
    20.     m.Id(p => p.Id);
    21. })
    22. .Read(a => a.Action("GetStages","PurchaseStage"))
    23. .Create(a => a.Action("CreateStage", "PurchaseStage"))
    24. .Update(a => a.Action("UpdateStage","PurchaseStage"))
    25. .Destroy(a => a.Action("DeleteStage", "PurchaseStage"))
    26. )
    27. .ClientDetailTemplateId("childStagesTemplate")

    And this code is for details.

    01.<script id="childStagesTemplate" type="text/kendo-tmpl">
    02.    @(
    03.    Html.Kendo().Grid<purchaseStageViewModel>()
    04.    .Name("grid_#=Id#")
    05.    .TableHtmlAttributes(new {@class ="k-grid-nested" })
    06.    .ToolBar(toolbar =>
    07.    {
    08.        toolbar.Create());
    09.    })
    10.    .Editable(e => e.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))
    11.    .Resizable(resize => resize.Columns(true))
    12.    .Columns(c =>
    13.    {
    14.        c.Bound(s => s.Name);
    15.        c.Bound(s => s.StartDate).Format("{0:dd.MM.yyyy}");
    16.        c.Bound(s => s.EndDate).Format("{0:dd.MM.yyyy}");
    17.        c.Command(command =>
    18.            {
    19.                command.Edit();
    20.                command.Destroy();
    21.            });
    22.    })
    23.    .DataSource(d => d.Ajax().
    24.    Model(m =>
    25.    {
    26.        m.Id(p => p.Id);
    27.        m.Field(p => p.Id).DefaultValue(default(long));
    28.        m.Field(p => p.ParentStageId).DefaultValue("#=Id#"); //ParentStageId - is a string type
    29.    })
    30.    .Read(a => a.Action("GetNestedStages", "PurchaseStage", new { parentStageId = "#=Id#" }))
    31.    .Create(a => a.Action("CreateStage", "PurchaseStage",new { parentStageId = "#=Id#" }))
    32.    .Update(a => a.Action("UpdateStage", "PurchaseStage"))
    33.    .Destroy(a => a.Action("DeleteStage", "PurchaseStage"))
    34.    )
    35.    .ClientDetailTemplateId("testTemplate")
    36.    .ToClientTemplate()
    37.    )
    38.</script>

    Actualy this grid appears to be recursive, so each detail contains it's own details grid. For DateTime fields I use Kendo DatePicker. 

    So each row has StartDate and EndDate. I need to implement validation in all nested grids so the StartDate and EndDate properties of nested grids could be selected only in StartDate  and EndDate range of parent row. Is there any way to implement it?

  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 10 Aug Link to this post

    Hello,

    You can implement a custom validation rule using the approach demonstrated in this documentation topic. In order to find the parent row start and end values you can search for the parent row and grid relative to the input or validator element e.g.
    myrule: function (input) {
        if (input.is("[data-val-myrule]") && input.val() != "") {
            var masterRow = this.element.closest(".k-detail-row").prev();
            var masterGrid = masterRow.closest("[data-role=grid]").getKendoGrid();
            var masterModel = masterGrid.dataItem(masterRow);
            var startdate = masterModel.StartDate;
            var endDate = masterModel.EndDate;
            ...


    Regards,
    Daniel
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top