How to set SubGrid data binding conditional?

8 posts, 1 answers
  1. HSO
    HSO avatar
    17 posts
    Member since:
    Sep 2006

    Posted 02 Apr 2013 Link to this post

    Hello:

    I've followed the demo to setup the master/detail grids (or hierarchy grids), they works fine as intended.
    However I'd like to make improvement by asking how to make SubGrid data binding conditional.

    By default if the MasterGrid returned 10 rows, then the data binding to the SubGrid, which is the url to Controller/Action, were called 10 times, with each one pass in the different ID from MasterGrid.

    In my case I only need to call the data bind to SubGrid when a value in MasterGrid has met the requirement.
    i.e. for each row of MasterGrid returned, only if the column MyFlag=1, then I need to call the SubGrid.
    So out of 10 rows turned, if only 3 rows has MyFlag=1, then the data call to SubGrid only need to be 3 times, instead of 10.

    I am not sure how to do that, please advise.

    Thank you,

    Mark as answered Edit post

    9 hours ago (Link to this post)


    Hello:

    I've followed the demo to setup the master/detail grids (or hierarchy grids), they works fine as intended.
    However I'd like to make improvement by asking how to make SubGrid data binding conditional.

    By default if the MasterGrid returned 10 rows, then the data binding to the SubGrid, which is the url to Controller/Action, were called 10 times, with each one pass in the different ID from MasterGrid.

    In my case I only need to call the data bind to SubGrid when a value in MasterGrid has met the requirement.
    i.e. for each row of MasterGrid returned, only if the column MyFlag=1, then I need to call the SubGrid.
    So out of 10 rows turned, if only 3 rows has MyFlag=1, then the data call to SubGrid only need to be 3 times, instead of 10.

    I am not sure how to do that, please advise.

    Thank you,

    Mark as answered Edit post

    9 hours ago (Link to this post)


    Hello:

    I've followed the demo to setup the master/detail grids (or hierarchy grids), they works fine as intended.
    However I'd like to make improvement by asking how to make SubGrid data binding conditional.

    By default if the MasterGrid returned 10 rows, then the data binding to the SubGrid, which is the url to Controller/Action, were called 10 times, with each one pass in the different ID from MasterGrid.

    In my case I only need to call the data bind to SubGrid when a value in MasterGrid has met the requirement.
    i.e. for each row of MasterGrid returned, only if the column MyFlag=1, then I need to call the SubGrid.
    So out of 10 rows turned, if only 3 rows has MyFlag=1, then the data call to SubGrid only need to be 3 times, instead of 10.

    I am not sure how to do that, please advise.

    Thank you,

  2.
  3. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 03 Apr 2013 Link to this post

    Hello,

    <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.

     
    Thanks,
    Jayesh Goyani
  5. HSO
    HSO avatar
    17 posts
    Member since:
    Sep 2006

    Posted 03 Apr 2013 Link to this post

    You are awesome! it works!

    thank you so much!
  7. Luis
    Luis avatar
    27 posts
    Member since:
    Jun 2014

    Posted 13 May 2015 Link to this post

    Hello 

    This is great

    However, I would like to avoid showing the little arrow to the left that indicates that there should be a subgrid when no subgrid will be generated i.e. for ID = 1 and ID = 2. Is there an easy way to do it? My idea is to do it via JS and iterate over each row on the grid to delete this button. Is there a native way in kendo to do this?

    Greetings

     

  8.
  9. Luis
    Luis avatar
    27 posts
    Member since:
    Jun 2014

    Posted 13 May 2015 Link to this post

    Hello is there a way to delete the arrow on the left?
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 15 May 2015 Link to this post

    Hi Luis,

    The following CSS rule should help to remove the arrows: 

    .k-grid .k-hierarchy-cell .k-icon {
        display: none;
    }

     

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Domenico
    Domenico avatar
    3 posts
    Member since:
    Apr 2012

    Posted 17 Mar 2016 in reply to Iliana Nikolova Link to this post

    Any way to conditional remove the arrow?
  14.
  15. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 21 Mar 2016 Link to this post

    Hi Domenico,

    For this scenario you should use custom JavaScript logic in the Grid's dataBound event. To hide / show the icons you could use the jQuery hide / show methods.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top