Asp.net RadGrid-过滤器文本框，有没有办法动态控制它们的宽度？

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

---

您可以看看列编辑器。我认为它们可以让您从网格外部控制嵌套在网格中的控件的样式

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

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

这里有一个链接详细解释了这一点：

---

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

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

---

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

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

设置标记中的过滤器控件宽度

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

---

我曾经遇到过这个问题，但我觉得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>');
});

函数fixRadGridFilterBar（）{
jQuery（'.rgFilterRow>td'）。每个（函数（）{
var cell=jQuery（this）；
var isDate=假；
if（cell.children（）.length）{
var filterBox=cell.find（'.riTextBox'）；
if（过滤器盒长度）{
if（cell.find（'.RadPicker'）.length）{
filterBox=cell.find（'.RadPicker'）；
css（“宽度”，“100%”）；
isDate=真；
}
}
如果（！filterBox.length）{
filterBox=cell.find（'.rgFilterBox'）；
}
if（过滤器盒长度）{
var filterWidth=cell.find（'.rgFilter'）.outerWidth（）；
var padRight=isDate？0:parseInt（cell.css（'padding-right'）；
var marginRight=parseInt（cell.css（'margin-right'）；
变量filterPadding=（isNumber（padRight）？padRight:0）+（isNumber（marginRight）？marginRight:0）；
css（'position'，'relative'）；
cell.children（）.wrap（“”）；
filterBox.parent（）.css（'float'，'left'）.css（'width'，'100%'）；
过滤器盒包装（“”）；
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（“”）；
}
}
});
jQuery（'.RadGrid>table'）。每个（函数（）{
jQuery（this.wrap）（“”）；
});

---

}

上次我检查时，过滤器按钮的大小为20.16px，因此您可以在css中使用：

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

---

有一种内置的方法来控制宽度（FilterControlWidth），但它将其设置为静态像素宽度。我希望有一些方法可以根据列宽将其设置为自动，那么将宽度设置为100%怎么样？这不会使它覆盖整个列的宽度吗？但是如果您将FilterControlWidth设置为100%，那么文本输入将占据整个列宽度的100%，并且没有空间放置filter按钮。你是如何解决这个问题的？我在下面发布了一个备选答案，试图解决设置百分比宽度的明显问题。如有必要，请检查并提供反馈。这是如何做到的？很高兴看到代码动态调整大小，以便过滤器按钮在视图中。

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