RadGrid 中第二列的扩展选项

Question

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

Answer 1

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();
 }

Answer 2

我发布另一个答案是因为它与我之前的回复完全不同，将两者放在一个答案中会让读者感到非常困惑。

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

要记住的要点如下。

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

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