Validation for AutoComplete in Kendo Batch editing - asp.net

Question

I am using kendo Grid batch editing in which i have used AutoComplete through Editortemplate which is as follows:
#(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);
})
)
Now i want the validation for this if I don't select any value in this and if i move to second column it must validate for this field that "please select the AutoComplete".
My Grid and ViewModel is as follows:
[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#' />");
I need the Validation for First Column that is AccountTransactionItemHead.

Answer 1

Try using kendo validator..
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!";
}
}
})
Another Grid Validation
$("#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!";
}
}
})
answer using 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);