This is a migrated thread and some comments may be shown as answers.

I want to disable 2nd column when 1 st row is inserted in a kendo grid, not after that

1 Answer 322 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anand Vardhan
Top achievements
Rank 1
Anand Vardhan asked on 31 Oct 2016, 08:55 PM

I have a kendo ui grid with toolbar create.
In that, I want to disable 2nd column(here "operand" column) when 1st row is inserted.
From 2nd row onwards, I want that column to be enabled.

Can someone please help me achieve this?
I am struggling to have this much of control in kendo grid.
Here is the code below:

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: " " }], "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;
    }
});

1 Answer, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 02 Nov 2016, 10:07 AM
Hello Anand,

The desired functionality is not supported out-of-the-box, but can be achieved via some custom coding. A possible approach is to handle the "Add new item" button click event, and increment a variable, used to conditionally apply custom logic in the edit event handler.

I have prepared an example demonstrating a sample implementation:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

I hope this helps, but please note that it is for illustrative purposes only, and is neither tested, nor supported, so any further modifications and/or improvements are in the hands of the developer.

Regards,
Dimiter Topalov
Telerik by Progress
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
Tags
Grid
Asked by
Anand Vardhan
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or