[FlexGrid for ASP.NET MVC] セルにリンクを設定する方法

文書番号 : 81952     文書種別 : 使用方法     登録日 : 2017/01/27     最終更新日 : 2017/01/27
文書を印刷する
対象製品
ComponentOne for ASP.NET MVC
詳細
FlexGridのItemFormatterプロパティを使用して下記のようなコードを実装することにより、セル内の文字列やボタンにリンクを設定できます。

◎サンプルコード(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")
)