New to Kendo UI for jQuery? Start a free 30-day trial

DataColumns

configuration

Configure the columns which will be used to map the dataItems.

Each dataColumn can be set to an Object which have a field property or a string which will be considered as the field property.

dataColumns

Array

<div id="chartwizard"></div>
<script>
var dataSource = new kendo.data.DataSource({
                type: "odata-v4",
                transport: {
                    read: "https://demos.telerik.com/service/v2/odata/Orders"
                },
                schema: {
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            Freight: { type: "number" },
                            ShipName: { type: "string" },
                            OrderDate: { type: "date" },
                            ShipCity: { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            });

$("#chartwizard").kendoChartWizard({
           dataSource: dataSource,
           dataColumns: [
                {
                    field: "OrderID",
                },
                {
                    field: "Freight",
                },
                {
                    field: "ShipName",
                    title: "Ship Name"
                }, {
                    field: "ShipCity",
                    title: "Ship City"
                }
            ],
        });
</script>

dataColumns.field

String

Sets the field name of the column.

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    dataColumns: [
        {
            field: "productName",
            title: "Product"
        },
        {
            field: "unitPrice", 
            title: "Price"
        }
    ]
});
</script>

dataColumns.title

String

Sets the title of the column.

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    dataColumns: [
        {
            field: "productName",
            title: "Product Name"
        },
        {
            field: "unitPrice", 
            title: "Unit Price"
        }
    ]
});
</script>