Блог

Я пытаюсь создать иерархическую сетку в кендо, и это то, что у меня есть до сих пор — > >https://plnkr.co/edit/tJvRD0CFqZ1gSYEB

  <script>
        function onChange(e) {
            var dataItem = e.sender.dataItem();
        };
        var data = [
 
        ]
        index = data.length   1;

           $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: function (o) {
                        o.success(data);
                    },
                    update: function (o) {
                        o.success();
                    },
                    destroy: function (o) {  
                        var d = data.filter(data => data.id == o.data.id);
                        var removeIndex = data.map(data => data.id).indexOf(o.data.id);
                        if (removeIndex >= 0) {
                            data.splice(removeIndex, 1);
                        }
                        o.success();
                    },
                    create: function (o) {
                        var record = o.data;
                        record.id = index;
                        index  ;
                        data.push(o.data);
                        Object.assign(o.data, { courses: [] })
                        o.success(record);
                    }
                },
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { type: "number", editable: false },
                            name: {
                                type: "string",
                                validation: {
                                    required: true,
                                    duplicate: function (input) {
                                        debugger;
                                        if (input.is("[name='name']") amp;amp; input.val() != "") {
                                            var name = input.val();
                                            var grid = $("#grid").data('kendoGrid');
                                            var view = grid.dataSource.view();
                                            var name_edit = grid.editable.options.model.name;
                                            var valid = true;
                                            for (var i = 0; i < view.length; i  ) {
                                                if ((name == view[i].name amp;amp; (name != name_edit))) {
                                                    valid = false;
                                                    input.attr("data-duplicate-msg", "Duplicates not allowed.");
                                                    break;
                                                }
                                            }
                                            return valid;
                                        }
                                        
    
                                        return true;
                                    },
                                },},
                            isActive: { type: "boolean" },
                            description: { type: "string" }
                        }
                    }
                }
            },
            editable: "popup",
            toolbar: [{ name: "create", text: "Add Sub Group" }],
            columns: [
                "name",
                "isActive",
                "description",
                { command: ["edit", "destroy"] }
            ],
            detailInit: detailInit
        });
        function detailInit(e) {
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    transport: {
                        read: function (o) {
                            var subdata = [
                            ]
                            o.success(e.data.courses);
                        },
                        update: function (o) {
                            var parentid = data.filter(x => x.id == e.data.id)[0];
                            var parentIndex = data.map(function (img) { return img.id; }).indexOf(parentid.id);
                            var childIndex = data[parentIndex].courses.map(function (img) { return img.id; }).indexOf(o.data.id);
                            data[parentIndex].courses[childIndex].name = o.data.name;
                            data[parentIndex].courses[childIndex].coursetext= o.data.coursetext;
                            data[parentIndex].courses[childIndex].courseteacher= o.data.courseteacher;
                            o.success();
                        },
                        destroy: function (o) {
                            debugger;
                            var parentid = data.filter(x => x.id == e.data.id)[0];
                            var parentIndex = data.map(function (img) { return img.id; }).indexOf(parentid.id);
                            var childIndex = data[parentIndex].courses.map(function (img) { return img.id; }).indexOf(o.data.id);
                            if (childIndex >= 0) {
                                data[parentIndex].courses.splice(childIndex, 1);
                            }
                            o.success();
                        },
                        create: function (o) {
                            var record = o.data;
                            record.id = index;
                            index  ;
                            var dataobj = data.filter(x => x.id == e.data.id)[0];
                            dataobj.courses.push(record);
                            o.success(record);
                        }
                    },
                    schema: {
                        model: {
                            id: "id",
                            fields: {
                                id: { type: "number", editable: false },
                                name: {
                                    type: "string",
                                    validation: {
                                        required: true,
                                        duplicate: function (input) {
                                            if (input.is("[name='name']") amp;amp; input.val() != "") {
                                                var name = input.val();
                                                var grid = $("#grid").data('kendoGrid');
                                                var view = grid.dataSource.view();
                                                var parentid = grid._data.filter(x => x.name == e.data.name)[0];
                                                var parentIndex = grid._data.map(function (img) { return img.id; }).indexOf(parentid.id);
                                                var view = grid._data[parentIndex].courses;
                                                var valid = true;
                                                for (var i = 1; i < view.length; i  ) {
                                                    if ((name == view[i].name)) {
                                                        valid = false;
                                                        input.attr("data-duplicate-msg", "Duplicates not allowed.");
                                                        break;
                                                    }
                                                }
                                                return valid;
                                            }
    
                                            return true;
                                        },
                                    },
                                },
                                coursename: { type: "string" },
                                courseteacher: { type: "string" }
                            }
                        }
                    }
                },
                editable: "popup",
                toolbar: [{ name: "create", text: "Add Courses" }],
                columns: [
                    "name",
                    "coursename",
                    { field: "courseteacher", title: "courseteacher"},
                    { command: ["edit", "destroy"] }
                ]
            });
        }
    </script>
 

Чего я пытаюсь добиться, так это того, что я хочу предотвратить добавление повторяющегося «имени». Я поместил проверку в родительскую сетку, и она работает нормально. Теперь я хочу провести аналогичную проверку в дочерней сетке. Я не могу получить текущую редактируемую строку в дочерней сетке. Я получил его через «var name_edit = grid.editable.options.model.name;» в родительской сетке, и мне нужна альтернатива для дочерней сетки.

Я был бы признателен за любую помощь в этом, так как это имеет решающее значение для моего проекта TIA.

Я создал функцию проверки снаружи и для дочерней сетки, я сначала сохраняю экземпляр в событии редактирования, а затем передаю ему входные данные и экземпляр дочерней сетки, и это работает.

 edit:function(e){
            childGrid = e.sender;
          },

// ...

duplicate: function (input) {
                        return validateDuplicate(input, childGrid);
                      }