title: Dynamically generate radio button and get selected radio button ID
body: <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>