在 Kendo 批量编辑中验证 AutoComplete

Posted 2023-05-07

【中文标题】在 Kendo 批量编辑中验证 AutoComplete

【英文标题】：Validation for AutoComplete in Kendo Batch editing

【发布时间】：2014-04-23 19:55:20

【问题描述】：

我正在使用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);
          )
)

现在，如果我没有在其中选择任何值，并且如果我移至第二列，它必须验证此字段“请选择自动完成”。 我的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。

【问题讨论】：

现在显示Please Enter Head了吗？

no..目前没有对此进行验证

没有消息，因为我正在使用 EditorTemplate 但正在为其他人获取消息...除了正在使用 EditorTemplate 的字段

【参考方案1】：

尝试使用剑道验证器..

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);

【讨论】：

它不工作我只想知道这个事件什么时候必须触发？因为当我在控制台检查时它没有触发..

如果自动完成的值为 null 或空则返回 false 导致消息显示..请选择自动完成..

也可以查看 Telerik 验证链接。 demos.telerik.com/kendo-ui/web/grid/…

再次更新...我们 input.val() 而不是在容器上 ....因为容器用于选择最近的 tr .... as var container = $(input).closest(" tr");

让我们continue this discussion in chat