Виджет, который добавляет или вычитает один день из каждой даты столбца в сетке кендо

Question

Я хотел бы создать виджет для каждого столбца моей сетки кендо, который может добавлять или вычитать один день из каждой даты этого конкретного столбца. Это столбцы

initGridReparti: function initGridReparti() {

    var gridColumns = [
    {
        field: "repartoDescr",
        title: "Reparto",
        width: 200
    },

    { 
        field: "dataAtt", 
        title: "Data Attivazione",
        format:"{0:dddd dd MMM yyyy}", 
        width:100
    },
    {
        field: "dataChimpdv",
        title: "Data Chiusura Impegni PDV",
        format:"{0:dddd dd MMM yyyy}", 
        width: 100
    },
    {
        field: "dataChimpsede",
        title: "Data Chiusura Impegni Sede",
        format:"{0:dddd dd MMM yyyy}", 
        width: 100
    },

    {
        field: 'statoPubblicazioneERP',
        title: 'Stato pubblicazione ERP',
        attributes: { 'class': 'align-center' },
        width: 100,
        template: function (dataItem) {
            //var sezioneDescr = _.get(_.find(this._filters.dataSources.sezioniVolantinoCurrentPromo, 'id', dataItem.sezioneId), 'descrizione', '');
            var statoPubblicazioneERPId = _.get(dataItem, 'statoPubblicazioneERP', 1);
            var statoPubblicazioneERPCode = commonLookupData.getItemCodeById(constants.commonLookupDataNames.statiPubblicazione, statoPubblicazioneERPId);
            var statoPubblicazioneERPDescr = commonLookupData.getItemDescrById(constants.commonLookupDataNames.statiPubblicazione, statoPubblicazioneERPId);

            return '' +
                '<span class="ff-item ajax-loading" data-id-reparto="' + dataItem.repartoId + '"><img src="img/ajaxLoading2.gif" /></span> ';
        }.bind(this),
    },
];

Я хотел бы добавить эти виджеты под каждым столбцом. Можете ли вы помочь мне понять, как я могу это сделать?

Answer 1

Вот что я придумал. Вам нужно будет использовать шаблон нижнего колонтитула (https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.footertemplate).. В этом шаблоне, скажем, у вас есть 2 кнопки. Вы можете использовать все, что хотите, и стилизовать его так, как хотите. Здесь важны события.

<button class="subtract-btn" data-column-id="Column1">&minus;</button>
<button class="add-btn" data-column-id="Column1">&plus;</button>

Теперь настройте некоторый JQuery для обработки событий следующим образом. Конечно, это предполагает, что дата, которую вы пытаетесь изменить, привязана к столбцу. В этом случае эта дата называется Column1

$(document).ready(function () {
    $('#grid').on('click', '.subtract-btn', subtractDate);
    $('#grid').on('click', '.add-btn', addDate);
});

function subtractDate(e) {
    var columnId = $(this).data('columnId');
    var data = $('#grid').data('kendoGrid').dataSource.data();
    var dataLen = data.length;
    var item, columnValue;

    for (var i = 0; i < dataLen; i++) {
        item = data[i];
        columnValue = item[columnId];
        columnValue.setDate(columnValue.getDate() - 1); //I prefer to use momentjs
        item.set(columnId, columnValue); //Forces UI update
    }
}

function addDate(e) {
    var columnId = $(this).data('columnId');
    var data = $('#grid').data('kendoGrid').dataSource.data();
    var dataLen = data.length;
    var item, columnValue;

    for (var i = 0; i < dataLen; i++) {
        item = data[i];
        columnValue = item[columnId];
        columnValue.setDate(columnValue.getDate() + 1); //I prefer to use momentjs
        item.set(columnId, columnValue); //Forces UI update
    }
}