Dynamically generate radio button and get selected radio button ID
<p>Basically what i am trying to do is, I need to generate a set of Radio buttons with respect to the values in a Web Service call and i need to retrieve the selected value whenever a change in the radio button state happens. I have been successful to generate radio buttons with the values in the response of the API call. But i am not able to capture the change event in the radio button. I am trying with KendoUI framework.</p>

<p>Below is some part of the code that i tried out.</p>

<pre><code>&lt;div data-role="drawer" id="refineSearchResults" data-position="left" style="width: 50%; background-color: #f5f5f5;" data-swipe-to-open="false"&gt;
        &lt;div id="refineHolderDiv" style="height:100%"&gt;
            &lt;div style="height:40%"&gt;
                &lt;ul data-role="listview" style="background-color:#FFFFFF"&gt;
                    &lt;li style="line-height:inherit"&gt;
                        &lt;span class="item-title" style="text-align:center"&gt;Refine Data&lt;/span&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div id="selctionsForRefinement" style="height:inherit;align-content:space-around"&gt;
                &lt;ul style="height:auto;list-style-type:none"&gt;
                    &lt;li style="margin-top:5%"&gt;
                    &lt;label style="background-color:aliceblue"&gt;
                    DIVSION&lt;/label&gt;&lt;/li&gt;
                    &lt;li style="margin-top: 5%"&gt;
                        &lt;ul data-role="listview" data-style="inset" data-type="group" id="listView1"&gt;&lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li style="margin-top: 5%"&gt;
                    &lt;label style="background-color:aliceblue"&gt;
                        BUSINESS UNIT
                    &lt;/label&gt;
                    &lt;/li&gt;
                    &lt;li style="margin-top: 5%"&gt;
                        &lt;ul data-role="listview" data-style="inset" data-type="group" id="listView2"&gt;&lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li style="margin-top: 5%"&gt;&lt;label style="background-color:aliceblue"&gt;AGENCY&lt;/label&gt;&lt;/li&gt;
                    &lt;li style="margin-top: 5%"&gt;
                        &lt;ul data-role="listview" data-style="inset" data-type="group" id="listView3"&gt;&lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li style="margin-top: 5%"&gt;&lt;label style="background-color:aliceblue"&gt;DEPARTMENT&lt;/label&gt;&lt;/li&gt;
                    &lt;li style="margin-top: 5%"&gt;

                        &lt;ul data-role="listview" data-style="inset" data-type="group" id="listView4"&gt;&lt;/ul&gt;
                            &lt;!-- &lt;select id="multiselect2" multiple="multiple"&gt;&lt;/select&gt; --&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;script&gt;
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://some_web_link",
                        dataType: "json"
                    }
                }
            });
            $("#listView1").kendoListView({
                dataSource: dataSource,
                template: "&lt;input type=radio name=abc1 onClick=categoryswitch&gt;#:division#&lt;/input&gt;&lt;br&gt;"
            });
            $("#listView2").kendoListView({
                dataSource: dataSource,
                template: "&lt;input type=radio name=abc2&gt;#:division#&lt;/input&gt;&lt;br&gt;"
            });
            $("#listView3").kendoListView({
                dataSource: dataSource,
                template: "&lt;input type=checkbox name=abc3 id=#:division# &gt;#:division#&lt;/input&gt;&lt;br&gt;"
            });
            $("#listView4").kendoListView({
                dataSource: dataSource,
                template: "&lt;input type=checkbox name=abc4 id=#:division#&gt;#:division#&lt;/input&gt;&lt;br&gt;"
            });
           function categoryswitch(e) {
                alert('test');
            }
            kendo.init($("#listView3"));
        &lt;/script&gt;
        &lt;/div&gt;
</code></pre>

<p>This is the method that i have tried so far. Please let me know if there is any solution to the problem that i am having. Also if there is any other alternative to what i am trying out then please let me know.</p>

<p>Thanks</p>