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

2 posts, 0 answers
  1. Anand Vardhan
    Anand Vardhan avatar
    2 posts
    Member since:
    Oct 2016

    Posted 31 Oct Link to this post

    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;
        }
    });
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 02 Nov Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
Back to Top