Calendar popup date selection is not working when a second radspreadsheet is placed

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 13 Aug 2021 08:13 by ADMIN

Release R3 2021

Mamallan

Created on: 12 Jan 2021 13:48

Category: Spreadsheet

Type: Bug Report

Calendar popup date selection is not working when a second radspreadsheet is placed

Repro:

<telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1" />
<telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet2" />

protected void Page_Load(object sender, EventArgs e)
{
    var workbook = new Workbook();
    var sheet1 = workbook.AddSheet();

    AddDateRow(sheet1);

    sheet1.Columns = new List<Column>() { new Column() { Index = 1, Width = 150 } };

    RadSpreadsheet1.Sheets.Add(sheet1);
    RadSpreadsheet2.Sheets.Add(sheet1);

    RadSpreadsheet1.ColumnsCount = 5;
    RadSpreadsheet1.RowsCount = 10;
}

private void AddDateRow(Worksheet sheet1)
{
    var row = new Row() { Index = 0 };
    Cell firstCell = new Cell() { Index = 0, Value = "Select Date:", Bold = true };
    row.AddCell(firstCell);

    Cell secondCell = new Cell() { Index = 1, Value = "", Bold = true, Background = "#fef0cd", Format = "mmmm d, yyyy" };

    secondCell.Validation = new Validation()
    {
        AllowNulls = true,
        DataType = "date",
        ShowButton = true,
        ComparerType = "between",
        From = "DATEVALUE(\"1/1/2000\")",
        To = "DATEVALUE(\"12/31/2020\")",
        Type = "reject",
        TitleTemplate = "Invalid date selected",
        MessageTemplate = "Select a date between year 2000 and 2020."
    };

    row.AddCell(secondCell);
    sheet1.AddRow(row);
}

1 comment

ADMIN

Peter Milchev

Posted on: 12 Jan 2021 13:50

Temporary workaround: Placing the following script under the ScriptManager

<script>
    if (kendo && kendo.spreadsheet) {

        kendo.spreadsheet.registerEditor('_validation_date', function () {
            var context, calendar,
                handleSelected = true;

            function create() {
               
                //var $calendar = context.view.element.find("[id$='SpreadsheetCalendarDropDown']");
                //var element = $calendar.closest(".rssPopup");
                var spreadsheet = context.view.element[0].control;
                    calendar = spreadsheet._findChildControl("SpreadsheetCalendarDropDown");
                if (!this._calendardropdown) {
                    var dropdown = new kendo.spreadsheet.DropDown($(calendar.get_element()).closest(".rssPopup"));
                    this._calendardropdown = dropdown;
                    dropdown._additionalSelector = ".RadCalendarFastNavPopup";

                    calendar.add_dateSelected(function (sender, args) {

                        if (handleSelected) {
                            dropdown.close();

                            var triplet = sender.get_selectedDates()[0];
                            if (triplet) {
                                if (!context.range.format()) {
                                    context.range.format("yyyy-mm-dd");
                                }
                                context.callback(kendo.spreadsheet.dateToNumber(new Date(triplet[0], triplet[1] - 1, triplet[2])));
                            }
                        }
                    });
                }

                this._calendardropdown.openFor(context.view.element.find('.k-spreadsheet-editor-button'));
            }
            function open() {
                create();
                var date = context.range.value();
                if (date != null) {
                    var convertedDate = kendo.spreadsheet.numberToDate(date);
                    if (convertedDate instanceof Date) {
                        var convertedTriplet = [convertedDate.getFullYear(), convertedDate.getMonth() + 1, convertedDate.getDate()];
                        handleSelected = false;
                        var dates = calendar.get_selectedDates();
                        calendar.unselectDates(dates);
                        calendar.selectDate(convertedTriplet, true);
                        handleSelected = true;
                    }
                }

                var val = context.validation;
                if (val) {
                    var min = null, max = null;
                    if (/^(?:greaterThan|between)/.test(val.comparerType)) {
                        min = kendo.spreadsheet.numberToDate(val.from.value);
                    }
                    if (val.comparerType == 'between') {
                        max = kendo.spreadsheet.numberToDate(val.to.value);
                    }
                    if (val.comparerType == 'lessThan') {
                        max = kendo.spreadsheet.numberToDate(val.from.value);
                    }

                    if (min instanceof Date) {
                        var minTriplet = [min.getFullYear(), min.getMonth() + 1, min.getDate()];
                        calendar.set_rangeMinDate(minTriplet);
                    }

                    if (max instanceof Date) {
                        var maxTriplet = [max.getFullYear(), max.getMonth() + 1, max.getDate()];
                        calendar.set_rangeMaxDate(maxTriplet);
                    }
                }
            }
            return {
                edit: function (options) {
                    context = options;
                    open();
                },
                icon: 'p-icon p-i-calendar'
            };
        });
    }
</script>

Regards,
Peter Milchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.