RadGrid - 过滤文本框，有什么方法可以动态控制它们的宽度？答案

【问题标题】：RadGrid - filter textboxs, any way to control their width dynamically?RadGrid - 过滤文本框，有什么方法可以动态控制它们的宽度？
【发布时间】：2011-11-13 05:48:51
【问题描述】：

我有一个带有过滤器控件的 RadGrid。网格适合窗口的大小，但某些视图有很多列，当列缩小时，过滤器控件不会调整大小以适应。有没有办法将这些过滤器控件设置为在列的宽度内自动修复？

【问题讨论】：

这是怎么做到的？很高兴看到代码动态调整大小以便过滤器按钮可见。

标签： asp.net vb.net telerik radgrid

【解决方案1】：

上次我检查的时候，过滤器按钮的大小是 20.16px，所以你可以把这个放在你的 css 中：

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

【讨论】：

【解决方案2】：

我遇到过这个问题，但发现 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>');
});

}

【讨论】：

【解决方案3】：

在最新的 RadGrid 中，有一个简单的解决方法。只需在您的标记或代码隐藏中设置过滤器控件宽度，如下所示。

在标记中设置过滤控件宽度

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

在代码隐藏中设置过滤器控件宽度

boundColumn.FilterControlWidth = Unit.Percentage(80);

【讨论】：

【解决方案4】：

如屏幕截图所示，过滤器文本框的宽度超出了标题列。要将其设置在限制范围内，您可以使用以下 JQuery 代码。

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

在这个 'riTextBox' 中是 RadGrid 生成的过滤器文本框的 css 类。您可以根据需要设置宽度。

【讨论】：

【解决方案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

【讨论】：

有一个内置的方法来控制宽度（FilterControlWidth），但是它将其设置为静态像素宽度。我希望有某种方法可以根据列宽将其设置为自动
将宽度设置为 100% 怎么样？这不会使它覆盖列的宽度吗？？
但是如果你设置 FilterControlWidth=100% 那么文本 INPUT 占据了 100% 的列宽并且没有空间放置过滤器按钮。你是如何解决这个问题的？
我在下面发布了一个替代答案，试图解决设置百分比宽度的明显问题。请检查并在必要时提供反馈。