Ajax.Data.Controls.GridView でドロップダウンリスト

<input type="button" id="cmdSearchUserList" value="検索" onclick="searchUserList()" /><AjaxData:GridView ID="UserList" runat="server" RowDataBoundEvent="UserListRowBound">

<Columns>

    <AjaxData:GridViewBoundColumn DataField="id" />

    <AjaxData:GridViewBoundColumn DataField="name" />

    <AjaxData:GridViewTemplateColumn>

        <ItemTemplate>

            <asp:DropDownList ID="sex" runat="server"  >

                <asp:ListItem Text="男" Value="M" />

                <asp:ListItem Text="女" value="F" />

                <asp:ListItem Text="？" Value="?" />

            </asp:DropDownList>

        </ItemTemplate>

    </AjaxData:GridViewTemplateColumn> 

</Columns>

</AjaxData:GridView>

<script type="text/javascript">

function searchUserList() {

    var dataSource = 

          [ 

            { id: "Fujiwo", name: "小島", sex:"M" },

            { id: "Hara", name: "原", sex:"M" },

            { id: "Moo", name: "高須", sex:"M" },

            { id: "???", name: "？？", sex:"?" }

          ];

          

    var grid = $find("UserList");

    var columns = grid.get_columns();

    grid.set_dataSource(dataSource);

    grid.dataBind();

}
 

function UserListRowBound(sender, e) {

    var row = e.get_row();

    if (! row.get_isDataRowType()) {

        return;

    }

    

    var rowData = row.get_dataItem();

    var sexList = row.findControl("sex");

    for (var colIndex = 0; colIndex < sexList.length; colIndex++) {

        sexList[colIndex].selected = (sexList[colIndex].value == rowData.sex);

    }

}
</script>