Conditional Command Options in Grid Column

Rachel Hagerman: Conditional Command Options 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: "Action",
					template: kendo.template($("#conditional-action-template").html())
					
				}
				
            ]'></div>

<div id="log"></div>

<script id="conditional-action-template" type="text/x-kendo-template">
    # if(FirstActionEnabled) { #
    <div class='action circle' data-bind="click: firstActionClick"></div>
    # } #
    # if(SecondActionEnabled) { #
    <div class='action square' data-bind="click: secondActionClick"></div>
    # } #
</script>

CSS

.action{
    display: inline-block;
    float: left;
    margin: 0px 5px;
    cursor: pointer;
    width: 20px;
	height: 20px; 
}

.circle {
	border-radius: 50%;
    background-color: green;
    
}

.square {
    background-color: red;
}

#log {
    background-color: #eee;
    margin: 20px 0;
}

JavaScript

(function () {

    var log = (function (el) {
        return function (text) {
            el.html(el.html() + '<br/>' + text);
        };
    })($('#log'));
    
    var viewModel = kendo.observable({
        
    // the test data  
    testDataSource: new kendo.data.DataSource({
                schema: { 
					data: function() { 
                        return [{Site: 'Falafel Home', 
                                 FirstActionEnabled: true, SecondActionEnabled: false},
                               {Site: 'Kendo UI Demos', 
                                 FirstActionEnabled: false, SecondActionEnabled: true},
                               {Site: 'Telerik Home', 
                                 FirstActionEnabled: true, SecondActionEnabled: true}]
					},			
				},
            }),
        firstActionClick: function(item){
            log('First action selected for ' + item.data.Site)
        },
        secondActionClick: function(item){
            log('Second action selected ' + item.data.Site)
        }
      
    })
    // Kendo MVVM binding    
    kendo.bind('body', viewModel);

})()