RadGrid中第二列的扩展选项

Posted 2021-04-15

我在我的项目中创建了一个RADGrid，我希望第二列上的Expanded选项而不是默认的1st。有可能吗？

答案

我发布了另一个答案，因为它与我之前的回复中的内容完全不同，将两者放在一个答案中对于读者来说会非常混乱。

此解决方案以100％的方式满足您的要求，如下面的屏幕截图所示。但是，这是一个高度定制的解决方案，如果您只想坚持RadGrid的开箱即用，我之前的回复非常合适。

要记住的要点如下。

• 你需要包含jquery才能工作。您可以使用Telerik控件库附带的嵌入式jquery轻松完成此操作。我已经提到过将在页面中自动包含嵌入式jquery的标记。
• 我假设您正在使用服务器端绑定分层RadGrid。
• 您只需将下面显示的javascript块添加到您的aspx页面即可。
• 我将扩展列移动到第3列之前，但您可以通过将newPosition变量设置为适当的值将其移动到任何位置。
• 在您的方案中，您将newPosition设置为1，因此展开列会出现在第二列之前。
• 请注意，当展开列移位时，还需要移动展开列的标题，否则列标题将不会与其列对齐。

此解决方案的JavaScript

<script type="text/javascript">

    Sys.Application.add_load(function () {
        $ = $telerik.$;//make sure you can use $ symbol for embedded jquery
        var newPosition = 2;//set this to 1 or 2 or 3 etc.(but never 0) 
                            //depending on your requirement

        //gridClientId is  the server-side RadGrid1.ClientID property i.e. id of radgrid div element in rendered page
        //var gridClientId = "<%=RadGrid1.ClientId%>";
        var grid = $find(gridClientId);

        var dataItems = grid.get_masterTableView().get_dataItems();

        for (var i = 0; i < dataItems.length; i++) {

           //get the expand column for the the row with index i
            var row = $(grid.get_masterTableView().get_dataItems()[i].get_element());
            var expandColumn = row.find("td.rgExpandCol");

            //move the data row expand column
            expandColumn.detach().insertBefore(row.find("td:eq(" + newPosition + ")"));
            expandColumn.width(50);
        }

        //move the column header for expand column
        var headerRow = $(grid.get_masterTableView().HeaderRow);
        var headerExpandColumn = headerRow.find(".rgExpandCol");
        headerExpandColumn.detach().insertBefore(headerRow.find("th:eq(" + newPosition+ ")"));
        headerExpandColumn.width(50);

    });

</script>

用于包含嵌入式jquery的标记

<telerik:RadScriptManager runat="server" ID="RadScriptManager1">
  <Scripts>
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
    <%!-- othert scripts of your page will go here -->
</telerik:RadScriptManager>

另一答案

RadGrid无法做到这一点。扩展按钮始终位于每行的第一列之前。但是，通过下面描述的一些模板，您可以实现此目的。

• 如果要扩展单击第二列，请将第二列设为GridTemplateColumn。
• 外部RadGrid应该只有2列，第一列显示为常规列，第二列显示为折叠RadGrid。
• 在此列的模板中，place a RadGrid that has hierarchy enabled仅绑定第一列行的值。
• 然后，您最终会实现您的要求。

请注意，您应该将模板列中的RadGrid绑定到与RadGrid的NeedDataSource事件中的外部RadGrid相同的数据源。唯一的区别是内部RdGrid将启用层次结构，您需要使用适当的事件来实现内部RadGrid的层次结构。

 protected void RadGrid2_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
 {
    (sender as RadGrid).DataSource = GetDataTable();
 }