如果在SmarGrid控件中创建DropDownList列。

在SmartGrid的实际使用中，如果需要用户输入的数据是固定几项的，那么最好把这个列做成DropDownListColumn列，一是方便用户快速输入数据，二是避免用户手动输入错误的信息。那么我们如何在SmartGrid中绑定DropDownListColumn列呢？

从DropDownListColumn列的类名我们就可以看出来，这一列的表现形式是与DropDownList一样的。DropDonwList有两个主要的属性，一个是Text，一个Value，Text值主要用来显示给用户看，而Value主要用来存储实际的值。比如一个用来存储地区的DropDownList控件，显示值有”长沙”,”深圳”,”北京”，而这三个地区在数据库中可能只是存储它们的编码”001”,”002”,”003”，那么我们就是用ListItem将它们组合起来。

同样，DropDownListColumn列也需要另一个列来配合存储该列的实际的值，当然，如果你的DropDownListColumn的显示值与实际值是一样的，就可以不需要另一个列来存储值了。

下面我们来做一个具体的实例：
SmartGrid列即可以在aspx页添加，也可以在cs页，通过后台代码添加，本实例我们主要讲解在cs页用后台程序的方法添加.在aspx页添加的方式就一下带过去了，如下面代码：

<SmartWeb:SmartGrid ID="grid" runat="server" AllowAdd="False" AllowDelete="True" DataKeyField="ID" >
    <Columns >
        <SmartWeb:DropDownListColumn ColumnName="address" HeaderText="地区" EditMode="Embedding"
            EditorClientScriptUrl="http://www.cnblogs.com/htc/droplist.htc" ExtendedProperties="<?xml version='1.0'? ><Info  valueColumn=addressvalue/ >" / >   
    </Columns >
</SmartWeb:SmartGrid >

主要我们从后台添加，如下代码：

//声明一个DropDownListColumn列
SmartGridColumn col == new DropDownListColumn();

//将该列添加到SmartGrid中,grid为SmartGrid的ID。
this.grid.Columns.Add(col);
col.ColumnName = "address";
col.HeaderText = "地址";

//设置该列的htc文件，htc是SmartGrid中一个非常重要的文件，我们很多的功能都是在htc文件中
col.EditorClientScriptUrl = "htc/Mydropdownlist.htc";

//下句代码中valueColumn属性设置用来存储该列的实际值的列，我们在取下拉列的实际值时，就要取valueColumn设置的列的值
col.ExtendedProperties = "<?xml version='1.0'? ><Info valueColumn=addressvalue/ >";

//初始化该列的下拉框
DropDownList l = col.ControlEditor as DropDownList;
l.Items.Add(new ListItem("长沙","001"));
l.Items.Add(new ListItem("深圳","002"));
l.Items.Add(new ListItem("北京","003"));

//初始化addressvalue列
SmartGridColumn col = col = new SmartGridColumn();
this.grid.Columns.Add(col);
col.HeaderText = "地区编号";
col.ColumnName = "addressvalue";
col.Visible = false;//把这一列隐藏改起来，不让用户看到

这样，我们就把一个DropDownListColumn列初始化好并添加到SmartGrid中了。但这时的address值并不能和addressvalue联动起来。还需要htc文件支持。下面我们看看htc文件：

<script language="javascript" >//列表框一般有两个值，一个是Text，一个是value。valColumn指明存储选择的value的Grid列
var valColumn = null;
var extendedProp = element.extendedProperties;
if(typeof(extendedProp) != "undefined")
{
var dom = new ActiveXObject("MSXML.DOMDocument");
dom.loadXML(extendedProp);

valColumn = dom.documentElement.getAttribute("valueColumn");
}
//当离开编辑时，根据编辑器的内容给相关的单元格赋值
function getValue()
{
var r = grid.row;
var val = element.options[element.selectedIndex].value;

//如果有储存value的列，则将当前选择项的值放到该列中
if(valColumn != null)
{
grid.setCellValue(r,valColumn,val) ;
}

return element.options[element.selectedIndex].text;
}

//当进入编辑时，根据当前单元格的内容，给编辑器赋值
function setValue(vVal)
{
var r = grid.row;
var val = vVal;

//如果有储存value的列，则从该单元格取值
if(valColumn != null)
{
   val = grid.getCellValue(r,valColumn);
}

var options = element.options;
var length = options.length;
for(var i=0;i<length;i++)
{
var option = options[i];
if(option.value == val)
{
    option.selected = true;
    return;
}
}
}
</script >

从上面代码中可以看出来，在htc中，使用了SmartGrid的getCellValue与setCellValue方法，将两列的值真正的联动起来了。