Раскрывающийся значок ag-grid в компоненте группы заголовков - PullRequest
Новая
       41

Раскрывающийся значок ag-grid в компоненте группы заголовков

0 голосов
/ 05 ноября 2018

У меня проблема с группой заголовков сетки ag. На самом деле, это проблема с выпадающим списком, который не отображается. Я попробовал множество CSS-свойств для этого примера: выпадающий список начальной загрузки для правильной работы, но я не могу найти подходящее. Обычный тег выбора работает отлично, но это не так, как мне бы хотелось. Я бы предпочел один значок, который отображает выпадающее меню при нажатии. Кто-нибудь сделал это? Или знаете, как справиться с этим. Я прикреплю код с рабочим select (в первом слева) и с нерабочим выпадающим меню начальной загрузки, где кнопка «притворяется» (для не теряющего времени) значка (второй слева). 

 function customHeaderGroup() {}

    customHeaderGroup.prototype.init = function (params) {
        this.eGui = document.createElement('div');
        this.eGui.className = 'ag-header-group-cell-label';
        this.eGui.innerHTML =
            `<div>

                    <span>
                      ${params.displayName}
                        <select>
                            <option value="1" class="select-opt">'1'</option>
                            <option value="2" class="select-opt">'2'</option>
                            <option value="3" class="select-opt">'3'</option>
                        </select>
                    </span>
                    <div class="dropdown">
                      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        icon
                      </button>
                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                    </div>
                </div>`;
    };
    customHeaderGroup.prototype.getGui = function () {
        return this.eGui;
    };
    customHeaderGroup.prototype.destroy = function () {};

Plnkr

...