0

私はケンドウイに取り組んでいます。グリッドを観察すると、すべての値が各セルの左側にあります。価格のフィールドがあり、その値をセルの右側に配置したいと思います。

剣道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>
4

1 に答える 1

1

列テンプレートを使用して、その列のすべてのセルの内容を、たとえばdiv-tagでラップできます。次に、divのクラスを使用して、CSSを使用してコンテンツのスタイルを設定できます。

例えば：

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

/* CSS */
.foobar {
    width: 100%;
    text-align: right;
}
于 2012-08-14T08:04:40.330 に答える