javascript 在具有空宽度的 Radgrid 列上设置最小宽度的方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16302433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ways to set a minimum width on a Radgrid column with an empty width
提问by nv_ertigo
I have a RadGrid that has columns programatically added to it during PageLoad. For my webpage, there will always be at least one column with an empty width (HeaderStyle.Width = Unit.Empty), with the rest of the columns using specific pixel widths. All columns are resizable. (In my app, we are retrieving and saving these widths in the database) The grid is scrollable, so if they extend past the limits of the grid, the user can scroll without the grid itself being resized.
我有一个 RadGrid，它在 PageLoad 期间以编程方式添加了列。对于我的网页，总是至少有一列宽度为空（HeaderStyle.Width = Unit.Empty），其余列使用特定的像素宽度。所有列都可以调整大小。（在我的应用程序中，我们正在检索这些宽度并将其保存在数据库中）网格是可滚动的，因此如果它们超出了网格的限制，用户可以滚动而无需调整网格本身的大小。
The problem I'm having is that when the user resizes the browser window, at a certain width the blank column(s) will eventually get reduced to 0 width (as they are taking up the "leftover" space. Is there any approach that will allow me to limit this auto-resizing to 100px, so that the column is guaranteed to be visible?
我遇到的问题是，当用户调整浏览器窗口大小时，在特定宽度下，空白列最终将减少到 0 宽度（因为它们占用了“剩余”空间。有没有什么方法可以将允许我将此自动调整大小限制为 100 像素，以便保证该列可见？
At least one column has to be of null OR percentage width, or else the RadGrid will default all columns to a percentage width, thus nullifying my specific pixel width designations.
至少一列必须为空或百分比宽度，否则 RadGrid 会将所有列默认为百分比宽度，从而使我的特定像素宽度指定无效。
An approach I've tried is to add a blank column that fills in the rest of the space, as it wouldn't matter if it was 0 width. However, this causes problems when resizing the other columns. In this case, the blank column should be "consumed" until it is zero width, and then start extending the grid size (or add a scroll bar in this case). Instead, it simply gets pushed to the side, maintaining its width. I don't know if this approach is feasible or not, but I've left it in the code, simple uncomment it to play around with it.
我尝试过的一种方法是添加一个空白列来填充其余空间，因为它是否为 0 宽度并不重要。但是，这会在调整其他列的大小时导致问题。在这种情况下，应该“消耗”空白列直到其宽度为零，然后开始扩展网格大小（或在这种情况下添加滚动条）。相反，它只是被推到一边，保持其宽度。我不知道这种方法是否可行，但我已经把它留在了代码中，简单地取消注释以进行操作。
Here's my code:
这是我的代码：
ASPX:
ASPX：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AA_TEST.aspx.cs" Inherits="Records.AA_TEST" %>
<body id="body" runat="server">
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<telerik:RadGrid ID="RecordGrid" runat="server" Width="99%" BorderWidth="1px" AutoGenerateColumns="false"
AllowPaging="true" AllowCustomPaging="true" PageSize="20" AllowSorting="true" AllowFilteringByColumn="false"
HeaderStyle-Wrap="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-VerticalAlign="Top"
ItemStyle-HorizontalAlign="Left" AlternatingItemStyle-HorizontalAlign="Left"
ItemStyle-VerticalAlign="Top" AlternatingItemStyle-VerticalAlign="Top"
OnNeedDataSource="RecordGrid_NeedDataSource" OnItemDataBound="RecordGrid_ItemDataBound" >
<PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" Position="Bottom" />
<MasterTableView AutoGenerateColumns="false" CommandItemDisplay="None" TableLayout="Fixed"
EnableHeaderContextMenu="false" AllowCustomSorting="true" AllowMultiColumnSorting="true"
Width="100%">
</MasterTableView>
<ClientSettings AllowColumnsReorder="True" ColumnsReorderMethod="Reorder" ReorderColumnsOnClient="True" ClientMessages-DragToGroupOrReorder="">
<ClientEvents OnColumnResized="columnResized" />
<Resizing EnableRealTimeResize="true" AllowColumnResize="true" ClipCellContentOnResize="true" ResizeGridOnColumnResize="true"/>
<Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" />
</ClientSettings>
<SortingSettings SortToolTip="" SortedAscToolTip="" SortedDescToolTip="" />
<GroupingSettings CaseSensitive="false" />
</telerik:RadGrid>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RecordGrid">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RecordGrid" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Inline" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
//<![CDATA[
function columnResized(sender, eventArgs) {
var masterTableView = sender.get_masterTableView();
var uniqueName = eventArgs.get_gridColumn().get_uniqueName();
if (!(uniqueName == "DeleteButton")) {
var deleteColumn = masterTableView.getColumnByUniqueName("DeleteButton");
if (deleteColumn != null) {
var deleteColumnIndex = deleteColumn.get_element().cellIndex;
deleteColumn.set_resizable(true);
masterTableView.resizeColumn(deleteColumnIndex, 30);
deleteColumn.set_resizable(false);
}
}
}
//]]>
</script>
</telerik:RadScriptBlock>
</form>
</body>
ASPX.CS:
ASPX.CS:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
namespace Records
{
public partial class AA_TEST : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
InitRecordGrid();
}
protected void InitRecordGrid()
{
if (!IsPostBack)
{
GridBoundColumn firstNameColumn = new GridBoundColumn();
firstNameColumn.UniqueName = "FirstName";
firstNameColumn.DataField = "FirstName";
firstNameColumn.DataType = typeof(System.String);
firstNameColumn.HeaderText = "First Name";
firstNameColumn.Resizable = true;
firstNameColumn.Reorderable = true;
firstNameColumn.HeaderStyle.Width = Unit.Pixel(250);
RecordGrid.Columns.Add(firstNameColumn);
GridBoundColumn lastNameColumn = new GridBoundColumn();
lastNameColumn.UniqueName = "LastName";
lastNameColumn.DataField = "LastName";
lastNameColumn.DataType = typeof(System.String);
lastNameColumn.HeaderText = "Last Name";
lastNameColumn.Resizable = true;
lastNameColumn.Reorderable = true;
lastNameColumn.HeaderStyle.Width = Unit.Empty;
//lastNameColumn.HeaderStyle.Width = Unit.Pixel(250);
RecordGrid.Columns.Add(lastNameColumn);
/*
GridButtonColumn blankColumn = new GridButtonColumn();
blankColumn.UniqueName = "blank";
blankColumn.Resizable = false;
blankColumn.Reorderable = false;
blankColumn.HeaderStyle.Width = Unit.Empty;
RecordGrid.Columns.Add(blankColumn);
*/
GridButtonColumn deleteColumn = new GridButtonColumn();
deleteColumn.UniqueName = "DeleteButton";
deleteColumn.HeaderStyle.Width = Unit.Pixel(30);
deleteColumn.ButtonType = GridButtonColumnType.ImageButton;
deleteColumn.ImageUrl = "/images/Delete.gif";
deleteColumn.ItemStyle.CssClass = "delete";
deleteColumn.CommandName = "Delete";
deleteColumn.Resizable = false;
deleteColumn.Reorderable = false;
RecordGrid.Columns.Add(deleteColumn);
}
}
protected void RecordGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
List<NameRow> nameRows = new List<NameRow>();
// Filler data
nameRows.Add(new NameRow("Tyrion", "Lannister"));
nameRows.Add(new NameRow("Jaime", "Lannister"));
nameRows.Add(new NameRow("Daenerys", "Targeryen"));
nameRows.Add(new NameRow("Jon", "Snow"));
nameRows.Add(new NameRow("Robb", "Stark"));
nameRows.Add(new NameRow("Benjamin", "Stark"));
nameRows.Add(new NameRow("Khal", "Drogo"));
RecordGrid.DataSource = nameRows;
}
protected void RecordGrid_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item is GridDataItem)
{
GridDataItem item = e.Item as GridDataItem;
NameRow user = item.DataItem as NameRow;
item["FirstName"].Text = user.FirstName;
item["LastName"].Text = user.LastName;
}
}
public class NameRow
{
public string FirstName = "";
public string LastName = "";
public NameRow(string first, string last)
{
FirstName = first;
LastName = last;
}
}
}
}
回答by Shafqat Masood
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
GridColumn gridCol = RadGrid1.MasterTableView.GetColumn("columnname");
gridCol.HeaderStyle.Width = Unit.Pixel(100);
}
