作成日: 2017/01/27 最終更新日: 2017/01/27
文書種別
使用方法
詳細
FlexGridのItemFormatterプロパティを使用して下記のようなコードを実装することにより、セル内の文字列やボタンにリンクを設定できます。
◎サンプルコード(View)
◎サンプルコード(View)
<script type="text/javascript">
function itemFormatter(panel, rowIndex, columnIndex, cell) {
if (panel.cellType == wijmo.grid.CellType.Cell) {
var column = panel.columns[columnIndex];
var dataItem = panel.rows[rowIndex].dataItem;
if (dataItem) {
if (column.header == 'Product Link') {
//文字列にリンクを設定
cell.innerHTML = "<a href=http://c1.grapecity.com target='_blank' >" + dataItem.Product + "</a>";
}
else if (column.header == 'Product Button Link') {
//ボタンにリンクを設定
cell.innerHTML = "<input type='button' onclick='OpenLink()' value='" + dataItem.Product + "'/>";
}
}
}
}
function OpenLink() {
window.open("http://www.google.com");
}
</script>
@(Html.C1().FlexGrid<Sale>()
・・・
.Columns(bl => {
・・・
bl.Add(cb => cb.Binding("Product").Header("Product Link"));
bl.Add(cb => cb.Binding("Product").Header("Product Button Link"));
})
.ItemFormatter("itemFormatter")
)
function itemFormatter(panel, rowIndex, columnIndex, cell) {
if (panel.cellType == wijmo.grid.CellType.Cell) {
var column = panel.columns[columnIndex];
var dataItem = panel.rows[rowIndex].dataItem;
if (dataItem) {
if (column.header == 'Product Link') {
//文字列にリンクを設定
cell.innerHTML = "<a href=http://c1.grapecity.com target='_blank' >" + dataItem.Product + "</a>";
}
else if (column.header == 'Product Button Link') {
//ボタンにリンクを設定
cell.innerHTML = "<input type='button' onclick='OpenLink()' value='" + dataItem.Product + "'/>";
}
}
}
}
function OpenLink() {
window.open("http://www.google.com");
}
</script>
@(Html.C1().FlexGrid<Sale>()
・・・
.Columns(bl => {
・・・
bl.Add(cb => cb.Binding("Product").Header("Product Link"));
bl.Add(cb => cb.Binding("Product").Header("Product Button Link"));
})
.ItemFormatter("itemFormatter")
)
旧文書番号
81952