javascript - Populate jqxDropDownList using ajax call (JSON) -

i populating "jqxdropdownlist" json data database, @ run time nothing displays in drop down. please me resolve this.

the link refer, http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/index.htm?(arctic)#demos/jqxdropdownlist/bindingtojson.htm

using system;  using system.collections.generic;  using system.linq;  using system.web;  using system.web.ui;  using system.web.ui.webcontrols;  using system.web.services;  using system.data;  using system.collections;  using system.web.ui.htmlcontrols;  using system.io;  using system.data.sqlclient;    namespace jqwidgets  {      public partial class fromdb : system.web.ui.page      {          public class teaminfo          {              public int teamid { get; set; }              public string teamname { get; set; }          }            public list<teaminfo> teaminformation { get; set; }            [system.web.services.webmethod]          public static list<teaminfo> loadteam()          {              list<teaminfo> teaminformation = new list<teaminfo>();              string strconn = system.configuration.configurationmanager.connectionstrings["applicationservices"].tostring();              dataset ds;              using (sqlconnection con = new sqlconnection              (strconn))              {                  using (sqlcommand cmd = new sqlcommand("select teamid, team_name tblmaster_teams", con))                  {                      con.open();                      cmd.connection = con;                      cmd.commandtype = commandtype.text;                      using (sqldataadapter da = new sqldataadapter(cmd))                      {                            ds = new dataset();                          da.fill(ds);                      }                  }              }              try              {                  if (ds != null)                  {                      if (ds.tables.count > 0)                      {                          if (ds.tables[0].rows.count > 0)                          {                              foreach (datarow dr in ds.tables[0].rows)                              {                                  teaminformation.add(new teaminfo()                                  {                                      teamid = convert.toint32(dr["teamid"]),                                      teamname = dr["team_name"].tostring()                                  });                              }                          }                      }                  }              }              catch (exception ex)              {                  throw ex;              }              return teaminformation;          }      }  }

<%@ page title="" language="c#" masterpagefile="~/site.master" autoeventwireup="true"   codebehind="fromdb.aspx.cs" inherits="jqwidgets.fromdb" %>  <asp:content id="content1" contentplaceholderid="headcontent" runat="server">        <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />      <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>      <%--<script src="scripts/demos.js" type="text/javascript"></script>--%>      <script type="text/javascript" src="scripts/jqxcore.js"></script>      <script src="scripts/jqxdata.js" type="text/javascript"></script>      <script src="scripts/jqxbuttons.js" type="text/javascript"></script>      <script src="scripts/jqxscrollbar.js" type="text/javascript"></script>      <script type="text/javascript" src="scripts/jqxlistbox.js"></script>      <script type="text/javascript" src="scripts/jqxdropdownlist.js"></script>          <script type="text/javascript">            $(document).ready(function () {                var source = $.ajax({                    type: "post",                  contenttype: "application/json; charset=utf-8",                  url: "fromdb.aspx/loadteam",                  data: "{}",                  datatype: "json",                  datafields: [                          { name: 'teamid' },                          { name: 'teamname' }                      ],                  async: false,              });                var dataadapter = new $.jqx.dataadapter(source);                // create jqxdropdownlist               $("#jqxwidget").jqxdropdownlist({                    source: dataadapter,                  displaymember: "teamname",                  valuemember: "teamid",                  selectedindex: 0,                  width: 200,                  height: 25              });                //subscribe select event.              $("#jqxwidget").on('select', function (event) {                  if (event.args) {                      var item = event.args.item;                      if (item) {                          var valueelement = $("<div></div>");                          valueelement.text("value: " + item.value);                          var labelelement = $("<div></div>");                          labelelement.text("label: " + item.label);                          $("#selectionlog").children().remove();                          $("#selectionlog").append(labelelement);                          $("#selectionlog").append(valueelement);                      }                  }              });            });        </script>    </asp:content>  <asp:content id="content2" contentplaceholderid="maincontent" runat="server">  <div id='jqxwidget'>          </div>        <%--  <div style="font-size: 12px; font-family: verdana;" id="selectionlog">          </div>--%>  </asp:content>

i think should add [scriptmethod(usehttpget = true, responseformat = responseformat.json)] above loadteam method , method's result should like:

 return new javascriptserializer().deserializeobject(teaminformation); 

hope helps.