I have a hierarchicl grid which is editable. The editing function is working fine. The problem that I have is when I edit a child grids row, I am unable to get the parent row of the corresponding edited child row. Similarly when I edit a parent row, I am unable to find its children(or child grid ) with the edited values.
We are using plain HTML and jquery to implement the grid and not using the MVC.
Regards,
Vijay
3 Answers, 1 is accepted
In the context of the detail grid you can handle edit event and to find master row you can execute the following script:
edit: function(e) { // `this` is the child `Grid` widget var parentRow = this.wrapper.closest("tr");}In the context of the master grid the script looks as follows:
edit: function(e) { // `this` is again the `Grid` widget /the master grid/ var childRow = e.container.next(".k-detail-row");}Here is an example for the above code: http://jsbin.com/IGepOKE/1/edit Regards,
Nikolay Rusev
Telerik
Rank 1
How to access to the parent row on databound?
I want to change background of parent row if a condition on the details row but I only can get the tr of the details grid
function onOrderDetailsDataBound(e) {
var grid = this;
var currentRecords = grid.dataSource.view();
for (var i = 0; i < currentRecords.length; i++) {
//currentRecords[i] is the current dataItem
if (!currentRecords[i].Deducible) {
//grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']").addClass("noDeducible");
var parentRow = this.wrapper.closest("tr");
parentRow.addClass("noDeducible");
}
}
}
Mi grid is
@(Html.Kendo().Grid<EgresosViewModel>()
.Name("cdfie")
.HtmlAttributes(new { style = "height:430px;" })
.Scrollable()
.Columns(columns =>
{
columns.Template(t => { })
.ClientTemplate("#=UUID#")
.Title("UUID").Hidden(true)
.Width(100);
columns.Bound(f => f.EstatusSAT).Filterable(false).Title("Estatus SAT").Width(80);
columns.Bound(f => f.FechaEmision).Title("Fecha Emisión").Filterable(false).Format("{0:d}").Width(100);
columns.Bound(f => f.RFCEmisor).Title("RFC Emisor").Width(120);
columns.Bound(f => f.NombreEmisor).Title("Nombre Emisor");
columns.Bound(f => f.SubTotal).Filterable(false).Width(80).Format("{0:c}");
columns.Bound(f => f.Descuento).Filterable(false).Width(80).Format("{0:c}");
columns.Bound(f => f.IVA16).Title("IVA 16%").Filterable(false).Width(80).Format("{0:c}");
columns.Bound(f => f.IEPS).Filterable(false).Width(80).Format("{0:c}");
columns.Bound(f => f.RetenidoIVA).Filterable(false).Title("IVA Retenido").Width(120).Format("{0:c}");
columns.Bound(f => f.RetenidoISR).Filterable(false).Title("ISR Retenido").Width(120).Format("{0:c}");
columns.Bound(f => f.Total).Filterable(true).Width(120).Format("{0:c}");
})
.Pageable(pageable => pageable.Refresh(true))
.Sortable()
.Selectable()
.Navigatable()
.Resizable(resize => resize.Columns(true))
.ClientDetailTemplateId("ConceptosEgresos_DetailTemplate")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(m =>
{
m.Id(f => f.UUID);
m.Field(f => f.UUID).Editable(false);
m.Field(f => f.FechaEmision).DefaultValue(DateTime.Today);
})
.Aggregates(aggregates =>
{
aggregates.Add(p => p.SubTotal).Sum();
aggregates.Add(p => p.IVA16).Sum();
aggregates.Add(p => p.Total).Sum();
}
)
.Events(events => events.Error("error_handler"))
.Sort(s => s.Add(f => f.FechaEmision).Descending())
.Read(read => read.Action("CDFISEgreso_Read", "SinLios"))
.Update(update => update.Action("UpdateConcepto", "SinLios")))
)
<script id="ConceptosEgresos_DetailTemplate" type="text/x-kendo-tmpl">
<h4>Detalle para CFDI \\##=UUID# </h4>
@(Html.Kendo().Grid<ConceptosViewModel>()
.Name("order_details#=UUID#")
.Columns(columns =>
{
columns.Bound(f => f.Id).Hidden(true);
columns.Bound(f => f.Cantidad).Width(50);
columns.Bound(f => f.ValorUnitario).Format("{0:c}").Width(100);
columns.Bound(f => f.Descripcion).Encoded(false)
.Title("Descripción").Filterable(false).Width(260)
.ClientFooterTemplate("Total:");
columns.Bound(f => f.Importe).Format("{0:c}").Width(100);
columns.Bound(f => f.Deducible).ClientTemplate("<span> \\#= Deducible ? 'Si' : 'No' \\#</span>")
.Title("Deducible").Width(100);
columns.Bound(f => f.DeducibleAnual).ClientTemplate("<span> \\#= DeducibleAnual ? 'Si' : 'No' \\#</span>")
.Title("Deducible Anual").Width(100);
columns.Bound(f => f.MontoDeducible).Title("Monto Deducible").Format("{0:c}").Width(100);
columns.Bound(f => f.CausaIVA).ClientTemplate("<span> \\#= CausaIVA ? 'Si' : 'No' \\#</span>")
.Filterable(false)
.Title("Causa IVA")
.Width(80);
columns.Bound(f => f.CatalogosCuenta)
.ClientTemplate("\\#=CatalogosCuenta.Nombre\\#")
.Title("Catálogo de Cuentas")
.Filterable(false).Width(200);
columns.Template(f => new { })
.Title("Total Deducible")
.ClientTemplate("\\#=kendo.toString(GetOrderItemPrice(data), \"c\")\\#")
.ClientFooterTemplate("<span name='sum'></span>").Width(120);
columns.Command(command =>
{
command.Edit();
});
})
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Events(e =>
{
e.DataBound("onOrderDetailsDataBound");
})
.Selectable()
.Pageable(pageable => pageable.Refresh(true))
.Navigatable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(concepto => concepto.Id);
model.Field(concepto => concepto.Id).Editable(false);
model.Field(concepto => concepto.Unidad).Editable(false);
model.Field(concepto => concepto.Cantidad).Editable(false);
model.Field(concepto => concepto.UUID).Editable(false);
model.Field(concepto => concepto.CausaIVA).DefaultValue(false);
model.Field(concepto => concepto.ValorUnitario).Editable(false);
model.Field(concepto => concepto.CatalogosCuenta).DefaultValue(ViewData["catalogos"] as CatalogosCuentaViewModel);
})
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("Conceptos_Read", "Cliente", new { UUID = "#=UUID#" }))
.Update(update => update.Action("UpdateConcepto", "SinLios")))
.ToClientTemplate()
)
</script>
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>
Hello Ross,
In order to find master row for detail Grid you should implement the following logic:
- get current grid instance
- find the closest row(tr) in which this grid resides, i.e gridInstance.wrapper.closest("tr")
- and get previous row as detail row is right after its master row in the DOM
Here is how it looks above logic implemented in dataBound event of the detail grid:
dataBound: function() {// current (detail) grid instance
var grid = this;
// the master row for this detail
var masterRow = grid.wrapper.closest("tr").prev();
// perform custom action
masterRow.addClass("myClass");
},
Example - http://dojo.telerik.com/@rusev/imIdE
I would like to stress out that your post is not directly related of the original theme in this thread. In such situations I would ask you to open a separate ticket.
Also I see the same post in another thread here. I will close it in order to avoid duplication of posts.
Regards,
Nikolay Rusev
Telerik