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!

Hi,

I've been searching for an answer for this for the last 3 hours and can't even find an explanation if this isn't possible. I have a Grid where I've replaced the row Guid's with .Model(model => { model.Id(p => p.OrderID);}). In one of my columns, I've added a button in a Client template, this column needs to be bound to a value. When the user clicks the button I've made in the Client Template, I need both this value and the OrderID that I've replaced the Guid with, to get the row and thus the row's data. Of course I can't set the Id of the Client Template html control because you only allow to input a raw string for that. At the same time, you don't allow a single column to be bound to multiple fields. I've seen .Bound(p=> new {X = p.y, Y= p.z}) but that won't work.

Any help on this? This seems to be a common feature that is needed. Only being able to bind to one thing, and not being able to get the selected row through events.Change() (because I need the event to fire on the specific cell button click, not just clicking anywhere on the row)  seems like a major failure on the part of the Grid control in general.

I want to divide one aggregate by another.

Take these aggregates

I want to do something like this below, note "sum / Students " where sum is the sum of enrolments and students is the sum of students, is this possible? thanks

Hi,

I have a Telerik MVC extension project that register customer js file as follow:

        <%= Html.Telerik().ScriptRegistrar().Globalization(true)
                          .DefaultGroup(group => group
                                                .Add("RingScripts.js")
                                                )
            %>   

 ​After converting it to Kendo project, I find that RingScripts.js is not registered and so javascript functions can not be called. I'd like to know how to register customer js file in Kendo.

Thanks.

Hi Team,

I would like to plot the stack area chart with one series in transparent colour, so that the plotband should be visible with actual colour.

 $("#chart").kendoChart({
                title: {
                    text: "Browser Usage Trends"
                },
                legend: {
                    position: "bottom"
                },
                seriesDefaults: {
                    type: "area",
                    stack: true
                },
                series: [{
                    name: "Chrome",
                    data: [0, 0, 0, 0, 3.6, 9.8, 22.4, 34.6]
                },{
                    name: "Firefox",
                    data: [0, 23.6, 29.9, 36.3, 44.4, 46.4, 43.5, 37.7]
                },{
                    name: "Internet Explorer",
                  color:"#ffffff",
                    data: [76.2, 68.9, 60.6, 56.0, 46.0, 37.2, 27.5, 20.2]
                },{
                    name: "Mozilla",
                    data: [16.5, 2.8, 2.5, 1.2, 0, 0, 0, 0]
                }],
                valueAxis: {
                 
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10,
                    max: 100
                    
                },
                categoryAxis: {
                   plotBands: [{
                    from: 2,
                    to: 4,
                    color: "#00ffff",
                    opacity: 0.3
                }],
                    categories: [2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #%"
                }
            });
        }​

Hi,
    If you have a model say

 and you set the Model in the datasource of the treelist to

Then the Parent_Category_Id is replaced with ParentId so when you view the datasource data items the property Parent_Category_Id is no longer there on any items. This causes problems when trying to update,edit etc as the real Parent_Category_id is never passed but instead a ParentId is.

Surely m.ParentId(f => f.Parent_Category_Id); should be just mapping this property and not replacing it.

Hi,

I have implemented the virtual scrolling using the kendo combobox in my mvc project and when I ran it on firefox version 39.0.3 it worked very well. But when i open the list and scroll using mouse wheel or click on the scroll bar down arrow then after few items the selection goes back to the first item. So i tried to open your example site using this link http://demos.telerik.com/aspnet-mvc/combobox/virtualization and it behaved in the same way in firefox. So can you please provide me the solution to fix this issue.

Here are the steps to reproduce it.

1) Open this http://demos.telerik.com/aspnet-mvc/combobox/virtualization link in firefox

2) Click on the drop arrow to see the list of items in the drowdown

2) Scroll using mouse wheel or click on the scroll bar down arrow. after few records the selection will jump again to first item.

Hello I'm working on a ASP.NET MVC 5 project with the Telerik Scheduler and was hoping to get a little assistance here. I'm not finding too much documentation in regards to Client-Side (JavaScript) filtering. 

In addition to my Scheduler control, I have two additional controls which I would like to use to drive my scheduler: a Dropdown which cascades into a multi- select. (you select a single option from the dropdown, then multiple options in a multiselect).

I need to figure out how to filter my Scheduler control based on both of these, as well as having a default or "fallback" option - if nothing is selected. 

I have this code now, which works great for the multi-select. I had something similar for the dropdown but the issue I was having is when you select an option in the dropdown, I wasn't sure how to get it back to a 'no-selection' or 'default' fallback where it will go back to displaying all events. Also, is it possible to combine these two filters into one, or simplify this further?

Thanks

Brandon​

Greetings!  I have an MVC 5 app using Telerik UI for MVC 2015.2.624.  The key aspects of the grid layout are

My issue is that I need the grid sorted by ProcedureCategoryName + Sequence.  This worked fine until I added the Group and Aggregates - now it sorts by whatever column is specified in Group().  This is a great default, but I have not been able to override the behavior.  I have considered creating an extra column that contains a concatenation of ProcedureCategory and Sequence, but I'm hoping there is a better way.  If not, please let me know how to put the AuditIssueDescription in the Group Header - that seems challenging as well.

Thanks,
Scott

In my chart the text does not appear correctly. I solved doing this:

 $("g text").first().attr("x", "10");

But probably there is another way. Does anyone knows what can I do?

Best regards

Wilton