wrap Kendo grid headers

Rachel Hagerman: wrap Kendo grid headers

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: remoteSource" 
         data-columns='[
                { 
					field: "user.screen_name",
					title: "This is my centered header",
					headerAttributes: { class: "center-header" },
				} , 
				{ 
					field: "text", 
					title: "This is my long header title to test",
                    headerAttributes: { class: "wrap-header" },
				}
            ]'></div>

CSS

.k-grid-header .center-header {
  text-align: center;
}
.k-grid-header .wrap-header {
  height: auto;
  overflow: visible;
  white-space: normal;
}

JavaScript

(function () {

    var viewModel = kendo.observable({
        
    // the remote datasource    
    remoteSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        dataType: "jsonp",
                        url:"http://demos.kendoui.com/service/Twitter/Search?q=kendoui",
                        data: function (response) {
                            return [response];
                        }
                    }
                },
                schema: { 
					data: function(data) { 
						return data.statuses || [];
					},			
				},
            }),
        
      
    })
    // Kendo MVVM binding    
    kendo.bind('body', viewModel);

})()