关于Infragistics.WebUI.UltraWebGrid按钮的使用

在使用Infragistics.WebUI.UltraWebGrid的过程中，很多时候我们可能也要向Microsoft的GridView控件一样，添加一些如添加该行，

删除该行的按钮，初次使用Infragistics.WebUI.UltraWebGrid控件的朋友，可能会摸索一段时间，因此写出来供朋友们参考参考，少浪费

些时间，就可以玩玩cs之类的，

先看一下效果：

点击右边的+号，可以添加行，点击—号，可以删除行，是不是很方便？

如何做到的呢，有些关键的地方，自己找起来还是很麻烦的，参考一下吧

在服务器端添加：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->UltraWebGrid1.DisplayLayout.AllowAddNewDefault=Infragistics.WebUI.UltraWebGrid.AllowAddNew.Yes;
UltraWebGrid1.DisplayLayout.AllowDeleteDefault=AllowDelete.Yes;
UltraWebGrid1.DisplayLayout.AddNewBox.Hidden=true;

分别是允许添加，允许删除，并且把Infragistics.WebUI.UltraWebGrid自定义的AddNewBox去掉。当然这些也

可以在客户端或它的xml样式文件中定义。

在服务器端添加两列

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->//添加按钮列
UltraGridColumnaddCol=newUltraGridColumn();
addCol.Header.Caption="";
addCol.Width=Unit.Parse("30");
addCol.CellStyle.HorizontalAlign=HorizontalAlign.Center;
addCol.Type=ColumnType.Button;
addCol.CellButtonStyle.CssClass="addButton";
addCol.Key="Add";
addCol.CellButtonDisplay=CellButtonDisplay.Always;
UltraWebGrid1.Bands[0].Columns.Add(addCol);
//删除按钮列
UltraGridColumndelCol=newUltraGridColumn();
delCol.Header.Caption="";
delCol.Width=Unit.Parse("30");
delCol.CellStyle.HorizontalAlign=HorizontalAlign.Center;
delCol.Type=ColumnType.Button;
delCol.CellButtonStyle.CssClass="delButton";
delCol.Key="Del";
delCol.CellButtonDisplay=CellButtonDisplay.Always;
UltraWebGrid1.Bands[0].Columns.Add(delCol);

有两点是需要注意的，delCol.Type = ColumnType.Button;该列的类型要设定为按钮类型，

其次delCol.CellButtonDisplay = CellButtonDisplay.Always;该按钮要设定为一直显示，否则只有鼠标划过才显示。（郁闷吧，Infragistics.WebUI.UltraWebGrid就是这样的。）

然后是添加客户端的代码了，首先添加css

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->.addButton
{
background-position:center;
background-image:url(http://images.cnblogs.com/webgrid/add.gif);
background-repeat:no-repeat;
background-color:#ffffff;
border:0;
}
.delButton
{
background-position:center;
background-image:url(http://images.cnblogs.com/webgrid/del.gif);
background-repeat:no-repeat;
background-color:#ffffff;
border:0;

}

添加js代码

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->//按钮列单击后
functionAfterClickCellButtonHandler(gridName,cellId)
{
varoCell=igtbl_getCellById(cellId);
switch(oCell.Column.Key)
{
case"Add":
InsertRow();
break;
case"Del":
DeleteRow();
break;
}
}

functionInsertRow()
{
CurrentGrid=igtbl_getGridById(UltraWebGrid1);
CurrentGrid.Rows.addNew();
}

functionDeleteRow()
{
varrow=igtbl_getActiveRow(UltraWebGrid1);
CurrentRow=row;

if(row!=null)
{
varId=row.getCell(0).getValue();
if(id==null)
{
row.deleteRow();//新增行直接删除
return;
}
else
//Ajax删除原来就有的行
}

当然做到上面这几点，基本可以出来了。不过可能还有一些细小的问题，欢迎交流啊。