Position of validation tooltip for radio button list

[Mathew]

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

[Rosen]

Hello Mathew,

Looking at the code you have pasted there seems to be few issues with it. 

- a new Validator instance is created on every button click
- also a separate Validator is attached to every radio button element

The best approach will be to attach the Validator to the list instead to the individual radio buttons and to change the click event handler to get reference to the widget and to call its validate method.

In order message placeholder to be picked-up it should be located within the container to which the Validator is attached. This is not possible in your scenario as the placeholder is outside of the container. In order this to work you could implement a custom message locator in order to supply the correct container.

Here you can find a test page which demonstrate the suggested changes.

Regards,
Rosen
Telerik

[Mathew]

Hello Rosen,

Thank you for pointing out the issues with my code, I appreciate it.  I have implemented your changes and it works just as I had expected.  I'd suggest that you place information on how to validate radio button lists someone on your site as I searched all over and was not able to find almost anything on it, although I found many others asking the same question.

Thank you very much for your help!
Matt