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

How to find the parent row and child rows in a hierarchical grid on editing a cell

3 Answers 1112 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vijay
Top achievements
Rank 1
Vijay asked on 29 Oct 2013, 12:34 PM
Hi,
    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

Sort by
0
Nikolay Rusev
Telerik team
answered on 31 Oct 2013, 08:43 AM
Hello Vijay,

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");
}
Note: The above script will find a row only in case that the master item has been already expanded at least once. Otherwise the result will be empty jQuery object.

Here is an example for the above code: http://jsbin.com/IGepOKE/1/edit

Regards,
Nikolay Rusev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ross
Top achievements
Rank 1
answered on 14 Dec 2015, 03:27 PM

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>

0
Nikolay Rusev
Telerik team
answered on 16 Dec 2015, 07:49 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Vijay
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Ross
Top achievements
Rank 1
Share this question
or