How to set SubGrid data binding conditional?

[HSO]

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,

[Jayesh Goyani]

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

[HSO]

You are awesome! it works!

thank you so much!

[Luis]

Hello is there a way to delete the arrow on the left?

[Iliana Dyankova]

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

 

 

[Domenico]

Any way to conditional remove the arrow?

[Iliana Dyankova]

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