Hello,
I am trying to use the kendo validation with a set of radio buttons inside of a kendo template. i've been able to validate whether or not there is at least one radio button selected per set but I cannot seem to get the validation tooltip to be located where I want it to. Basically each template item has a radio button list with each items name and id set to the same value. When the validation fires it places the tooltip in the first radio button list items label area. I'd like it to be above the list of radio button items. Please see my code below:
<div id="kendo-content" class="k-content">
<div id="divSubgroups" style="border: none; border-top: 1px dashed #ccc;" data-bind="source: lstSubgroups" data-template="SubgroupTemplate"></div>
</div>
<script type="text/x-kendo-template" id="SubgroupTemplate">
<div class="item">
<div class="left">
<h3>#:Name#</h3>
<br />
<p>Current Due: <strong>#:kendo.toString(AmountOwed, "c")#</strong></p>
<br />
<p><button id="btnAddPaymentAccount" type="button" class="Orange">Add Payment Account</button>
</div>
#if(Accounts.length > 0){#
<div style="float: right">
<h3>Select Payment Account:</h3>
<span class="k-invalid-msg" data-for="radio#:ID#"></span>
<ul style="margin: 0;" data-bind="source: Accounts" data-template="AccountTemplate"></ul>
<br />
<span class="left"><button id="btnEditPaymentAccount" type="button" onclick="Validate('#:ID#');">Edit Account</button></span>
<span style="float: right"><button id="btnPayBill" type="button" onclick="Validate('#:ID#');">Pay Bill</button></span>
</div>
#}#
<div style="clear: both;"></div>
</div>
</script>
<script type="text/x-kendo-template" id="AccountTemplate">
<li>
<label>
<input type="radio" id="radio#:ParentID#" name="radio#:ParentID#" value="#:ID#" />
#:Descriptor#
</label>
</li>
</script>
<script>
function Validate(id)
{
var validator = $("#radio" + id).kendoValidator({
rules: {
custom: function (input) {
var v = $("#radio" + id + ":checked").length;
return v > 0;
}
},
messages: {
custom: "Please select a payment account to continue."
}
}).data("kendoValidator").validate();
}
</script>
The data model for this is as follows:
lstSubgroups:
[
{
ID:"P001",
Name:"Test Name 1",
AmountOwed:200,
Accounts: [
{ ParentID:"P001", ID:9318, Descriptor:"Personal Card #1" },
{ ParentID:"P001", ID:9319, Descriptor:"Personal Card #2" },
{ ParentID:"P001", ID:9320, Descriptor:"Personal Card #3" }
]
},
{
ID:"P002",
Name:"Test Name 2",
AmountOwed:100,
Accounts: [
{ ParentID:"P002", ID:1515, Descriptor:"Company Card #1" },
{ ParentID:"P002", ID:2356, Descriptor:"Company Card #2" }
]
},
{
ID:"P003",
Name:"Test Name 3",
AmountOwed:500,
Accounts: [
{ ParentID:"P003", ID:2342, Descriptor:"Parents Card #1" },
{ ParentID:"P003", ID:1122, Descriptor:"Parents Card #2" },
{ ParentID:"P003", ID:786, Descriptor:"Parents Card #3" }
]
}
]
I've tried adding "<span class="k-invalid-msg" data-for="radio#:ID#"></span>" but it doesn't seem to have any effect.
Your help is greatly appreciated!
Matt
I am trying to use the kendo validation with a set of radio buttons inside of a kendo template. i've been able to validate whether or not there is at least one radio button selected per set but I cannot seem to get the validation tooltip to be located where I want it to. Basically each template item has a radio button list with each items name and id set to the same value. When the validation fires it places the tooltip in the first radio button list items label area. I'd like it to be above the list of radio button items. Please see my code below:
<div id="kendo-content" class="k-content">
<div id="divSubgroups" style="border: none; border-top: 1px dashed #ccc;" data-bind="source: lstSubgroups" data-template="SubgroupTemplate"></div>
</div>
<script type="text/x-kendo-template" id="SubgroupTemplate">
<div class="item">
<div class="left">
<h3>#:Name#</h3>
<br />
<p>Current Due: <strong>#:kendo.toString(AmountOwed, "c")#</strong></p>
<br />
<p><button id="btnAddPaymentAccount" type="button" class="Orange">Add Payment Account</button>
</div>
#if(Accounts.length > 0){#
<div style="float: right">
<h3>Select Payment Account:</h3>
<span class="k-invalid-msg" data-for="radio#:ID#"></span>
<ul style="margin: 0;" data-bind="source: Accounts" data-template="AccountTemplate"></ul>
<br />
<span class="left"><button id="btnEditPaymentAccount" type="button" onclick="Validate('#:ID#');">Edit Account</button></span>
<span style="float: right"><button id="btnPayBill" type="button" onclick="Validate('#:ID#');">Pay Bill</button></span>
</div>
#}#
<div style="clear: both;"></div>
</div>
</script>
<script type="text/x-kendo-template" id="AccountTemplate">
<li>
<label>
<input type="radio" id="radio#:ParentID#" name="radio#:ParentID#" value="#:ID#" />
#:Descriptor#
</label>
</li>
</script>
<script>
function Validate(id)
{
var validator = $("#radio" + id).kendoValidator({
rules: {
custom: function (input) {
var v = $("#radio" + id + ":checked").length;
return v > 0;
}
},
messages: {
custom: "Please select a payment account to continue."
}
}).data("kendoValidator").validate();
}
</script>
The data model for this is as follows:
lstSubgroups:
[
{
ID:"P001",
Name:"Test Name 1",
AmountOwed:200,
Accounts: [
{ ParentID:"P001", ID:9318, Descriptor:"Personal Card #1" },
{ ParentID:"P001", ID:9319, Descriptor:"Personal Card #2" },
{ ParentID:"P001", ID:9320, Descriptor:"Personal Card #3" }
]
},
{
ID:"P002",
Name:"Test Name 2",
AmountOwed:100,
Accounts: [
{ ParentID:"P002", ID:1515, Descriptor:"Company Card #1" },
{ ParentID:"P002", ID:2356, Descriptor:"Company Card #2" }
]
},
{
ID:"P003",
Name:"Test Name 3",
AmountOwed:500,
Accounts: [
{ ParentID:"P003", ID:2342, Descriptor:"Parents Card #1" },
{ ParentID:"P003", ID:1122, Descriptor:"Parents Card #2" },
{ ParentID:"P003", ID:786, Descriptor:"Parents Card #3" }
]
}
]
I've tried adding "<span class="k-invalid-msg" data-for="radio#:ID#"></span>" but it doesn't seem to have any effect.
Your help is greatly appreciated!
Matt