Hi, I am using Umbraco 7.9 and trying to use the GroupBy property to group items based on a property selected in the back office. I am kind of going off of the Starter Kit utilizing the person and people page.
But I added a property that is a dropdown selector that the admin can select what "Department" the person belongs to. On the front end, I then want to group everyone by their departmet and create separate element groups based on the selected Department they are in. Shouldn't be that hard. I tried a lot of different solutions and so far the GroupBy is not letting my run it. I keep getting an error

" Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type"

Below is what I got so far. I want to group each person within their category. Meaning that I more or less want to create a new "staff-grid row" for each "Department" and put each person in ther respective department. Any help if appreciated. I am running out of ideas and time on this project.

<div class="staff-grid row">
<h4>Individual Department Name Goes Here</h4>
                 @foreach (var person in CurrentPage.Children)
                    {
            var staffMemberImageUrl = person.GetPropertyValue<IPublishedContent>("staffPhoto") != null ? person.GetPropertyValue<IPublishedContent>("staffPhoto").Url : "/media/1036/defaultstaffpic.jpg";
            <div class="staff-grid-item col-md-3">
                <div class="staffImgContainer">
                    <img src = "@staffMemberImageUrl" class="staffImg" />
                </div>
                <div class="staff-grid-details">
                    <span class="staffName">@person.GetPropertyValue("staffMemberName")</span>
                    <span class="staffTitle">@person.GetPropertyValue("staffMemberJobTitle")</span>
                    <div class="staff-grid-contact">
                        @if(!string.IsNullOrEmpty(person.GetPropertyValue("staffMemberEmail").ToString()))
                        {
                    <a href="mailto:@(person.GetPropertyValue("staffMemberEmail"))" class="staffEmail" title="Email @(person.GetPropertyValue("staffMemberName"))" target="_blank"><i class="fas fa-envelope fa-2x"></i></a>
}
                    @if(!string.IsNullOrEmpty(person.GetPropertyValue("staffMemberPhoneNumber").ToString()))
                    {
                @*TODO: PUT THE 'P' IN THE PHONE NUMBER FOR A PAUSE BEFORE DIALING EXTENSION OR 'W' TO WAIT FOR TONE*@
<a href = "tel:@(person.GetPropertyValue("staffMemberPhoneNumber"))" class="staffPhone" title="Call @(person.GetPropertyValue("staffMemberName"))" target="_blank"><i class="fas fa-phone fa-2x"></i></a>
}
<div class="staffPhoneDesktop">@person.GetPropertyValue("staffMemberPhoneNumber") x @person.GetPropertyValue("staffMemberPhoneNumberExtension")</div>
</div>
                    </div>
                </div>
}@*END FOR EACH*@
</div><!--End of staff-grid row -->

UPDATE:

So I kind of got the grouping part, but I need to get the department to be the group name. I can't quite figure it out. Any help if appreciated.

Simplified version is below.

 @foreach(var department in CurrentPage.Descendants("staffMember").GroupBy("staffMemberDepartment")){
                <h4>Need Department Title here, Department name exists on the child though.</h4>
                <div style="border:1px solid green">
                    @foreach (var dude in department)
                    {
                    <h3>@dude.staffMemberDepartment</h3>
                    }
                    </div>
             }