DropdownList Scrolling issue kendo grid

2 posts, 0 answers
  1. Ravi
    Ravi avatar
    5 posts
    Member since:
    Aug 2016

    Posted 08 Dec 2016 Link to this post

    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;

                                }
                            }
                        });
                }

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    481 posts

    Posted 12 Dec 2016 Link to this post

    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
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Back to Top