Is there a way to directly use properties of the parent grid in the child grid?

3 posts, 1 answers
  1. Stephen
    Stephen avatar
    6 posts
    Member since:
    Apr 2009

    Posted 05 Aug 2015 Link to this post

    In the below hierarchical grids, which include the parent and child grids. Show or hide some of the columns in the child grid is based on the values presented in the parent grid. Right now, it's done by using events, as indicated by the following codes. 

      @(Html.Kendo().Grid<Payroll.Models.PayrollAuthorizationByDepartmentModel>().Name("parentGrid")
                .Columns(columns =>
            {
                columns.Bound(dataSource => dataSource.DepartmentName).Title("Department Name");
                columns.Bound(dataSource => dataSource.TotalHours).Title("Hours");
                columns.Bound(dataSource => dataSource.TotalVacationHours).Title("Vacation Hours");
                columns.Bound(dataSource => dataSource.TotalBereavementHours).Title("Bereavement yHours");
                columns.Bound(dataSource => dataSource.TotalJuryDutyHours).Title("Jury Duty Hours");
                columns.Bound(dataSource => dataSource.TotalHolidayHours).Title("Holiday Hours");
                columns.Bound(dataSource => dataSource.TotalPhamacistHours).Title("Phamacist Hours");
            })
           .DataSource(dataSource => dataSource
                                  .Ajax()
                                  .Aggregates(aggregates =>
                                  .Read(read => read.Action("Location_Authorization_Read", "Authorize", new { locationId ="#=LocationId#"))
                                  .PageSize(10)
                                  .ServerOperation(false)
                                 .Sort(sort => sort.Add("LocationId").Ascending())
            )
                .ClientDetailTemplateId("template")
                .Events(events => events.DetailExpand("expandParentGrid"))
                .Events(events => events.DataBound("onDataBound"))
                      )

    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<Payroll.Models.PayrollAuthorizationByEmployeeModel>()
                            .Name("childGridAuthorizationByEmployee_#=DepartmentId#")
                            .Columns(columns =>
                            {
                                        columns.Bound(dataSource => dataSource.EmployeeId).Title("Emp. No");                           
                                        columns.Bound(dataSource => dataSource.EmployeeName).Title("Emp. Name");                           
                                        columns.Bound(e => e.Hours).Title("Hours"));   
                                        columns.Bound(e => e.VacationHours).Title("Vac."));
                                        columns.Bound(e => e.JuryDutyHours).Title("Jury"));
                                        columns.Bound(e => e.HolidayPayHours).Title("Holiday"));
                                        columns.Bound(e => e.BereavementPayHours).Title("Bereav."));
                                        columns.Bound(e => e.PhamacistHours).Title("Pharm. "));                                  
                                    })
                            .DataSource(dataSource => dataSource
                            .Ajax()                               
                            .Read(read => read.Action("AuthorizationByEmployee_Read", "Authorize", new { locationId = "#=LocationId#", departmentId ="#=DepartmentId#"}))                                                  
                            .Events(events => events.DataBound("onDataBoundOfChildGrid"))
                            .ToClientTemplate())
    </script>

    <script type="text/javascript">

     function onDataBound(e) {
            this.expandRow(this.tbody.find("tr.k-master-row"));
        }
    function expandParentGrid(e){
            var dataItem = e.sender.dataItem(e.masterRow);
            if (!(dataItem.TotalVacationHours) > 0) {
                $("#childGridAuthorizationByEmployee_" + dataItem.DepartmentId).data("kendoGrid").hideColumn("VacationHours");
            }
            if (!(dataItem.TotalJuryDutyHours) > 0) {
                $("#childGridAuthorizationByEmployee_" + dataItem.DepartmentId).data("kendoGrid").hideColumn("JuryDutyHours");
            }
            if (!(dataItem.TotalHolidayPayHours) > 0) {
                $("#childGridAuthorizationByEmployee_" + dataItem.DepartmentId).data("kendoGrid").hideColumn("HolidayPayHours");
            }
            if (!(dataItem.TotalBereavementPayHours) > 0) {
                $("#childGridAuthorizationByEmployee_" + dataItem.DepartmentId).data("kendoGrid").hideColumn("BereavementPayHours");
            }
            if (!(dataItem.TotalPharmacistHours) > 0) {
                $("#childGridAuthorizationByEmployee_" + dataItem.DepartmentId).data("kendoGrid").hideColumn("PhamacistHours");
            }
        }

    </script>

    I was wondering if there is a way to directly use properties of the parent grid in the child grid. Something like this:

    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<Payroll.Models.PayrollAuthorizationByEmployeeModel>()
                            .Name("childGridAuthorizationByEmployee_#=DepartmentId#")
                            .Columns(columns =>
                            {
                                        columns.Bound(dataSource => dataSource.EmployeeId).Title("Emp. No");                           
                                        columns.Bound(dataSource => dataSource.EmployeeName).Title("Emp. Name");                           
                                        columns.Bound(e => e.Hours).Title("Hours")); 
    if(#=******.TotalVacationHours# >0)  {
                                        columns.Bound(e => e.VacationHours).Title("Vac."));
    }
    if(#=*****.TotalJuryDutyHours# >0) {
                                        columns.Bound(e => e.JuryDutyHours).Title("Jury"));
    }
                                        columns.Bound(e => e.HolidayPayHours).Title("Holiday"));
                                        columns.Bound(e => e.BereavementPayHours).Title("Bereav."));
                                        columns.Bound(e => e.PhamacistHours).Title("Pharm. "));                                  
                                    })
                            .DataSource(dataSource => dataSource
                            .Ajax()                               
                            .Read(read => read.Action("AuthorizationByEmployee_Read", "Authorize", new { locationId = "#=LocationId#", departmentId ="#=DepartmentId#"}))                                                  
                            .Events(events => events.DataBound("onDataBoundOfChildGrid"))
                            .ToClientTemplate())
    </script>

     

    Thank you very much!

       

  2. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 07 Aug 2015 Link to this post

    Hello Stephen,

    I am afraid that this could not be achieved. The Kendo MVC view helper will be executed on the server, but the client expression will be executed on the client. 

    The only way is to keep hiding the columns on the client side. 

    Regards,
    Boyan Dimitrov
    Telerik
    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. UI for ASP.NET MVC is VS 2017 Ready
  4. Stephen
    Stephen avatar
    6 posts
    Member since:
    Apr 2009

    Posted 12 Aug 2015 in reply to Boyan Dimitrov Link to this post

    Thanks!
Back to Top