how to use dynamic title in kendo grid - jquery?

Question

Below is my code and currently for column titles I've hard-coded the weekdays. But I need to make it dynamic and display the titles as per the date changes. How can I display the js variable 'weekdate' as the title for each column? Any help would be appreciated. Thank you!

$("#grid-report-store").kendoGrid({
        noRecords: true,
        dataSource: grid_data_source_store(weekstart,weekend),
        sortable: true,
        resizable: true,
        filterable: true,
        columns: [
            { field: "EmployeeId", title: "Employee Id", width: 100},
            { field: "EmployeeName", title: "Employee Name", width: 100},
            { title: "Sunday", width: 120, filterable:false, template: function(dataItem) {
                var weekdate = 'Day'+moment(weekstart).add(0, 'days').format('YYYYMMDD');
                return (dataItem[weekdate])?dataItem[weekdate]:'';
            }},
            { title: "Monday", width: 120, filterable:false, template: function(dataItem) {
                var weekdate = 'Day'+moment(weekstart).add(1, 'days').format('YYYYMMDD');
                return (dataItem[weekdate])?dataItem[weekdate]:'';
            }},
            { title: "Tuesday", width: 120, filterable:false, template: function(dataItem) {
                var weekdate = 'Day'+moment(weekstart).add(2, 'days').format('YYYYMMDD');
                return (dataItem[weekdate])?dataItem[weekdate]:'';
            }},
            { title: "Wednesday", width: 120, filterable:false, template: function(dataItem) {
                var weekdate = 'Day'+moment(weekstart).add(3, 'days').format('YYYYMMDD');
                return (dataItem[weekdate])?dataItem[weekdate]:'';
            }},
            { title: "Thursday", width: 120, filterable:false, template: function(dataItem) {
                var weekdate = 'Day'+moment(weekstart).add(4, 'days').format('YYYYMMDD');
                return (dataItem[weekdate])?dataItem[weekdate]:'';
            }},
            { title: "Friday", width: 120, filterable:false, template: function(dataItem) {
                var weekdate = 'Day'+moment(weekstart).add(5, 'days').format('YYYYMMDD');
                return (dataItem[weekdate])?dataItem[weekdate]:'';
            }},
            { title: "Saturday", width: 120, filterable:false, template: function(dataItem) {
                var weekdate = 'Day'+moment(weekstart).add(6, 'days').format('YYYYMMDD');
                return (dataItem[weekdate])?dataItem[weekdate]:'';
            }},
            { field: "TotalHours", title: "Total Hours", width: 100},
            { field: "OTHours", title: "O/T Hours", width: 100},
        ],
        dataBound: function(e) {
            $(".k-group-footer").css("text-align", "right" );
            $(".w").addClass("btn btn-success" );
            $(".d").addClass("btn btn-danger" );
            $(".p").addClass("btn btn-warning" );
            $(".u").addClass("btn btn-warning" );
            $(".w-o").addClass("btn btn-warning" );

            kendo.ui.progress($("#grid-report-store").css('padding', '0'), false);
        }
    });

Answer 1

You can do the following:

1. Get the fields from the grid's datasource's options's schema's model
2. Map the array to your desired format (e.g. field, title, filterable, template)
3. Set the columns property of the grid

Take a look at this example:

var dataSource = grid_data_source_store(weekstart,weekend)
var columns = Object
  .keys(dataSource.options.schema.model.fields)
  .filter(function(field) {
      return field !== 'EmployeeId' && field !== 'EmployeeName' && field !== 'TotalHours' && field !== 'OTHours';
  })
  .map(function(field) {
    return {
      field: field,
      title: field,
      width: 120,
      filterable: false,
      template: function(dataItem) {
        var weekdate = 'Day' + moment(weekstart).add(0, 'days').format('YYYYMMDD');
        return (dataItem[weekdate])?dataItem[weekdate]:'';
      }
    }
  });
columns.unshift({ field: 'EmployeeId', title: 'Employee Id', width: 100 });
columns.unshift({ field: 'EmployeeName', title: 'Employee Name', width: 100 });
columns.push({ field: 'TotalHours', title: 'Total Hours', width: 100 });
columns.push({ field: 'OTHours', title: '"O/T Hours', width: 100 });


$("#grid-report-store").kendoGrid({
  noRecords: true,
  dataSource: dataSource,
  sortable: true,
  resizable: true,
  filterable: true,
  columns: columns,
  dataBound: function(e) {
    $(".k-group-footer").css("text-align", "right" );
    $(".w").addClass("btn btn-success" );
    $(".d").addClass("btn btn-danger" );
    $(".p").addClass("btn btn-warning" );
    $(".u").addClass("btn btn-warning" );
    $(".w-o").addClass("btn btn-warning" );

    kendo.ui.progress($("#grid-report-store").css('padding', '0'), false);
  }
});