jQuery Girl
  1. jQuery Girl
  3. Problème d’affichage / masquage des colonnes de la grid de Kendo avec plus de 80 colonnes
Intereting Posts
Écoute des rangées de tableau ajoutées Différence entre les fonctions .load () et .ajax () dans Jquery Effectuer une recherche AJAX une seconde après plusieurs événements de frappe Recevoir un fichier .csv sous forme de données dans la fonction de réussite ajax Comment revenir au haut de la page en cliquant sur un bouton? Comment sélectionner uniquement du texte en dehors d’une balise dans jQuery Alerte apparaissant même si aucune sélection n’est faite dans le tableau jQuery validation plugin plusieurs adresses e-mail Google Dev Tools arrête l’exécution quand / où aucun point d’arrêt n’est défini stocker les valeurs du lien cliqué dans une entrée masquée pour publication Comment gérer les téléchargements d’images avec jquery post submit BlockUI force tous les éléments à se centrer Comment supprimer un document.onkeydown eventhandler? Jquery Ajax post pour mettre à jour les sessions django dans les vues jQuery Slick Slider montrant des diapositives vides

Problème d’affichage / masquage des colonnes de la grid de Kendo avec plus de 80 colonnes

J’ai une grid de kendo avec environ 80 colonnes. Basé sur une logique, je cache / montre des colonnes. Les 20 premières colonnes sont statiques et le repos 60 dépend du nombre d’employés (par exemple: – si 20 employés, 20 colonnes seulement sont affichées). Par sourde, toutes ces 60 colonnes sont masquées. Mais lorsque vous chargez les données de plus de 40 employés dans le navigateur de grid, cela indique que vous ne répondez pas. c’est-à-dire qu’il faut du temps pour afficher / masquer une colonne.

S’il vous plaît vérifier mon code pour le chargement des données 

$.ajax({ type: "POST", url: '@Url.Action("GetData", "Employees")', dataType: "json", data: param, success: function (response) { if (response != null) { var empList = response.Employees; grid.dataSource.data([]); grid.dataSource.data(response.Items); //To change the name header and hide/show crew name column if (empList != null) { var listIndex = 0; $('#grdEmployees th[coltype]').each(function (i) { if ($(this).data().title == "HideColumn") { var dataField = "Crew" + (listIndex + 1); $("#grdEmployees thead [data-field=" + dataField + "] .k-link").html(empList[listIndex].Name.toSsortingng()); if (empList[listIndex].Name.toSsortingng() == "HideColumn") { $('#grdEmployees').data("kendoGrid").hideColumn(dataField); } else { $('#grdEmployees').data("kendoGrid").showColumn(dataField); } listIndex++; } }); } } }, error: function (err) { console.log(JSON.ssortingngify(err)); } });

S’il vous plaît laissez-moi savoir toute solution alternative pour faire la même chose.

J’ai résolu ce problème. Cela prenait du temps lorsque nous hideColumn() et showColumn() de la grid de kendo. Je viens donc de le remplacer par les méthodes normales hide() et show() jQuery.

Vérifiez ci-dessous le code

J’ai remplacé 

 if (empList[listIndex].Name.toSsortingng() == "HideColumn") { $('#grdEmployees').data("kendoGrid").hideColumn(dataField); } else { $('#grdEmployees').data("kendoGrid").showColumn(dataField); }

avec 

 var colIdx = $(this).index() + 1; if (crewNameList[listIndex].Name.toSsortingng() == "HideColumn") { $("#grdEmployees table th:nth-child(" + colIdx + "),td:nth-child(" + (colIdx) + "),col:nth-child(" + (colIdx-1) + ")").hide(); } else { $("#grdEmployees table th:nth-child(" + (colIdx) + "),td:nth-child(" + (colIdx) + "),col:nth-child(" + (colIdx-1) + ")").show(); }

Cela vous sera utile.