Я хочу отключить 2-й столбец, когда 1-я строка вставляется в сетку кендо, а не после этого

#javascript #jquery #kendo-ui #kendo-grid

#javascript #jquery #kendo-ui #kendo-grid

Вопрос:

У меня есть сетка пользовательского интерфейса kendo с созданием панели инструментов.

При этом я хочу отключить 2-й столбец при вставке 1-й строки.
Начиная со 2-й строки, я хочу, чтобы этот столбец был включен.
Я также хочу вставлять количество в 1-й столбец при каждой вставке в сетку.

Например: если вставлена первая строка, я хочу, чтобы 1-й столбец был «Уровнем 1».
Если вставлена 2-я строка, то я хочу, чтобы 1-й столбец был как «Уровень 2».
Если из 3, 2-я строка удаляется… Я хочу, чтобы 3-я строка 1-го столбца была преобразована с «Уровня 3» на «Уровень 2».

Может кто-нибудь, пожалуйста, помочь мне добиться этого?
Я изо всех сил пытаюсь получить такой контроль в сетке кендо.
Вот код ниже:

  var rateScheduleItemGridDatasource = new kendo.data.DataSource({
    transport: {
        read: {
            type: 'get',
            url: config.apiServer   "api/RateSchedule/GetAllRateScheduleItems?rateScheduleId="   selectedRateScheduleId,
            dataType: "json"
        },
        destroy: {
            type: 'delete',
            url: function (options) {
                alert('hi');
                $.ajax({
                    url: config.apiServer   "api/RateSchedule/DeleteRateScheduleItem?rateScheduleItemId="   options.RateScheduleItemId,
                    type: 'delete',
                    data: ko.toJSON(options),
                    contentType: "application/json",
                    success: function (data) {
                        popupNotification.show(updateSuccessMessage, "success");
                        rateScheduleItemGridDatasource.read();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        popupNotification.show(updateFailureMessage, "error");
                    }
                });
            },
            dataType: "json",
            contentType: "application/json"
        }
    },
    serverPaging: false,
    serverSorting: false,
    serverFiltering: false,
    serverGrouping: false,
    serverAggregates: false,
    batch: true,
    schema: {
        data: "Data",
        total: "Total",
        errors: "Errors",
        model: {
            id: "RateScheduleItemId",
            fields: {
                RateScheduleItemId: { type: "number", editable: false, nullable: false },
                RateScheduleId: { type: "number", editable: false, nullable: false, validation: { required: true } },
                MathmetricalSymbolCode: { type: "number", nullable: true, editable: true, validation: { required: false } },
                MathmetricalSymbolCodeValue: { type: "string", nullable: true, editable: true, validation: { required: false } },
                MeasureTypeCode: { type: "number", nullable: true, editable: true, validation: { required: false } },
                MeasureTypeCodeValue: { type: "string", nullable: true, editable: true, validation: { required: false } },
                MultiplierRate: { type: "number", nullable: true, editable: true, validation: { required: false } },
                RangeLowerNumber: { type: "number", nullable: true, editable: true, validation: { required: false } },
                RangeUpperNumber: { type: "number", nullable: true, editable: true, validation: { required: false } },
                RateTier: { type: "string", nullable: true, editable: false, validation: { required: false } }
            }
        }
    }
});
 $("#rateScheduleItemGrid").kendoGrid({
    columns: [
        { "command": [{ name: "destroy", text: "amp;nbsp" }], "width": "60px" },
        { "title": "Rate Tier", "width": "100px", "field": "RateTier" },
        { "title": "Operand", "width": "100px", "field": "MathmetricalSymbolCodeValue", "editor": rateScheduleItemOperandDropDownEditor, values: rateScheduleItemOperandReferenceData },
        { "title": "Range (From)", "width": "100px", "field": "RangeLowerNumber" },
        { "title": "Range (to)", "width": "100px", "field": "RangeUpperNumber" },
        { "title": "Rate (Multiplier)", "width": "100px", "field": "MultiplierRate" }
    ],
    resizable: true,
    editable: true,
    editable: {
        createAt: "bottom"
    },
    groupable: false,
    filterable: false,
    pageable: false,
    sortable: false,
    scrollable: true,
    height: 200,
    dataSource: rateScheduleItemGridDatasource,
    cancel: function (e) {
        dirty = false;
    },
    save: function (e) {
        dirty = false;
    }
});
  

С приведенным ниже кодом у меня есть отдельная кнопка, при нажатии на которую я добавляю новую строку в сетку.
Я не использую сетку пользовательского интерфейса Kendo, встроенную в функцию панели инструментов.

  $('#AddAnotherTier').click(function () {
    if (selectedRateScheduleId === 0) {
        var grid = $("#rateScheduleItemGrid").data("kendoGrid");
        grid.addRow();
        if (grid.dataSource.total() == 1) {
            //To do - make the operand column disabled
        }
    }
});
  

И RateTier будет 1-м столбцом, в котором я хочу обновить его текст на стороне клиента в соответствии со строкой, вставленной 1 на 1.

Комментарии:

1. Пожалуйста, предоставьте нам код в jsfiddle / plnkr.

2. Пожалуйста, посмотрите добавленный код в самом вопросе. Спасибо.