RadGrid - фильтровать текстовые поля, любой способ динамически контролировать их ширину?

Question

У меня есть RadGrid с фильтром управления. Сетка соответствует размеру окна, но некоторые виды имеют довольно много столбцов, и когда столбцы сокращаются, элементы управления фильтра не меняются, чтобы соответствовать. Есть ли способ настроить элементы управления фильтра на автоматическое исправление в пределах ширины столбца?

Answer 1

В прошлый раз, когда я проверял, размер кнопки фильтра был 20.16px, так что вы можете использовать это в вашем css:

.RadGrid .rgFilterBox {
        width: calc(100% - 20.16px);
    }

Answer 2

Как показано на скриншоте, ширина текстового поля фильтра находится за пределами столбца заголовка. Чтобы установить его в пределах лимита, вы можете использовать следующий код JQuery.

$(document).ready(function fn() { $(".riTextBox").css("width", "80%"); });

В этом 'riTextBox' находится класс CSS текстового поля фильтра, созданного RadGrid. Вы можете установить ширину, как вам нужно.

Answer 3

Я столкнулся с этой проблемой и не нашел решение 80% ширины достаточным.По мере того, как ваш столбец становится шире, разрыв между кнопкой фильтра и текстовым полем увеличивается, и это не очень чистое решение.У меня есть в основном рабочее решение проблемы, которое использует jQuery для создания соответствующих оберток вокруг элементов.В настоящее время он не работает хорошо для ситуации, когда вы используете столбец, который будет фильтровать по диапазону дат (использует два фильтра дат в элементах управления Telerik), но в остальном мне это хорошо помогло.

function fixRadGridFilterBar() {
jQuery('.rgFilterRow > td').each(function () {
    var cell = jQuery(this);
    var isDate = false;
    if (cell.children().length) {
        var filterBox = cell.find('.riTextBox');
        if (filterBox.length) {
            if (cell.find('.RadPicker').length){
                filterBox = cell.find('.RadPicker');
                filterBox.css("width", "100%");
                isDate = true;
            }
        }
        if (!filterBox.length) {
            filterBox = cell.find('.rgFilterBox');
        }
        if (filterBox.length) {
            var filterWidth = cell.find('.rgFilter').outerWidth();
            var padRight = isDate ? 0 : parseInt(cell.css('padding-right'));
            var marginRight = parseInt(cell.css('margin-right'));
            var filterPadding = (isNumber(padRight) ? padRight : 0) + (isNumber(marginRight) ? marginRight : 0);
            cell.css('position', 'relative');
            cell.children().wrap("<div class='filter-input'></div>");
            filterBox.parent().css('float', 'left').css('width', '100%');
            filterBox.wrap('<div></div>');
            filterBox.parent().css('padding-right', (filterWidth + filterPadding).toString() + 'px');
            cell.find('.rgFilter').parent().css('width', filterWidth.toString() + 'px').css('position', 'absolute').css('right', '0');
            cell.children().wrapAll("<div style='position:relative;'></div>");
        }
    }
});
jQuery('.RadGrid > table').each(function () {
    jQuery(this).wrap('<div class="rgHeaderWrapper"></div>');
});

}

Answer 4

В последней версии RadGrid это легко исправить. Просто установите ширину элемента управления фильтра в разметке или коде, как показано ниже.

Задать ширину фильтра управления в разметке

<telerik:GridBoundColumn DataField="ProductName" FilterControlWidth="80%"
 HeaderText="Product Name" UniqueName="ProductName" HeaderStyle-Width="130px"
 AllowFiltering="true"></telerik:GridBoundColumn>

Задать ширину управления фильтром в выделенном коде

boundColumn.FilterControlWidth = Unit.Percentage(80);

Answer 5

Вы можете взглянуть на редакторы столбцов.Я думаю, что они позволят вам контролировать стиль элементов управления, вложенных в сетку снаружи сетки.

<telerik:GridBoundColumn ColumnEditorID="TextBoxColumnEditor" ... />

<telerik:GridTextBoxColumnEditor ID="TextBoxColumnEditor" runat="server">
    <TextBoxStyle Width="500" />
</telerik:GridTextBoxColumnEditor>

Вот ссылка, которая объясняет это подробно:

http://www.telerik.com/help/aspnet/grid/grdstylingthroughdeclarativecustomeditors.html