Kendo UI JS网格验证未触发

时间:2015-05-22 13:44:05

标签: javascript jquery kendo-ui kendo-grid

我有一个网格,我想添加一些客户端验证,但我无法弄清楚如何做到这一点。剑道网站上的例子还不够。我错过了一些东西。

这是我的网格代码:

  $(document).ready(function () {
var datasource = new kendo.data.DataSource({
    transport: {
        read: {
            url: '/DiscountPromotion/Get',
            dataType: "json",
        },
        update: {
            url: '/DiscountPromotion/Update',
            dataType: "json",
            type: "POST",
            contentType: "application/json"
        },
        destroy: {
            url: '/DiscountPromotion/Delete',
            dataType: "json",
            type: "POST",
            contentType: "application/json"
        },
        create: {
            url: '/DiscountPromotion/Add',
            dataType: "json",
            type: "POST",
            contentType: "application/json"
        },
        parameterMap: function(options, operation) {
            if (operation !== "read") {
                return JSON.stringify({ discountPromotionViewModel: options });
            }
        },

    },
    pageSize: 10,
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: { type: "number" },
                Code: {
                    validation: {
                        required: true,
                        codevalidation: function (input) {
                            console.log("HÄÄR");
                            if (input.is("[name='Code']") && input.val() != "") {
                                console.log("INTE HÄR");

                                input.attr("data-codevalidation-msg", "Product Name should start with capital letter");
                                return /^[A-Z]/.test(input.val());
                            }
                            return true;
                        }
                    }

                },
                StartDate: { type: "date" },
                EndDate: { type: "date" },
                MinimumCost: {
                    type: "number",
                    validation: {
                        required: true,
                        mincostvalidation: function(input) {
                            if (input.val() == 0) {
                                console.log(input);

                                return false;
                            }
                            return true;
                        }

                    }
                },
                MaximumCost: { type: "number", validation: { min: 0 } },
                Quantity: {  type: "number", validation: { min: 0 } },
                Customer: {  defaultValue: { CustomerId: 0, CustomerName: "Select customer..." } },
                CountryCode: {  type: "string" },
                Discount: {  type: "number" },
                ModelName: {  type: "string" }
            }
        }
    },
   errors: function(e) {
       console.log(e.errors);
   }
});
$("#discountpromotiongrid").kendoGrid({
    dataSource: datasource,
    batch: true,
    toolbar: ["create", "save", "cancel", { name: "genCode", text: "Generate Code", click: function(e) {
        return false;
    }}],
    height: 400,
    navigatable: true,
    selectable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [
    {
        field: "ModelName",
        title: "ModelName",
        editor: modelNameDropDown,
        template: "#=ModelName#",
        width: 150
    },
    {
        field: "Code",
        title: "Code",
        width: 150
    },
    {
        field: "StartDate",
        title: "StartDate",
        template: '#= kendo.toString(StartDate,"yyyy-MM-dd") #',
        format: "{0:yyyy-MM-dd}",
        parseFormats: ["yyyy-MM-dd"],
        width: 120
    },
    {
        field: "EndDate",
        title: "EndDate",
        template: '#= kendo.toString(EndDate,"yyyy-MM-dd") #',
        format: "{0:yyyy-MM-dd}",
        parseFormats: ["yyyy-MM-dd"],
        width: 120
    },
    {
        field: "MinimumCost",
        title: "MinCost",
        width: 100,
        format: "{0:n0}"
    },
    {
        field: "MaximumCost",
        title: "MaxCost",
        width: 100,
        format: "{0:n0}"
    },
    {
        field: "Quantity",
        title: "Quantity",
        width: 80,
        format: "{0:n0}"
    },
    {
        field: "Customer",
        title: "Customer",
        editor: customerDropDown,
        template: "#=Customer.CustomerName#",
        width: 150
    },
    {
        field: "CountryCode",
        title: "CountryCode",
        editor: countryCodeDropDown,
        template: "#=CountryCode#",
        width: 120
    },
    {
        field: "Discount",
        format: "{0:p0}",
        editor: function (container, options) {
            $("<input name='Discount'>")
            .appendTo(container)
            .kendoNumericTextBox(
              {
                  min: 0,
                  max: 1.0,
                  step: 0.01
              });
        },
        width: 100
    },
    {
        command: "destroy",
        title: "&nbsp;",
        width: 120
    }],
    editable: true
});



function modelNameDropDown(container, options) {
    $('<input required data-text-field="ModelName" data-value-field="ModelName" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: true,
            optionLabel: "Select model...",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        url: '/DiscountPromotion/GetModelNamesByCustomerId',
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json"
                    }
                }
            }
        });
}

function customerDropDown(container, options) {
    $('<input required data-text-field="CustomerName" data-value-field="CustomerId" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: true,
            optionLabel: "Select customer...",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        url: '/DiscountPromotion/GetSuppliersCustomersByCustomerId',
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json"
                    }
                }
            }
        });
}

function countryCodeDropDown(container, options) {
    $('<input required data-text-field="CountryCode" data-value-field="CountryCode" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: true,
            optionLabel: "Select model...",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        url: '/DiscountPromotion/GetCountryCodesBySuppliersCustomers',
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json"
                    }
                }
            }
        });
}

$(".k-grid-genCode", "#discountpromotiongrid").bind("click", function (ev) {
    var text = generateCode();
    var grid = $("#discountpromotiongrid").data("kendoGrid");
    var row = grid.select();
    var data = grid.dataItem(row);
    data.dirty = true;
    data.Code = text;
    $('#discountpromotiongrid').data('kendoGrid').refresh();
    //$(".k-grid-edit-row").find("input[name='Code']").val(text);

});

function generateCode() {

     var n = 8;

    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    for (var i = 0; i < n; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }

    return text;
}

 });

console.log没有一个在控制台中注册任何内容,因此我的验证没有实际被解雇。

0 个答案:

没有答案