Question

我正在使用 kendo Grid批量修改，其中我通过Editortemplate使用AutoComplete，如下所示：

@(Html.Kendo().AutoComplete()
          .Name("AccountTransactionItemHead")
          .DataTextField("Value_AccountTransactionItemHead")
          //.DataValueField("HeaderID")
          .HtmlAttributes(new { style = "width:250px" })
          .Filter("contains")

          //.AutoBind(true)
          .Events(events => events.Select("HeadComboSelect"))
          .MinLength(3)
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetHeadForHeadGrid", "Cashbox");
              })
              .ServerFiltering(true);
          })
)

现在我想要验证这个，如果我没有选择此中的任何值，如果我移动到第二列，它必须验证此字段＆＃34;请选择自动完成＆＃34;。我的Grid和ViewModel如下：

    [Required(ErrorMessage="Please Enter Head")]
        public string AccountTransactionItemHead { get; set; }
        public int lkpQualifier { get; set; }
        public string lkpQualifierType { get; set; }
        [Required(ErrorMessage = "Please Enter Description")]
        [RegularExpression(@"^[a-zA-Z]+$", ErrorMessage = "Please Use letters only")]
        public string AccountTransactionItemDescription { get; set; }
        [Required(ErrorMessage = "Please Enter Currency")]
        [RegularExpression(@"^[a-zA-Z]+$", ErrorMessage = "Please Use letters only")]
        public string AccountTransactionItemCurrency { get; set; }  

 columns.Bound(p => p.AccountTransactionItemHead).Title("Head").EditorTemplateName("HeadAutoComplete").ClientTemplate("#=AccountTransactionItemHead#").Width(120);
    columns.Bound(p => p.AccountTransactionItemQualifier).Title("Trade Type").EditorTemplateName("AccountTransactionItemTradeDropDown").ClientTemplate("#=AccountTransactionItemQualifier#" + "<input type='hidden' class='lkpQualifierType' value='#=data.AccountTransactionItemQualifier#' />").Width(100);
    columns.Bound(p => p.TestHeader).ClientTemplate("#=TestHeader# <input type='hidden' class='AccountTransactionHeaderID' value='#=TestHeader#' />").Hidden(true);
    columns.Bound(p => p.AccountTransactionItemDescription).Title("Description").Width(130).ClientTemplate("#= AccountTransactionItemDescription#" + "<input type='hidden' class='AccountTransactionItemDescription'  value='#=data.AccountTransactionItemDescription#' />");
    columns.Bound(p => p.AccountTransactionItemCurrency).Width(80).Title("Currency").EditorTemplateName("CurrencyAutoComplete").ClientTemplate("#= AccountTransactionItemCurrency#" + "<input type='hidden' class='AccountTransactionItemCurrency'  value='#=data.AccountTransactionItemCurrency#' />");
    columns.Bound(p => p.AmtTransact).Width(100).Title("Amt Trans").ClientTemplate("#= AmtTransact#" + "<input type='hidden' class='AmtTransact'  value='#=data.AmtTransact#' />");

我需要AccountTransactionItemHead的第一列验证。

Answer 1

尝试使用kendo验证器..

1.//Grid Custom Validation            
                  $("#GridName").kendoValidator({
                 rules: {
                     // custom rules
                     custom: function (input, params) {

                         if (input.is("[name=AccountTransactionItemHead]")) {

                             //If the input is AccountTransactionItemHead 
                            var autoComplete= input.val()
                             //check value is null or empty
                             if(autoComplete==null || autoComplete=="")
                              retrun false; //trigger validation

                         }

                         //check for the rule attribute
                         return true;
                     }
                 },
                 messages: {
                     custom: function (input) {
                         // return the message text
                         return "please select the AutoComplete!";
                     }
                 }
             })

另一个网格验证

 $("#GridName").kendoValidator({
                 rules: {

                     AccountTransactionItemHead: {
                           required: true,
              productnamevalidation: function (input) {
                                        if (input.is(" [name='AccountTransactionItemHead']") && input.val() == ""){return false; //tigger validation show message }
                     //else valition passed value is not null or empty
                 return true;         
                         }//end of function                                
                     }// end of rules;
                 },
                 messages: {
                     productnamevalidation: function (input) {
                         // return the message text
                         return "please select the AutoComplete!";
                     }
                 }
             })

使用Kenod.Ui.Validator回答

 //Add validation on Service rate Grid       

 (function ($, kendo) {

        $.extend(true, kendo.ui.validator, {
            rules: {
                greaterdate: function (input) {
                    if (input.is("[data-val-greaterdate]") && input.val() != "") {
                        var date = kendo.parseDate(input.val()),
                            earlierDate = kendo.parseDate($("[name='" + input.attr("data-val-greaterdate-earlierdate") + "']").val());
                        return !date || !earlierDate || earlierDate.getTime() < date.getTime();
                    }

                    return true;
                }

                // custom rules
                taskdate: function (input, params) {

                    if (input.is("[name=WorkOrderDetailsDate]")) {

                        //If the input is StartDate or EndDate
                        var container = $(input).closest("tr");
                        var tempTask = container.find("input[name=WorkOrderDetailsDate]").data("kendoDatePicker").value();
                        var tempWork = $("#workOrder_EstStartDate").val();

                        var workDate = kendo.parseDate(tempWork);
                        var taskDate = kendo.parseDate(tempTask);
                        if (taskDate < workDate) {
                            return false;
                        }
                    }

                    //check for the rule attribute
                    return true;
                }

            }, //end of rule                       
            messages: {
                greaterdate: function (input) {
                    return input.attr("data-val-greaterdate");
                },                        
                taskdate: function (input) {
                    return "Task date must be after work date!";
                },
            }
        });
    })(jQuery, kendo);

在Kendo批量编辑中验证自动完成

1 个答案: