Kendo Grid是否支持基于JSON父属性进行分组？复杂汽车销售数据分组需求技术问询

I have a complex JSON structure representing car sales data:

{
  "cars": [ 
    { 
      "model": { 
        "name": "Toyota", 
        "make": [
          { 
            "name": "Camry",
            "yearSales": [
              { 
                "vehicleYear": 2010,
                "salesData": { 
                  "oneYear": 5.4,
                  "twoYear": 4.2,
                  "threeYear": 8.1 
                } 
              },
              // More year entries
            ]
          },
          // More make entries
        ] 
      }
    },
    // More model entries
  ]
}

I want to display this in a Kendo Grid with first-level grouping on the top-level model property, second-level grouping on the make property, and each row showing the corresponding vehicleYear sales data.

I know I can flatten this into a Kendo Model and then configure client-side grouping like this:

return new kendo.data.DataSource({ 
  transport: { 
    read: { 
      url: "/car-sales", 
      type: "GET", 
      dataType: "json", 
      contentType: "application/json", 
      cache: false 
    } 
  }, 
  schema: { 
    model: { 
      fields: { 
        "modelName": {from: "model.name", type: "string"},
        "makeName": {from: "model.make.name", type: "string"},
        // Other flattened fields
      } 
    } 
  }, 
  group: [{ field: "modelName" },{ field: "makeName" }], 
  // Additional config
});

But my question is: Is it possible to avoid flattening the object and instead have Kendo Grid handle grouping directly based on the original nested JSON structure?

Absolutely! You can get Kendo Grid to handle grouping directly with your original nested JSON structure—you just need to do a bit of data transformation in the DataSource's schema to expand the nested year sales entries into individual rows, instead of fully flattening all properties upfront. Here's how to make it work:

1. Use schema.parse to expand nested year sales #

First, you'll need to iterate through your nested hierarchy and turn each yearSales entry into a separate record. This ensures each grid row represents a single year's sales data, while keeping references to the parent model and make objects intact.

2. Group using nested field dot notation #

Kendo DataSource supports grouping on nested properties using dot syntax, just like it does for mapping fields. So you can group directly on model.name and make.name without flattening those into top-level fields.

Full Working Example #

return new kendo.data.DataSource({
  transport: {
    read: {
      url: "/car-sales",
      type: "GET",
      dataType: "json",
      contentType: "application/json",
      cache: false
    }
  },
  schema: {
    parse: function(response) {
      const gridRows = [];
      
      // Walk through the nested structure to create individual rows
      response.cars.forEach(car => {
        const currentModel = car.model;
        currentModel.make.forEach(currentMake => {
          currentMake.yearSales.forEach(yearRecord => {
            gridRows.push({
              model: currentModel, // Keep the full model object
              make: currentMake,   // Keep the full make object
              vehicleYear: yearRecord.vehicleYear,
              salesData: yearRecord.salesData
            });
          });
        });
      });
      
      return gridRows;
    },
    model: {
      fields: {
        "model.name": { type: "string" },
        "make.name": { type: "string" },
        vehicleYear: { type: "number" },
        "salesData.oneYear": { type: "number" },
        "salesData.twoYear": { type: "number" },
        "salesData.threeYear": { type: "number" }
      }
    }
  },
  // Define grouping using nested field paths
  group: [
    { field: "model.name", title: "Car Model" },
    { field: "make.name", title: "Make" }
  ]
});

Then, in your Kendo Grid configuration, you can reference the nested fields directly for columns:

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  dataSource: yourDataSource, // The DataSource defined above
  columns: [
    { field: "vehicleYear", title: "Model Year" },
    { field: "salesData.oneYear", title: "1-Year Sales", format: "{0}M" },
    { field: "salesData.twoYear", title: "2-Year Sales", format: "{0}M" },
    { field: "salesData.threeYear", title: "3-Year Sales", format: "{0}M" }
  ],
  groupable: true, // Ensure grouping is enabled
  sortable: true,
  filterable: true
});
</script>

Quick Notes: #

• The parse step is necessary because Kendo Grid works best with a flat list of records—each row needs to map to a single data entry. But instead of flattening all properties, we're just expanding the nested year data while keeping parent objects intact.
• Using dot notation for grouping and columns lets you work directly with the original nested structure, so you don't have to duplicate data into top-level fields.
• This approach keeps your data model aligned with the original JSON while giving you the grouping behavior you need.

内容的提问来源于stack exchange，提问作者James