单元格的值向右侧移动

Question

我正在研究kendoui。如果我们观察一个网格，那么所有的值都在每个单元格的左侧。我有一个价格领域，我希望它的值在单元格的右侧。

kendo ui有可能吗？

我的代码： -

<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

您可以使用一列模板包裹所有单元格的内容在该列中，例如一个div标签。 然后，您可以使用div上的类来使用CSS来设置内容的样式。

例如：

columns: 
[{ 
    field:"Department", 
    title:"Department", 
    width:80, 
    template: "<div class='foobar'>#= Department#</div>" 
}] 

/* CSS */ 
.foobar { 
    width: 100%; 
    text-align: right; 
}