syncfusion ej网格自定义摘要行未对齐的组标题

Question

我的ejgrid效果很好，自定义摘要很好，但标题标题未对齐。我尝试了所有可能的方法来操作它，但是在第一次加载时仍然搞砸了，但是如果我“运行”（运行按钮刷新网格并调用grid.refreshcontent（）），标题将正确显示。

jQuery("#MyGrid").ejGrid({
            locale: "de-Local",
            columns: cols,
            allowSelection: true,
            enableAltRow: false,
            enableRowHover: true,
            isResponsive: true,
            allowSearching: true,
            selectionSettings: { selectionMode: ["row"] },
            allowFiltering: true,
            allowSorting: true,
            allowScrolling: true,
            allowPaging: true,
            showColumnChooser: true,
            allowGrouping: true,
            pageSettings: { pageSize: 50, pageSizeList: [5, 10, 30, 50, 100] },

            groupSettings: {
                enableDropAreaAnimation: false,
                showGroupSummaryWhenCollapsed: true,
                captionFormat: "{{:key}}"
            },
            filterSettings: {
                filterType: "FilterBar",
                showFilterBarStatus: false,
                showPredicate: true
            },
            summaryRows: [{
                summaryColumns: [
                    {
                        summaryType: ej.Grid.SummaryType.Minimum,
                        displayColumn: "Col0",
                        dataMember: "opening",
                        template: "#groupCaption",
                        format: "{0:N2}"
                    },

                    {
                        summaryType: ej.Grid.SummaryType.Maximum,
                        displayColumn: "Col1",
                        dataMember: "Id",
                        template: "#groupCaption"


                    },
                    {
                        summaryType: ej.Grid.SummaryType.Maximum,
                        displayColumn: "Col2",
                        dataMember: "Id",
                        template: "#groupCaption"


                    },
                    {
                        summaryType: ej.Grid.SummaryType.Custom,
                        displayColumn: "Col3",
                        dataMember: "opening",
                        format: "{0:N2}",

                        customSummaryValue: $scope.getCustomSummaryValue

                    }
                ],

                showTotalSummary: false,
                showCaptionSummary: true
            }],
            showSummary: true,

            rowSelected: function (row) {

            ............
            },
            queryCellInfo: function (args) {

              .............

            },
            actionBegin: $scope.beginOpenGrid,
            actionComplete: $scope.actionComplete,
            create: $scope.gridCreate,
            dataBound: $scope.dataBound
        });



$scope.getCustomSummaryValue = function (col, data) {

        var min, value;
---------some codes here-------------
        return value + min;

    };

我这样应用分组（网格设置保存在数据库中） // gridObj.model.groupSettings.groupedColumns = obj.groupedCol; -这是从db

，并且由于在没有手动添加分组时未触发自定义摘要，因此必须在方法中调用它。

$scope.somemethod= function (gridObj) {

        if (gridObj.model.summaryRows[0].summaryColumns.length !== 0) {
            for (var i = 0; i < gridObj.model.summaryRows[0].summaryColumns.length; i++) {
                var x = gridObj.model.summaryRows[0].summaryColumns[i];
                if (x.summaryType === "custom") {
                    if (x.dataMember === "opening") {
                        x.customSummaryValue = $scope.getCustomSummaryValue
                    }
                }
            }
        }

        $scope.setDatasource(gridObj);
    };

然后我在cshtml脚本中操纵标题：

<script id="groupCaption" type="text/x-jsrender">
    <span>{{:~caption(#data)}}</span>
</script>

 $.views.helpers({


        caption: function (data) {

            if (data.summaryColumn !== undefined) {
                if (data.summaryColumn.displayColumn === "Col1") {
                    return "Open";
                }
                else if (data.summaryColumn.displayColumn === "Col0") {
                    return data.summaryValue;
                }
                else if (data.summaryColumn.displayColumn === "Col2") {
                    return "Close";
                }


            }
            else if (data.field === "SomeOtherCol") {
                return data.key;
            }


        },


    });

我的问题是： 1.标头在第一次加载时未对齐-如何防止这种情况发生？

似乎每列的宽度都被设置为相等（全为200像素），这与对齐时不同，它遵循ej网格代码中的设置。

请注意，这是在应用网格设置之后发生的（在网格加载时重新应用了保存的自定义过滤器和分组），但是如果通过将列标题拖动到分组区域进行手动分组，则对齐方式会正确显示。