CODEWITHSUNDEEP
jquerygriddatepickerkendo-ui
devfar
devfar

Reputation: 31

Kendo Grid. Validation of two datepicker

I have a problem now, I have a Kendo UI Grid with editable fields only two date type, so far everything works well. What is giving me problem, is to validate start date and end date. The date must be less or equal to the end date always. I need to validate these two fields. Someone who has an idea to make it thanks enter image description here

dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: controller + "/read",
            type: "GET"
        },
        update: {
            url: controller + "/update",
            type: "POST",
            dataType: "json"

            //data: { model: "prueba" }
        },
        destroy: {
            url: controller + "/delete",
            dataType: "json",
            type: "POST"
        }
    },
    batch: true,
    //pageSize: 10,
    schema: {
        model: {
            id: "id_POSPlanningOpe",
            fields: {
                select: { type: "boolean", editable: false },
                id_POSPlanningOpe: { editable: false, nullable: true },
                codPdv: { editable: false },
                nombrePdv: { editable: false },
                regionPdv: { editable: false },
                zonapdv: { editable: false },
                fecha_Inicio: { type: "date", editable: true },
                fecha_Fin: { type: "date", editable: true },
                estado: { editable: false }
            }
        }
    }
});

$("#grid").kendoGrid({
    selectable: "multiple",
    sortable: {
        mode: 'single',
        allowUnsort: false
    },
    dataSource: dataSource,
    height: 500,
    toolbar: [
        { name: "save", text: "Grabar" },
        { name: "cancel", text: "Cancelar" }],
    columns: [
        { title: "<span></span>", width: "20px", template: '<input type="checkbox" name="CheckRow" value="#= id_POSPlanningOpe #"></input>' },
        { field: "id_POSPlanningOpe", title: "<span class='Cabecera'>NRORUTA</span>", width: 80 },
        { field: "codPdv", title: "<span class='Cabecera'>CODIGO PDV</span>", width: 100 },
        { field: "nombrePdv", title: "<span class='Cabecera'>NOMBRE</span>" },
        { field: "regionPdv", title: "<span class='Cabecera'>REGION</span>" },
        { field: "zonapdv", title: "<span class='Cabecera'>ZONA</span>" },
        { field: "fecha_Inicio", title: "<span class='Cabecera'>FECHA INICIO</span>", template: '#= kendo.toString(fecha_Inicio,"dd/MM/yyyy") #', width: 100 },
        { field: "fecha_Fin", title: "<span class='Cabecera'>FECHA FIN</span>", template: '#= kendo.toString(fecha_Fin,"dd/MM/yyyy") #', width: 100 },
        { field: "estado", title: "<span class='Cabecera'>ESTADO</span>", width: 80 },
        { command: ["edit"], title: "&nbsp;", width: "100px" }],
    editable: 'inline'

});

Upvotes: 1

Views: 8072

Answers (2)

Adr&#248; Yannelli
Adr&#248; Yannelli

Reputation: 1

I have done this using this function:

(function ($, kendo) {
    $.extend(true, kendo.ui.validator, {
        rules: { // custom rules
            startdatetimevalidation: function (input, params) {
                if ($(input).val() && $(input).attr('id') == "StartDateTime") {
                    if ($('#EndDateTime').val() && $(input).getKendoDateTimePicker().value() > $('#EndDateTime').getKendoDateTimePicker().value()) {
                        return false;
                    }
                }
                return true;
            },
            endatetimevalidation: function (input, params) {
                if ($(input).val() && $(input).attr('id') == "EndDateTime") {
                    if ($('#StartDateTime').val() && $(input).getKendoDateTimePicker().value() < $('#StartDateTime').getKendoDateTimePicker().value()) {
                        return false;
                    }
                }
                return true;
            }
        },
        messages: {
            startdatetimevalidation: function (input) {
                return "Start Date can't be greater than End Date.";
            },
            endatetimevalidation: function (input) {
                return "End Date can't be smaller than Start Date.";
            }
        }
    });
})(jQuery, kendo);

Hope this help!. I know this post is old, but maybe someone needs this too..

If you need more info refer to this page: http://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation

Upvotes: 0

Petur Subev
Petur Subev

Reputation: 20193

You could try to implement custom validation rule like shown here.

Or you can use the edit event of the Grid to check if the values are in valid state and if they are not you can prevent the Grid from closing an inform the user what is wrong.

Upvotes: 2

Related Questions