net – Kendo grid editing + non Kendo editor

Question:

Hello everyone! There is a Kendo table, one of the fields of which is a date interval. To select an interval, I want to use not the Kendo component, but the daterangepicker ( http://www.daterangepicker.com/ ) Actually, creating the corresponding column in the grid looks like this: c.Bound(vac => vac.DateRange).Title("Date Range").Width("15%").EditorTemplateName("DateRangePicker");

DateRangePicker code:

@model string

@(Html.Kendo().TextBoxFor(model=>model))

<script>
    $(function () {
        var start = new moment();
        var end = new moment().add(28, 'day');
        $('#DateRange').daterangepicker({
            "locale": {
                "format": "DD/MM/YYYY",
                "separator": " - ",
                "applyLabel": "Apply",
                "cancelLabel": "Cancel",
                "fromLabel": "From",
                "toLabel": "To",
                "customRangeLabel": "Custom",
                "weekLabel": "W",
                "firstDay": 1
            },
            "showWeekNumbers": true,
            "opens": "center",
            "drops": "down",
            "linkedCalendars": true,
            "autoUpdateInput": true,
            "startDate": start,
            "endDate": end
        });
    });
</script>

The problem is that when you select a cell, a textbox pops up and immediately a calendar pops up to select an interval. But as soon as the focus moves to the picker and the user starts to select an interval, the text box disappears. And, as a result, the selected date interval is not saved anywhere; it remains empty in the corresponding field of the model.

Answer:

The answer was taken from the Kendo forum. You need to add a client side validator. Something like this:

(function ($, kendo) {
            $.extend(true,
                kendo.ui.validator,
                {
                    rules: {
                        daterangevalidation: function (input) {
                            if (input.is("[name=DateRange]")) {
                                if (input.val() === "") {
                                    return false;
                                }
                                var drp = $("#DateRange").data('daterangepicker');
                                if (drp && drp.startDate && drp.endDate
                                    && drp.startDate.toDate().setHours(0, 0, 0, 0) !== drp.endDate.toDate().setHours(0, 0, 0, 0) && applyWasPressed
                                )
                                    return true;
                                return false;
                            }
                            return true;
                        }
                    }
                });
        })(jQuery, kendo);

This code will be executed before saving the data after editing the cell. If the necessary conditions are not met, we return false , which keeps the cell in edit mode.

Scroll to Top
AllEscort