Kendo grid - grouping by complex object

Question

I struggle to define groping header template and order in kendo grid

This is my dataModel schema

 model: {
          id: "ArticleId",
          fields: {
            Title: { type: "string", validation: { required: true } },
            Section: { defaultValue: { Id: 84, Title: "Editorial", OrderNo:1}, validation: { required: true } },
            OrderNo: { type: "number" },
            IsActive: { type: "number" }
             }
          }
  }

I want to group data by Section object, where the group header template should show Section.Title

and the sections should be ordered by Section.OrderNo

I tried to put

 group: {
          field: "Section.Title",
          dir: "Section.OrderNo asc"
        },

in the Grid column is defined as

{
    field: "Section",
    title: "Section",
    width: "80px",         
    template: "#=Section.Title#",
    groupHeaderTemplate: "Spotlight section: #=Section.Title#"
 },

But as the result I'm getting

Section.Title: Expert Insight .... Section.Title: Innovator Insight ...

So the group header has Section.Title: which obviously I want to change to the Spotlight section, and groups are ordered alphabetically based on Title instead of OrderNo

Thank you

Update:

I've managed to change the grouping headers by changing grid definition to

 field: "Section.Title",
                title: "Section",
                width: "80px",
                groupHeaderTemplate: "Spotlight section: #=value#"

but ordrt is still not working :(