如何設置kendo ui網格中的多行列

我需要將kendo ui網格的列設置爲多行。如何設置kendo ui網格中的多行列

現在特定的列中有很多數據，所以它縮短了... 是否有可能使該列多行？

2016-07-05 Marcel Hinderlich

是的，你可以！您可以設置headerAttributes或屬性列中的定義，以指定合併單元格：

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.headerAttributes http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.attributes http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.width

{ 
    field: "Your Field", 
    title: "Your Title", 
    attributes: { "colspan": 2 }, 
    headerAttributes: { "colspan": 2 } 
}

來源

2016-07-05 11:50:07

您可以通過下面的代碼片段設置在劍道UI電網多行列。

<style> 
    .breakWord20 { 
     word-break: break-all !important; 
     word-wrap: break-word !important; 
     vertical-align: top; 
    } 

    .k-grid-header .k-header { 
     overflow: visible !important; 
     white-space: normal !important; 
    } 
</style> 
...... 
...... 
columns: [ 
        { 
         field: "ProductNameProductNameProductNameProductNameProductName", headerAttributes: { 
          "class": "breakWord20" 
         } 
        }, 
....... 
.......

全碼： -

<!DOCTYPE html> 
<html> 
<head> 
    <title>Jayesh Goyani</title> 
    <style> 
     .breakWord20 { 
      word-break: break-all !important; 
      word-wrap: break-word !important; 
      vertical-align: top; 
     } 

     .k-grid-header .k-header { 
      overflow: visible !important; 
      white-space: normal !important; 
     } 
    </style> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" /> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" /> 

    <script src="https://kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script> 

    <script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.ui.core.min.js"></script> 
    <script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script> 
    <!--<script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.timezones.min.js"></script>--> 
</head> 
<body> 
    <div id="grid"></div> 
    <script> 
     $(document).ready(function() { 

      var products = [{ 
       ProductID: 1, 
       ProductNameProductNameProductNameProductNameProductName: "Chai", 
       SupplierID: 1, 
       CategoryID: 1, 
       QuantityPerUnit: "10 boxes x 20 bags", 
       UnitPrice: 18.0000, 
       UnitsInStock: 39, 
       UnitsOnOrder: 0, 
       ReorderLevel: 10, 
       Discontinued: false, 
       Category: { 
        CategoryID: 1, 
        CategoryName: "Beverages", 
        Description: "Soft drinks, coffees, teas, beers, and ales" 
       } 
      }, { 
       ProductID: 2, 
       ProductNameProductNameProductNameProductNameProductName: "Chang", 
       SupplierID: 1, 
       CategoryID: 1, 
       QuantityPerUnit: "24 - 12 oz bottles", 
       UnitPrice: 19.0000, 
       UnitsInStock: 17, 
       UnitsOnOrder: 40, 
       ReorderLevel: 25, 
       Discontinued: false, 
       Category: { 
        CategoryID: 1, 
        CategoryName: "Beverages", 
        Description: "Soft drinks, coffees, teas, beers, and ales" 
       } 
      }, { 
       ProductID: 3, 
       ProductNameProductNameProductNameProductNameProductName: "Aniseed Syrup", 
       SupplierID: 1, 
       CategoryID: 2, 
       QuantityPerUnit: "12 - 550 ml bottles", 
       UnitPrice: 10.0000, 
       UnitsInStock: 13, 
       UnitsOnOrder: 70, 
       ReorderLevel: 25, 
       Discontinued: false, 
       Category: { 
        CategoryID: 2, 
        CategoryName: "Condiments", 
        Description: "Sweet and savory sauces, relishes, spreads, and seasonings" 
       } 
      }, { 
       ProductID: 4, 
       ProductNameProductNameProductNameProductNameProductName: "Chef Anton's Cajun Seasoning", 
       SupplierID: 2, 
       CategoryID: 2, 
       QuantityPerUnit: "48 - 6 oz jars", 
       UnitPrice: 22.0000, 
       UnitsInStock: 53, 
       UnitsOnOrder: 0, 
       ReorderLevel: 0, 
       Discontinued: false, 
       Category: { 
        CategoryID: 2, 
        CategoryName: "Condiments", 
        Description: "Sweet and savory sauces, relishes, spreads, and seasonings" 
       } 
      }, { 
       ProductID: 5, 
       ProductNameProductNameProductNameProductNameProductName: "Chef Anton's Gumbo Mix", 
       SupplierID: 2, 
       CategoryID: 2, 
       QuantityPerUnit: "36 boxes", 
       UnitPrice: 21.3500, 
       UnitsInStock: 0, 
       UnitsOnOrder: 0, 
       ReorderLevel: 0, 
       Discontinued: true, 
       Category: { 
        CategoryID: 2, 
        CategoryName: "Condiments", 
        Description: "Sweet and savory sauces, relishes, spreads, and seasonings" 
       } 
      }]; 

      $("#grid").kendoGrid({ 
       dataSource: { 
        data: products, 
        schema: { 
         model: { 
          id: "ProductID", 
          fields: { 
           ProductID: { type: 'number' }, 
           UnitsInStock: { type: 'number' }, 
           ProductNameProductNameProductNameProductNameProductName: { type: 'string' }, 
           QuantityPerUnit: { type: 'string' }, 
           UnitPrice: { type: 'number' }, 
          } 
         } 
        }, 
       }, 

       resizable: true, 
       columns: [ 
        { 
         field: "ProductNameProductNameProductNameProductNameProductName", headerAttributes: { 
          "class": "breakWord20" 
         } 
        }, 
        { field: "UnitsInStock", title: "UnitsInStock" }, 
        { field: "QuantityPerUnit", title: "QuantityPerUnit" }, 
        { field: "UnitPrice", title: "UnitPrice" }, 
       ] 
      }); 
     }); 
    </script> 
</body> 
</html>

讓我知道如果任何問題。

來源

2016-07-05 12:40:52

我只需要設置列css屬性white-space：normal！important; ...感謝您的詳細解答！ –

如何設置kendo ui網格中的多行列

回答

相關問題