Listed Links in Grid Column

Rachel Hagerman: Listed Links in Grid Column

by manoj

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<script src="https://rawgithub.com/uber-rob/kendo-grid-csv-download/master/kendo.grid.csv.download.js"></script>
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js"></script>
<div id="test-grid" data-role="grid"  data-bind="source: testDataSource" 
         data-columns='[
                { 
					field: "Site",
					title: "Site"
				} , 
				{ 
					title: "Test Links",
					template: kendo.template($("#links-column-template").html())
					
				}
				
            ]'></div>

<script id="links-column-template" type="text/x-kendo-template">
     #for(var i=0;i<LinkList.length;i++) { #
    <a target="_blank" href="#=LinkList[i].Link #">#=LinkList[i].Text #</a>
    # if (i<LinkList.length-1) { #
        <span>,</span>
    #}}#
   </script>

JavaScript

(function () {

    var viewModel = kendo.observable({
        
    // the test data  
    testDataSource: new kendo.data.DataSource({
                schema: { 
					data: function() { 
                        return [{Site: 'Falafel Home', 
                                 LinkList: [ {Text: 'Home', Link:'http://falafel.com'},
                                            {Text: 'Team', Link:'http://falafel.com/company/team'},
                                            {Text: 'Blog', Link:'http://blog.falafel.com/'},
                                            {Text: 'Training', Link:'http://falafel.com/training'}
                                           ]},
                               {Site: 'Kendo UI Demos', 
                                 LinkList: [ {Text: 'Grid', Link:'http://demos.telerik.com/kendo-ui/grid/index'},
                                            {Text: 'Scheduler', Link:'http://demos.telerik.com/kendo-ui/scheduler/index'}
                                           ]}]
					},			
				},
            }),
        
      
    })
    // Kendo MVVM binding    
    kendo.bind('body', viewModel);

})()