DropdownList Scrolling issue kendo grid

[Ravi]

Hi,

We are facing scroll issue while we scroll outside the dropdown. We have attached video to understand the issue.

Following is the code to bind the dropdown and kendo grid:

 function bindKendoGrid() {
                $(_kendoGrid).kendoGrid({
                    dataSource: {
                        schema: {
                            model: {
                                fields: {
                                    CourseName: { type: "string", editable: true, validation: { required: true } },
                                    Score: { type: "number", defaultValue: 1, validation: { required: true, min: { value: 1, message: "The score must be between 1 to 100" }, max: { value: 100, message: "The score must be between 1 to 100" } } },
                                    CompletionDate: {
                                        type: "date", title: "Completion Date", validation: {
                                            required: { message: "Completion Date is required" },
                                            Datevalidation: function (input) {
                                                if (input.is("[name='CompletionDate']") && input.val() != "") {
                                                    input.attr("data-Datevalidation-msg", "Completion Date is not valid");
                                                    var date_regex = /^(([0-9])|([0-2][0-9])|([3][0-1]))\ (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\ \d{4}$/;
                                                    return date_regex.test(input.val());
                                                }

                                                return true;
                                            }
                                        }
                                    },
                                }
                            }
                        }
                    },
                    batch: true,
                    pageable: false,
                    height: 420,
                    scrollable: true,
                    toolbar: ["create"],
                    columns: [
                        { field: "CourseName", title: "COURSE NAME", width: "330px", editor: courseDropDownEditor, template: "#=CourseName#" },
                        { field: "Score", type: "number", title: "SCORE", width: 230, min: 1, max: 100 },
                        { field: "CompletionDate", title: "COMPLETION DATE", type: "date", width: 330, format: "{0:d MMM yyyy}" },
                        { command: ["destroy"], title: " ", width: 230 }],
                    editable: {
                        createAt: 'bottom'
                    },
                    dataBound: gridDataBound
                });
            }

function courseDropDownEditor(container, options) {
                $('<input name="Course Name" id="CourseName" required data-text-field="CourseName" data-value-field="CourseName" data-bind="value:' + options.field + '"/>')
                    .appendTo(container)
                    .kendoDropDownList({
                        autoBind: false,
                        dataTextField: "CourseName",
                        dataValueField: "CPETSCourseId",
                        //optionLabel: "-- Select Course Name --",
                        dataSource: _CourseList,
                        'open' : function (e)
                        {
                         
                        },
                        change: function (e) {
                            var selectedCourse = this.value();
                            var flag = false;
                            var cnt = 0;
                            var gridRowsLength = $(_kendoGrid).data("kendoGrid")._data.length;
                            for (var i = 0; i < gridRowsLength; i++) {
                                //if (gridRowsLength > 0 && i <= gridRowsLength - 1) {
                                var coursename = $(_kendoGrid).data("kendoGrid")._data[i].CourseName;
                                if (selectedCourse == coursename) {
                                    cnt = parseInt(cnt) + 1;
                                }
                            }
                            if (parseInt(cnt) > 1) {
                                this.value('');
                                alert("This course has already selected.");
                                return false;

                            }
                        }
                    });
            }

[Dimiter Topalov]

Hello Ravi,

Please find the answer in the following thread:

http://www.telerik.com/forums/dropdownlist-scrolling-issue-kendo-grid-de1b24f703ba

I am closing this one as a duplicate.

Regards,
Dimiter Topalov
Telerik by Progress