Kendo Grille - barre de Défilement Horizontale n'apparaît pas quand il n'y a pas de données

J'ai un Kendo UI Grille comme indiqué ci-dessous. La barre de défilement horizontale apparaît quand il y a des enregistrements. Mais il ne s'affiche pas lorsqu'il n'y a pas d'enregistrements. Comment apporter de la barre de défilement, même si il n'y a pas d'enregistrements.

Grille

     <div class="GridSearch">

     @(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.TransactionHistoryModel>()
    .Name("TransactionHistroyGrid")
     .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.UserId);
            model.Field(p => p.Comment).Editable(true);
        })

        .PageSize(25)
        .ServerOperation(true)
        .Read(read => read
            .Action("TransactionHistorySearch_Read", "Home")
            .Data("additionalData")
            )
     )
    .Columns(columns =>
    {

        columns.Command(c => c.Custom("Edit").Click("editDetails")).HeaderTemplate("Action").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(90);
        columns.Command(c => { c.Custom("Save").Click("saveDetails"); c.Custom("Cancel").Click("cancelDetails"); }).Hidden();
        columns.Bound(p => p.UserId).Filterable(false).Title("UserID").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(90);
        columns.Bound(p => p.Status).Filterable(false).Title("Status").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(70);
        columns.Bound(p => p.Reviewed).HeaderHtmlAttributes(new { style = "text-align: center;" }).Template(@<text></text>).ClientTemplate("<input id='checkbox'  class='chkbx' type='checkbox' disabled='disabled' />").Filterable(false).Title("Reviewed").Width(80);
        columns.Bound(p => p.ProjectCaseNumber).Filterable(false).Title("Project Case #").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(100);
        columns.Bound(p => p.CostPage).Filterable(false).Title("CP Page #").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(90);
        columns.Bound(p => p.ItemID).Filterable(false).Title("Item ID #").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(90);
        columns.Bound(p => p.TypeOfChange).Filterable(false).Title("Type of Change").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(100);
        columns.Bound(p => p.ChangeDescription).Filterable(false).Title("Change Description").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(120);
        columns.Bound(p => p.CreatedOnEnd).Format("{0:MM/dd/yyyy}").Filterable(false).Title("Created On").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(85);
        columns.Bound(p => p.UpdatedOnEnd).Format("{0:MM/dd/yyyy}").Filterable(false).Title("Updated On").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(85);
        columns.Bound(p => p.Comment).Filterable(false).Title("Comment").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(140);
        columns.Bound(p => p.Id).Hidden();

        currentIndex++;
    })
    .Pageable()
    .Sortable(sorting => sorting.AllowUnsort(false))
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
    .Filterable()
    .HtmlAttributes(new { style = "height:325px;" }).Events(e => e.DataBound("onRowDataBound"))

)
  </div>

CSS

.GridSearch {
    float: left;
    width: 960px;
    height: 325px;
    padding: 2px 0 20px 0px;
    clear:left;
}

Résultat

Kendo Grille - barre de Défilement Horizontale n'apparaît pas quand il n'y a pas de données

OriginalL'auteur Lijo | 2013-10-04

Veuillez essayer avec le code ci-dessous un extrait. Veuillez ajouter ci-dessous les OndataBound événement dans votre grille.

function onDataBound(arg) {
    if (arg.sender._data.length == 0) {
        var contentDiv = this.wrapper.children(".k-grid-content"),
        dataTable = contentDiv.children("table");
        if (!dataTable.find("tr").length) {
            dataTable.children("tbody").append("<tr colspan='" + this.columns.length + "'><td> </td></tr>");
            if ($.browser.msie) {
                dataTable.width(this.wrapper.children(".k-grid-header").find("table").width());
                contentDiv.scrollLeft(1);
            }
        }
    }
}

function dataBound(e) {
if (this.dataSource.view().length == 0) {
  //insert empty row
  var colspan = this.thead.find("th").length;
  var emptyRow = "<tr><td colspan='" + colspan + "'></td></tr>";
  this.tbody.html(emptyRow);

  //workarounds for IE lt 9
  this.table.width(800);
  $(".k-grid-content").height(2 * kendo.support.scrollbar());
}
}

OriginalL'auteur Jayesh Goyani

3

Essayez d'ajouter cette CSS à la force de la barre de défilement horizontale pour être activé tout le temps:
```
.k-grid-content {
    overflow-x: scroll;
}
```
Alors que qui affiche la barre de défilement, la barre de défilement ne peut pas être utilisé car il n'a pas les bonnes informations de largeur.

OriginalL'auteur CodingWithSpike
2

J'ai utilisé noRecords: véritable option, et d'autres solutions ne fonctionne pas pour moi (étiquette apparaît pas dans la grille-conteneur, mais ci-dessous).

Ont trouvé d'autres solution - régler la largeur de noRecords étiquette thru kendo modèles égale à la largeur de la grille:
```
    noRecords: {
        template: '<div style="width: #=this.table.width()#px">No records found.</div>'
    },
```
il a des effets secondaires - étiquettes largeur habitude de change de façon dynamique lors de la largeur de la grille est modifiée

Cela fonctionne pour moi, et j'aime cette solution la mieux de toute façon, je me sens comme il devrait toujours être un message lorsqu'il n'existe aucun enregistrement, de sorte que l'utilisateur sait qu'il ou elle n'est pas juste de voir d'écrasement de la grille.

OriginalL'auteur MarkosyanArtur
-1

Utilisez le code suivant. Il fonctionne comme un charme 🙂
```
$('.k-grid-header, .k-grid-content').wrapAll('<div class="grid-wrapper" style="overflow: scroll" />'); 
```
Ce n'est répondre à la question - la barre de défilement n' semble, mais il est grisé et vous ne pouvez pas l'utiliser pour faire défiler.

OriginalL'auteur Aniket

Vous devez vous connecter pour publier un commentaire.