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

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

4 Answers 68 Views

Grid

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

Egoitz asked on 28 Nov 2019, 02:17 PM

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>

4 Answers, 1 is accepted

answered on 03 Dec 2019, 11:32 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.