Client Detail Template Conditional On Parent Row

8 posts, 0 answers
  1. malcolm
    malcolm avatar
    5 posts
    Member since:
    Jun 2015

    Posted 19 Sep 2016 Link to this post

    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?

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 21 Sep 2016 Link to this post

    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
  3. Thomas
    Thomas avatar
    3 posts
    Member since:
    Sep 2015

    Posted 14 May 2018 Link to this post

    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

     

  4. Stefan
    Admin
    Stefan avatar
    3067 posts

    Posted 15 May 2018 Link to this post

    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.
  5. Curt Rabon
    Curt Rabon avatar
    79 posts
    Member since:
    Dec 2008

    Posted 02 May 2020 in reply to Stefan Link to this post

    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?

  6. Petar
    Admin
    Petar avatar
    504 posts

    Posted 05 May 2020 Link to this post

    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.
  7. Curt Rabon
    Curt Rabon avatar
    79 posts
    Member since:
    Dec 2008

    Posted 08 May 2020 in reply to Petar Link to this post

    Thank you!
  8. Petar
    Admin
    Petar avatar
    504 posts

    Posted 11 May 2020 Link to this post

    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.
Back to Top