Kendo Grille de défilement Horizontal et de la colonne de dimensionnement

Par défaut, kendo grilles de s'étendre à remplir leurs div contenant. C'est juste un élément de tableau, donc par nature.

<table role="grid">
<colgroup>
<col style="width:200px"> //etc
<colgroup>
<thread>
//content
</thread>
</table>

Toutefois, lorsque vous ajoutez plusieurs cols (ou a eu trop nombreux), à plus grande échelle et en arrière pour ajustement. Je voulais barres de défilement horizontale sur le dépassement.

Pour ce faire, j'ai ajouté un peu de code qui a couru sur démarrer, ajouter et réorganiser.

  this._initWidths = function () {
     var totalWidth = 0;
     for (var i = 0; i < grid.columns.length; i++) {
        var width = grid.columns[i].width;
        $('#myGrid .k-grid-header-wrap colgroup col').eq(i).css('width', width + 'px');
        $('#myGrid .k-grid-content colgroup col').eq(i).css('width', width + 'px');
        totalWidth = totalWidth + width;
     }
     table.css('width', totalWidth + 'px');
  };

Cependant Kendo semble avoir sa propre logique qui se cogne contre cette. Colgroup les inscriptions vont commencer à être supprimé, gâcher tout.

Est-ce que je peux faire pour arrêter cela? Est-il une meilleure façon de faire ce que je veux?

Grâce.

OriginalL'auteur Tim | 2013-01-16

  1. 8

    J'ai un récipient pour la table:

    <div id="myWindow">
    <div id="myGrid"></div>
</div>

    et appliqué les styles suivants:

    #myWindow {
    width: 400px;
    overflow-x: scroll;
}

    où vous pouvez voir que j'ai de la force de la largeur de 400px et cacher (et défilez) ce qui déborde.

    Puis-je définir le suivant grid:

    var grid = $("#myGrid").kendoGrid({
    dataSource : {
        data    : entries,
        schema  : {
            model: {
                id: "city"
            }
        },
        pageSize: 5
    },
    columns    : [
        { field: "city", title: "City", width: 100 },
        { field: "time", title: "Time", format: "{0:HH:mm}", width: 200},
        { field: "datetime", title: "Date - Time", format: "{0:yyyy-MM-dd HH:mm}", width: 300 }
    ],
    sortable   : {
        mode       : "single",
        allowUnsort: false,
        field      : "city"
    },
    editable   : "popup",
    navigatable: true,
    pageable   : true
}).data("kendoGrid");

    - Je obtenir l'effet que la grille des débordements horizontalement la taille de son conteneur.

    Voir fonctionner ici

    NOTE Ce que c'est beau, c'est que paging reste 400px raccord toujours dans la zone visible, alors que la grille est en fait 100 + 200 + 300 = 600 (le width de la columns)

    EDIT: Si vous voulez le width de la grid être le même de la somme de la columns ensuite, vous devez ajouter (après l'initialisation de la grille).

    var totalWidth = 0;
for (var i = 0; i < grid.columns.length; i++) {
  var width = grid.columns[i].width;
  totalWidth = totalWidth + width;
}
grid.element.css('width', totalWidth + 'px');

    La boucle calcule la largeur totale et puis j'ai mis la table (pas besoin de changer les colonnes dans la mesure où ils sont corrects).

    Définir ici

    Ok merci c'est la moitié de ce que je voulais. Comment puis-je empêcher de kendo de l'expansion pour remplir l'espace si les largeurs de colonne sont très court? Dire que vous avez laissé tomber de Temps à 50, et datetime pour 100. Kendo serait de les élargir. Comment puis-je arrêter? Merci encore.
    S'il vous plaît, voir la MODIFIER en gros est ce que vous faisiez dans votre for boucle, mais un peu simplifié.
    Faites moi savoir si ça ne fonctionne pas!
    Ah désolé de ne pas répondre. J'ai fini par écrire quelque chose de semblable. Toutefois modifier l'élément de grille comme ça va paraître étrange. Au lieu de cela, j'ai changé le tableau... à la grille.table.css('width', totalWidth + 'px'); et puis le thead. Marqué comme réponse, mais, depuis cette est proche.

    OriginalL'auteur OnaBai

  2. 9

    Vous avez juste besoin de s'assurer de la Grille est défilement et de régler la largeur de l'élément à partir duquel vous créez la Grille.

    <div id="myGrid" style='width:500px;'></div>

var grid = $("#myGrid").kendoGrid({
    scrollable:true,
    //...
})

    Ici il est en action.

    N'est pas true la valeur par défaut pour scrollable? Pourquoi avez-vous l'inclure en tant que partie de la réponse? Dans votre réponse, la seule chose importante est de définir la largeur de la div qui contient la table.
    Un rapide coup d'œil au Kendo docs donne une abondance de cette mise en garde concernant scrollable: "par défaut, sauf pour le widget MVC wrapper". C'est un bon rappel pour ne pas toujours compter sur les valeurs par défaut, et, ce qui est le mal dans l'établissement de cette explicitement dans la réponse de toute façon?
    mon commentaire était à cause de l'initialisation quelque chose pour les valeurs par défaut ne doit pas résoudre le problème. Si le problème est résolu est en fait à cause de quelque chose d'autre. Dans ce cas, qu'est-ce résolu le problème a été en utilisant un " div " pour contenant de la grille quelque chose que ma réponse précédente (dans le temps) déjà inclus.

    OriginalL'auteur Petur Subev