igGrid with links

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<table id="grid"></table>

JavaScript

$(function () {
            var adventureWorks = [
            { ProductID: 1, Name: "Laptop", ProductNumber: "LAP-001", MakeFlag: true, Website: "https://example.com/laptop" },
            { ProductID: 2, Name: "Phone", ProductNumber: "PHN-002", MakeFlag: false, Website: "https://example.com/phone" },
            { ProductID: 3, Name: "Tablet", ProductNumber: "TAB-003", MakeFlag: true, Website: "https://example.com/tablet" }
        ];

        // Formatter function to convert URLs into clickable links
        function HyperlinkFormatter(value) {
            if (!value) return "";
            return '<a href="' + value + '" target="_blank">' + value + '</a>';
        }

        // Initialize the igGrid
        $(function () {
            $("#grid").igGrid({
                autoGenerateColumns: false,
                width: "100%",
                height: "400px",
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number", width: "10%" },
                    { headerText: "Product Name", key: "Name", dataType: "string", width: "30%" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "25%" },
                    { headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "10%" },
                    { headerText: "Website", key: "Website", dataType: "string", width: "25%", formatter: HyperlinkFormatter, unencoded: true }
                ],
                dataSource: adventureWorks
            });
        });
});