Shifting of cell's value to right side - kendo-ui

Question

I'm working on kendoui. If we observe a grid then all the values are on the left side of each cell.I have a field of price and i want its value on the right side of cell.
Is it possible in kendo ui?
My code :-
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = ${grailsApplication.config.grails.serverURL}"+/course/,
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl+"listAll", dataType: "json",
cache: false
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models:
kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 15,
sort: { field: "dateCreated", dir: "desc" },
schema: {
model: {
id: "id",
fields: {
name: { editable: false, type: "string", validation: { required:
true, min: 1} },
type: { editable: false, type: "Type",validation: { required: true, min: 1}
},
fee: { editable: false, type: "double",validation: { required: true, min: 1}
},
duration: { editable: false, type: "integer", validation: { required: true, min: 1} },
status: { editable: false, type:"Status" , validation: { required: true, min: 1} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
groupable:true,
sortable:true,
selectable:true,
height: 300,
columns: [
{field: "name",
title:'<g:message code="grid.billingServicesGroup.holidayName.label"
default="Course Name" />'},
{field: "type.name",
title:'<g:message code="grid.billingServicesGroup.reason.label"
default="Type of course" />'},
{field: "fee",title:'<g:message
code="grid.billingServicesGroup.code.label"
default="Fee" />'},
{field: "duration",title:'
<g:message code="grid.billingServicesGroup.holidayDate.label"
default="Duration(Year)" />'}
,
{field: "status.name",title:'<g:message
code="grid.billingServicesGroup.status.label" default="Status" />'},
],
editable: true,
change:function(e){
idOfData=this.select().data("id");
window.location.href=crudServiceBaseUrl+"show/"+idOfData;
},
saveChanges:function(){
},
remove:function(e){
/*alert(e.model.id.value);
selectedId=this.select().data("id");
$.ajax({
url:"http://localhost:8080/billing-
app/api/skeletonBill/"+selectedId,
type:"DELETE"
}).done(function(){alert('deleted')});*/
},
scrollable: {
virtual: true
}
});
});
</script>

Answer 1

You can use a column template to wrap the contents of all the cells in that column in for example a div-tag.
You can then use a class on the div to style the contents using CSS.
For example:
columns:
[{
field:"Department",
title:"Department",
width:80,
template: "<div class='foobar'>#= Department#</div>"
}]
/* CSS */
.foobar {
width: 100%;
text-align: right;
}