This is a migrated thread and some comments may be shown as answers.
Client Detail Template Conditional On Parent Row
7 Answers 128 Views
This is a migrated thread and some comments may be shown as answers.
malcolm
Top achievements
Rank 1
malcolm asked on 19 Sep 2016, 10:44 AM

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?

7 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 21 Sep 2016, 08:59 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Thomas
Top achievements
Rank 1
answered on 14 May 2018, 09:53 AM

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

 

0
Stefan
Telerik team
answered on 15 May 2018, 06:07 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Curt Rabon
Top achievements
Rank 1
answered on 02 May 2020, 10:49 PM

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?

0
Petar
Telerik team
answered on 05 May 2020, 05:53 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Curt Rabon
Top achievements
Rank 1
answered on 08 May 2020, 02:43 PM
Thank you!
0
Petar
Telerik team
answered on 11 May 2020, 03:45 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
malcolm
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Thomas
Top achievements
Rank 1
Stefan
Telerik team
Curt Rabon
Top achievements
Rank 1
Petar
Telerik team
Share this question
or