Kendo Grid Dynamic Column Binding

function BindGrid(response) {
    if (!response || response.length === 0) return;

    var knownStaticKeys = [
        "store", "brand", "category", "subCategory", "subSubCategory", "collection",
        "type", "productName", "productId", "styleCode", "colour", "totalSale", "mrp",
        "discount", "vat", "totalValue", "paymentType", "salesmanName"
    ];

    // Get all keys from first item
    var allKeys = Object.keys(response[0]);

    // Identify dynamic size keys (not in static keys)
    var dynamicSizeFields = allKeys.filter(k => !knownStaticKeys.includes(k));

    // Create aliases for dynamic size fields (replace non-alphanumeric with _)
    function aliasField(field) {
        return "size_" + field.replace(/[^a-zA-Z0-9]/g, "_");
    }

    // Add alias fields to each data item for sorting & aggregation
    response.forEach(function (item) {
        dynamicSizeFields.forEach(function (field) {
            item[aliasField(field)] = item[field];
        });
    });

    // Build model fields for static + dynamic alias fields
    var modelFields = {};
    knownStaticKeys.forEach(function (k) {
        modelFields[k] = { type: (k === "totalSale" || k === "mrp" || k === "discount" || k === "vat" || k === "totalValue") ? "number" : "string" };
    });
    dynamicSizeFields.forEach(function (field) {
        modelFields[aliasField(field)] = { type: "number" };
    });

    // Build dynamic size columns with alias fields
    var sizeColumns = dynamicSizeFields.map(function (field) {
        return {
            field: aliasField(field),
            title: field.toUpperCase(),
            width: 60,
            footerTemplate: "#= (sum != null) ? sum : 0 #",
            attributes: { style: "text-align:center" },
            headerAttributes: { style: "text-align:center" }
        };
    });

    // Build static columns
    var staticColumns = [
        { field: "store", title: "Store", width: 100 },
        { field: "brand", title: "Brand", width: 80 },
        { field: "category", title: "Category", width: 80 },
        { field: "subCategory", title: "Sub Category", width: 80 },
        { field: "subSubCategory", title: "Sub Sub Category", width: 80 },
        { field: "collection", title: "Collection", width: 80 },
        { field: "type", title: "Type", width: 80 },
        { field: "productName", title: "Product Name", width: 120 },
        { field: "styleCode", title: "Style Code", width: 80 },
        { field: "colour", title: "Colour", width: 80, footerTemplate: "Total" },
        {
            title: "Size",
            columns: sizeColumns
        },
        { field: "totalSale", title: "Total Sales", width: 80, footerTemplate: "#= (sum != null) ? sum : 0 #", attributes: { style: "text-align:right" }, headerAttributes: { style: "text-align:right" } },
        { field: "mrp", title: "MRP", width: 80, footerTemplate: "#= (sum != null) ? sum : 0 #", attributes: { style: "text-align:right" }, headerAttributes: { style: "text-align:right" } },
        { field: "discount", title: "Discount", width: 80, footerTemplate: "#= (sum != null) ? sum : 0 #", attributes: { style: "text-align:right" }, headerAttributes: { style: "text-align:right" } },
        { field: "vat", title: "VAT", width: 80, footerTemplate: "#= (sum != null) ? sum : 0 #", attributes: { style: "text-align:right" }, headerAttributes: { style: "text-align:right" } },
        { field: "totalValue", title: "Net Value", width: 80, footerTemplate: "#= (sum != null) ? sum : 0 #", attributes: { style: "text-align:right" }, headerAttributes: { style: "text-align:right" } },
        { field: "paymentType", title: "Payment Type", width: 80 },
        { field: "salesmanName", title: "Salesman Name", width: 80 }
    ];

    // Aggregates for dynamic size aliases + static number fields
    var aggregates = dynamicSizeFields.map(f => ({ field: aliasField(f), aggregate: "sum" })).concat([
        { field: "totalSale", aggregate: "sum" },
        { field: "mrp", aggregate: "sum" },
        { field: "discount", aggregate: "sum" },
        { field: "vat", aggregate: "sum" },
        { field: "totalValue", aggregate: "sum" }
    ]);

    // Initialize the grid
    $("#stockGrid").kendoGrid({
        dataSource: {
            data: response,
            schema: {
                model: {
                    fields: modelFields
                }
            },
            aggregate: aggregates,
            pageSize: 20
        },
        height: 550,
        sortable: true,
        pageable: true,
        toolbar: ["search", "excel"],
        dataBound: function () {
            this.autoFitColumn();
        },
        columns: staticColumns
    });
}

Pivot Kendo Grid

var data = [
    {
        Store: "Dhanmondi",
        Brand: "Hoor",
        Category: "Men",
        SubCategory: "Shirts",
        SubSubCategory: "Formal",
        Collection: "Winter 2025",
        Type: "Full Sleeve",
        ProductName: "Slim Fit Shirt",
        StyleCode: "S123",
        Colour: "Blue",
        XS: 1,
        S: 0,
        M: 0,
        L: 2,
        XL: 0,
        XXL: 0,
        TotalSale: 3,
        MRP: 1200,
        TotalValue: 3600,
        PaymentType:'Cash',
        SalesmanName:'Rafiqul Islam',
    },
    // More rows...
];


function BindGrid() {
$("#stockGrid").kendoGrid({
    dataSource: {
    data: data,
    schema: {
        model: {
        fields: {
            Store: { type: "string" },
            Brand: { type: "string" },
            Category: { type: "string" },
            SubCategory: { type: "string" },
            SubSubCategory: { type: "string" },
            Collection: { type: "string" },
            Type: { type: "string" },
            ProductName: { type: "string" },
            StyleCode: { type: "string" },
            Colour: { type: "string" },
            XS: { type: "number" },
            S: { type: "number" },
            M: { type: "number" },
            L: { type: "number" },
            XL: { type: "number" },
            XXL: { type: "number" },
            TotalSale: { type: "number" },
            MRP: { type: "number" },
            TotalValue: { type: "number" },
            PaymentType: { type: "string" },
            SalesmanName: { type: "string" }
        }
        }
    },
    pageSize: 20
    },
    height: 550,
    pageable: true,
    sortable: true,
    columns: [
        { field: "Store", title: "Store" },
        { field: "Brand", title: "Brand" },
        { field: "Category", title: "Category" },
        { field: "SubCategory", title: "SubCategory" },
        { field: "SubSubCategory", title: "SubSubCategory" },
        { field: "Collection", title: "Collection" },
        { field: "Type", title: "Type" },
        { field: "ProductName", title: "Product Name" },
        { field: "StyleCode", title: "Style Code" },
        { field: "Colour", title: "Colour" },
        {
            title: "Size",
            columns: [
                { field: "XS", title: "XS", width: 50 },
                { field: "S", title: "S", width: 50 },
                { field: "M", title: "M", width: 50 },
                { field: "L", title: "L", width: 50 },
                { field: "XL", title: "XL", width: 50 },
                { field: "XXL", title: "XXL", width: 50 }
            ]
        },
        { field: "TotalSale", title: "Total Sales" },
        { field: "MRP", title: "MRP" },
        { field: "TotalValue", title: "Total Value" },
        { field: "PaymentType", title: "Payment Type" },
        { field: "SalesmanName", title: "Salesman Name" },
    ]
});
}