Включение минимальной ширины в сетке кендо (jQuery), когда сетка имеет скрытые столбцы - PullRequest
Новая
       51

Включение минимальной ширины в сетке кендо (jQuery), когда сетка имеет скрытые столбцы

0 голосов
/ 28 июня 2018

Я пытаюсь применить правило минимальной ширины для изменяемых размеров столбцов в сетке кендо. Я использовал образец, который они предоставили здесь . В их примере отображаются все столбцы. В моем случае есть несколько столбцов, которые скрыты. У меня есть образец здесь , использующий Кендо Dojo, чтобы проиллюстрировать мою проблему. Любой столбец, который идет после скрытого столбца, больше не поддерживает правило минимальной ширины. Лучшее, что я могу понять, это то, что это проблема с jQuery и его взаимодействиями с элементами, для которых установлено значение display:none;.

Если есть обходной путь для принудительного применения минимальной ширины, пожалуйста, дайте мне знать.

Ответы [ 2 ]

0 голосов
/ 16 июля 2018

Я выяснил проблему с этим после возвращения и еще раз взглянуть. Проблема заключается в том, что когда столбец скрыт в сетке кендо, элемент <th> устанавливается на style="display:none;", но элемент <col> фактически удаляется. Это означает, что количество элементов <th> не соответствует количеству элементов <col>, поэтому значение индекса для <col> отключается при установке ширины. Чтобы получить правильный индекс, вы должны получить индекс элемента <th> в подмножестве :visible всех элементов <th>.

0 голосов
/ 28 июня 2018

Я, кажется, решил вашу проблему, двигаясь туда, где вы прячете столбец.

взгляните на https://dojo.telerik.com/ozuGilOy/11 

$(function(){

        $("#grid").kendoGrid({
          columns: [
            { field: "foo", minResizableWidth: 100 },               
            { field: "bar", minResizableWidth: 100,  hidden: true },
            { field: "baz", minResizableWidth: 100 },
            { field: "abc", minResizableWidth: 100 },
            { field: "def", minResizableWidth: 100 },
           ],
           dataSource: {
               data: [{foo: "item", bar: "number", baz: "one", abc: "col", def: "umn"}]
           },
           columnMenu: true,
           resizable: true
        });


        var minTableWidth;
        var minColumnWidth = 100;
        var th;
        var idx;
        var grid;

        $("#grid").data("kendoGrid").resizable.bind("start", function(e) {
           th = $(e.currentTarget).data("th");
           idx = th.index();
           grid = th.closest(".k-grid").data("kendoGrid");
        });

        $("#grid").data("kendoGrid").resizable.bind("resize", function(e) {
           if (th.width() >= minColumnWidth) {
              minTableWidth = grid.tbody.closest("table").width();
           }

           if (th.width() < minColumnWidth) {
              // the next line is ONLY needed if Grid scrolling is enabled
              grid.thead.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idx).width(minColumnWidth);

              grid.tbody.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idx).width(minColumnWidth);
           }
        });

      $("#grid").data("kendoGrid").hideColumn(1);

    });

-------------- РЕДАКТИРОВАТЬ ПОСЛЕ ОТВЕТА НА ОТВЕТ --------------

Рикка, это то, что мы используем в производстве, которое показывает и скрывает столбцы на основе массива скрытых столбцов, записанных в нашей базе данных.

Это то, что мы используем для сохранения видимости 

var grid = $("#" + gridName).data("kendoGrid");
var columns = grid.columns;
            var hiddenColumns = new Array();

$.each(columns,
      (idx, element) => {
          for (let key in element) {
              if (element.hasOwnProperty(key)) {
                  if (element.hidden !== 'undefined' && element.hidden) {
                     if (key === 'field') {
                         hiddenColumns.push(element[key]);
                         }
                     }
               }
         }
   });

     var jsonObj = {
     gridName: gridName,
     columns: hiddenColumns.join()
   }
   ... more code here that saves back to our DB via Ajax

Так мы загружаемся под нагрузкой 

var grid = $("#ProductGridName)").data("kendoGrid");
    for (var key in hiddenColumns) {
        var array = hiddenColumns[key].split(",");
        $.each(array, function (i) {
            grid.hideColumn(array[i].toString().split(" ").join(""));
        });
    }

но с точки зрения динамического отображения скрытия, еще раз взгляните на правку по тому же URL-адресу, и я изменил код в этом примере, чтобы показать columnMenu: true,

...