Client Detail Template Conditional On Parent Row

[malcolm]

I have a grid of customer transactions and a child detail grid which expands the transaction into line info for the transaction.  This works well but I only want the child detail grid to be available for rows on the parent with a certain transaction type id.

Is this possible?

[Maria Ilieva]

Hi Malcolm,

You can use the following appraoch:

<div>
    @(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ID);
            columns.Bound(p => p.Name);
        })
        .Filterable()
        .Sortable()
                  .ClientDetailTemplateId("template")
        .DataSource(dataSource => dataSource
            .Ajax()

                    .Read(read => read.Action("Grid_Read", "Home"))
             .Model(model => { model.Id(p => p.ID); })
        )
    )
</div>
<script id="template" type="text/kendo-tmpl">
 #if(ID > 2){#
    @(Html.Kendo().Grid<MvcApplication1.Models.TestFullCalender>()
            .Name("grid_#=ID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.id).Width(70);
                columns.Bound(o => o.title).Width(70);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Read(read => read.Action("Grid_ReadChild", "Home", new { ID = "#=ID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
    #}#
</script>

public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request)
        {
            List<TestModels> models = new List<TestModels>();

            for (int i = 1; i < 6; i++)
            {

                TestModels model = new TestModels();
                model.ID = i;
                model.Name = "Name" + i;
                models.Add(model);

            }

            return Json(models.ToDataSourceResult(request));
        }

        public ActionResult Grid_ReadChild([DataSourceRequest] DataSourceRequest request, int ID)
        {
            List<TestFullCalender> models = new List<TestFullCalender>();

            for (int i = 1; i < 6; i++)
            {

                TestFullCalender model = new TestFullCalender();
                model.id = i.ToString();
                model.title = "title" + i;
                models.Add(model);

            }

            return Json(models.ToDataSourceResult(request));
        }

public class TestModels
{
    public int ID { get; set; }
    public string Name { get; set; }
    public bool IsActive { get; set; }
    public int FID { get; set; }
}

public class TestFullCalender
{
    public string id { get; set; }
    public string title { get; set; }
}

It show Subgrid only when ID is greater than 2.

I hope this helps.


Regards,
Maria Ilieva
Telerik by Progress

[Thomas]

Is this still the only available solution for modifying the client template based on data from the model? I tried to use if statement in the ClientDetailTemplateId and it did not work. Is a conditional statement possible in this attribute or not? If not this would be a nice feature to have so that we can define different templates in nested grids.

Regards,

Thomas

 

[Stefan]

Hello,  Thomas,

This is still the recommended approach.

If this is not working, please ensure that the template syntax requirements are met:

https://docs.telerik.com/kendo-ui/framework/templates/overview

Also, sending an example can be very helpful, as we will gladly test it locally and provide a solution best suited for it.

Regards,
Stefan
Progress Telerik

[Curt Rabon]

When I use this recommended approach #if(ID > 2) {#, the small triangle icon still appears on rows that don't meat the criteria. Clicking the icon does prevent a call to the server, which is correct, but the icon should not be present.  It seems it's only working half-way correctly.

With this approach, should the triangle/expand icon be show when the criteria is not met?

[Petar]

Hi Curt,

With this approach, the small triangle icon will appear for the master row no matter there is a detailed Grid or not. To hide the discussed triangle we can use the following code on the dataBound event

function dataBound(e) {
    var items = e.sender.items();
    items.each(function () {
        var row = $(this);
        var dataItem = e.sender.dataItem(row);
        if (dataItem.ID <= 2) {
            row.find(".k-hierarchy-cell > a.k-icon.k-i-expand").css("visibility", "hidden");
        }
    })                   
}

With the above, we check the current ID of the master row, and based on its number the triangle is being hidden. 

Regards,
Petar
Progress Telerik

[Curt Rabon]

Thank you!

[Petar]

You are welcome, Curt!

I am happy that the provided code has helped you implement the targeted functionality in the application you are working on.

Regards,
Petar
Progress Telerik