web-dev-qa-db-fra.com

Comment envelopper la colonne de grille de Kendo

Les colonnes de Kendo Grid sont données ci-dessous. Après que la colonne de l’écran de zoom soit masquée, je veux boucler la colonne. Pouvons-nous le faire en donnant quelques informations sur gridColumns. S'il vous plaît dites-moi. Je ne suis pas capable de le trouver. Ici, les détails de votre profession deviennent cachés. Voici quelques champs supplémentaires, je n’en ai donné que trois ici.

 gridColumns: [
            {
                title: 'FirstName',
                field: 'FirstName',
                width: '0', hidden: true
            },
            {
                title: 'FirstName',
                field: 'FirstName',
                width: '250px'
            },
            {
                title: 'Your Occupation Details',
                field: 'OccupationDetails',
                width: '100',
            }]
kendo-uikendo-grid
16
user1078749

Utilisez headerAttributes pour encapsuler les noms de colonne longs dans la déclaration de colonnes JS comme suit.

columns: [
{
  title: 'Your Occupation Details',
  field: 'OccupationDetails',
  width: '100',
  headerAttributes: { style: "white-space: normal"}
},
...
]

Vous pouvez également utiliser HeaderHtmlAttributes dans Columns pour les grilles fortement typées.

columns.Bound(p => p.OccupationDetails).HeaderHtmlAttributes(
    new { style = "white-space: normal" }
);

Une documentation complémentaire est disponible sur le forum officiel de Telerik Header Wraping/Height et Comment insérer une colonne de grille de kendo

20
Mahib

Vous pouvez définir les propriétés CSS de la grille pour activer le retour à la ligne.

.k-grid-header .k-header {
    overflow: visible;
    white-space: normal;
}

Consultez cette documentation pour définir les attributs d’en-tête de colonne.

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

16
IceMan

Cela a fonctionné pour moi 

.k-grille .k-grille-en-tête .k-en-tête .k-link { hauteur: auto; }

.k-grid .k-grid-header .k-header { espace blanc: normal; }

source: http://www.telerik.com/forums/header-wrapping-height

3
mxasim

Pour en-tête:

.k-grid .k-grid-header .k-header .k-link { height: auto; }

.k-grid .k-grid-header .k-header { white-space: normal; }

Pour envelopper les lignes:

td[role="gridcell"] { white-space: nowrap; }
1
Ricardo França

Vous pouvez l'ajouter à votre CSS personnalisé si vous avez besoin du texte de chaîne de l'en-tête de colonne d'une grille spécifique. Cela a fonctionné pour moi.

#yourgrid .k-grid-header  .k-header .k-link {
    white-space: normal !important; 
}
0
Eugene Jr Subrado
<style>
   .k-grid .k-grid-header .k-header .k-link {
      overflow: visible !important; white-space: normal !important; 
   }
</style>
0
abuumar

Vous pouvez le faire comme:

   k-grid  .k-grid-header  .k-header  .k-link {
    height: auto;
    Word-break:break-all !important;
    Word-wrap:break-Word !important;
}
.k-grid  .k-grid-header  .k-header {
    white-space: normal;
}

Fonctionne parfaitement pour moi.

0
Gopal Sharma