On save Action, filling part of the model manually and save it.

[Egoitz]

Hello,

I have one parent grid and one child grid for each row of the parent grid. The parent has one model <NewVoucherViewModel> and the grid has other model <LineItemsViewModel>. The parent contents a property LineItems wich is a list of objects of type LineItemsViewModel.

I will only have one button on the row of the parent grid for saving. I want that when the user clicks this button, will fill automatically all properties of the parent <NewVoucherViewModel> and i would manually fill the LineItems property of the model. After that i want to save the changes.

However it looks like it goes in a loop because of the saveRow() method at the end triggers again the save Event? How can i manage this? What is the best approach? How can i save all at the end? 

This is how my code looks like:

<script>
    function saveEvent(e) {
        //e.preventDefault();
        //var row = e.sender.select();
        //var parentGrid = $("#grid5").data("kendoGrid");
        var childGridName = "#grid5_" + e.model.VoucherId;
        var grid = $(childGridName).data("kendoGrid");
        var childGridItems = [];
        //var allRows = grid.items();

        var totalrecords = grid.dataSource.total();
        console.log(totalrecords);
        for (var i=0 ; i <= grid.dataSource.total(); i++) {
            var dataItem = grid.dataItem("tbody tr:eq(" + i + ")");
            var dataArray = {
                "Account": dataItem.Account,
                "Assignment": dataItem.Assignment,
                "CostCenter": dataItem.CostCenter,
                "GrossAmount": dataItem.GrossAmount,
                "GsCode": dataItem.GsCode,
                "InternalOrder": dataItem.InternalOrder,
                "ItemText": dataItem.ItemText,
                "Lc2amount": dataItem.Lc2amount,
                "LcAmount": dataItem.LcAmount,
                "Platform": dataItem.Platform,
                "PmtBlock": dataItem.PmtBlock,
                "PostingKey": dataItem.PostingKey,
                "TaxCode": dataItem.TaxCode,
                 "TaxKey": dataItem.TaxKey,
                "TransactionType": dataItem.TransactionType,
                "VoucherId": dataItem.VoucherId,
                "WbsElement": dataItem.WbsElement,
            };
            childGridItems.push(dataArray);
        }

        e.model.LineItems = childGridItems;
        //console.log(row);

        //console.log(e.model);
        e.sender.saveRow();

    }

    //function showDetails(e) {
            //alert("details");
       // }
</script>
<div class="modal-body">
    @(Html.Kendo().Grid<NewVoucherViewModel>()
    .Name("grid5")
    .Columns(columns =>
    {
        columns.Bound(p => p.IcType);
        columns.Bound(p => p.IcSide);
        columns.Bound(p => p.ApprovalType);
        columns.Bound(p => p.IcFlow);
        columns.Bound(p => p.ChargingEntityArProfitCenter);
        columns.Bound(p => p.ChargingEntityArCompanyCode);
        columns.Bound(p => p.ChargingEntityArPartnerProfitCenter);
        columns.Bound(p => p.ChargingEntityApProfitCenter);
        columns.Bound(p => p.ChargingEntityApCompanyCode);
        columns.Bound(p => p.ChargingEntityApPartnerProfitCenter);
        columns.Bound(p => p.Comment);
        columns.Bound(p => p.HeaderText);
        columns.Bound(p => p.RecurringFrom);
        columns.Bound(p => p.RecurringTo);
        columns.Command(command => { command.Edit(); command.Destroy(); command.Custom("Save Changes").Click("saveEvent"); });
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Events(events => events
            .Save("saveEvent")
    )
    .ClientDetailTemplateId("template")
    .HtmlAttributes(new { style = "height:800px;font-size:12px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(model => model.Id(p => p.VoucherId))
        .Create(update => update.Action("EditingInline_Create", "Grid"))
        .Read(read => read.Action("Voucher_Data_Read", "Actions"))
       )
    )

    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<LineItemsViewModel>()
                .Name("grid5_#=VoucherId#")
                .Columns(columns =>
                {
                     columns.Bound(p => p.PostingKey);
                     columns.Bound(p => p.Account);
                     columns.Bound(p => p.GrossAmount);
                     columns.Bound(p => p.ItemText);
                     columns.Bound(p => p.TaxCode);
                     columns.Bound(p => p.CostCenter);
                     columns.Bound(p => p.Platform);
                     columns.Bound(p => p.WbsElement);
                     columns.Bound(p => p.TransactionType);
                     columns.Bound(p => p.Assignment);
                     columns.Bound(p => p.TaxKey);
                     columns.Bound(p => p.LcAmount);
                     columns.Bound(p => p.Lc2amount);
                     columns.Bound(p => p.PmtBlock);
                     columns.Bound(p => p.GsCode);
                     columns.Command(command => { command.Destroy(); });
                })
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .HtmlAttributes(new { style = "height:800px;font-size:12px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Model(model => model.Id(p => p.VoucherId))
                    )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
        )
    </script>
    <script>
        function dataBound() {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        }
    </script>

[Georgi]

Hi Egoitz,

Is the saveEvent the handler of the `Save` event of the grid? If it is, indeed an endless loop will occur as the saveRow method triggers the `Save` event. If you omit calling this method, the endless loop should no longer occur.

Nevertheless, you are referring to a `save` button within the parent row, why don't you use its click handler to populate the field of the parent grid?

e.g.

function saveButtonClick(e){
  var parentGrid = $(...).data('kendoGrid');
  var childGrid = $(...).data('kendoGrid');
   
  parentGrid.dataItem($(e.target).parents('tr')).set('fieldName', childGrid.dataSource.data().map(x=> x.toJSON()) );
}

Is that an option for you?

I look forward to your reply.

Regards, 
Georgi
Progress Telerik

[Egoitz]

Hello Georgi, 

Yes this looks like a simpler and better solution :) instead of doing a loop.

[Egoitz]

Thank you!

[Georgi]

Hello Egoits, 

Happy to hear that the provided information helped.

In case you need further assistance you can always get back to us.

Regards,
Georgi
Progress Telerik