Search code examples
jsonalloy-ui

Display link in Alloy UI Data Table


I want to add hyperlink in the alloy ui data table. Below is my code.

<head>
    <link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
    <script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
    <script>
        YUI().use(
          'aui-datatable',
          function(Y) {
            var columns = ['name', 'address', 'city', 'state','edit'];

            var data = [
              {address: '1236 Some Street', city: 'San Francisco', name: 'John A. Smith', state: 'CA', edit:'<a href="www.google.com">Google</a>'},
              {address: '3271 Another Ave', city: 'New York', name: 'Joan B. Jones', state: 'NY', edit:'<a href="www.google.com">Google</a>'},
              {address: '9996 Random Road', city: 'Los Angeles', name: 'Bob C. Uncle', state: 'CA', edit:'<a href="www.google.com">Google</a>'},
              {address: '1623 Some Street', city: 'San Francisco', name: 'John D. Smith', state: 'CA', edit:'<a href="www.google.com">Google</a>'},
              {address: '9899 Random Road', city: 'Los Angeles', name: 'Bob F. Uncle', state: 'CA', edit:'<a href="www.google.com">Google</a>'}
            ];

            new Y.DataTable.Base(
              {
                columnset: columns,
                recordset: data
              }
            ).render('#myDataTable');
          }
        );
    </script>
</head>
<body>
    <div id="myDataTable"></div>
</body>

During display it is showing html as a string. how could I display it as a hyperlink ?

I think we cannot add markup tag in JSON but is there any chance to get my work done. Any help would be appreciated...!!


Solution

  • I think you can adjust your column definition to accommodate the link.

    Say if you want to have a link on the values under the column edit, you will have to define it as:

    var columns = [
        'name', 
        'address', 
        'city', 
        'state',
        {
            key: 'edit',
            allowHTML: true // Must be set or the html will be escaped
        }
    ];
    

    However I have not tested this. You can find more information about Datatable Formatters here.