EasyUI Forum

I setted the datagrid width to a specific number, and setted the datagrid height to 'auto'.
After calling mergeCells method (I called it in onLoadSuccess event handler), the vertical scrollbar displayed! And the cells of the body did not align to the cells of the header again!
BTW, it is perfect if we can set the alignment of the header text and the alignment of the body cells text separately.

Please see attached screenshot for details.

Can you give more details about this issue?

• The easyui version you are using
• The browser and its version
• Some test code about your issue

easyui: 1.2.3
browser: IE8
test code see attached screenshot.

Cannot find your test code but you can call 'fixColumns' or 'resize' method to try to fix this issue. If the problem is not solved, run your code in another browser.

The problem was not solved by calling fitColumns/fixColumnSize/resize, but it is ok when run in Firefox 5.0. The following is the code:
<table id="dgCapacity" singleSelect="true" url="@Url.Action("CapacityList")" style="width:424px;height:auto;">
      <thead>
          <tr>
              <th field="YearMonth" width="80" align="center">年月</th>
              <th field="TypeNO" width="80">型号</th>
              <th field="Quantity" width="80" align="right">订单总数</th>
              <th field="LineDays" width="80" align="right">工作线日</th>
              <th field="Percentage" width="80" align="right">百分比</th>
          </tr>
      </thead>
</table>
<script type="text/javascript">
        $(function () {
            $("#dgCapacity").datagrid({
                queryParams: { StartYearMonth: '201107', EndYearMonth: '201107' },
                onLoadSuccess: function (data) {
                    var rowIndex = 0, rowSpan = 1;
                    var rows = $(this).datagrid("getRows");
                    for (var i = 0; i < rows.length; i++) {
                        if (rows.TypeNO.substr(0, 4) == "ZZZZ") {
                            $(this).datagrid("mergeCells", { index: rowIndex, field: "YearMonth", rowspan: rowSpan });
                            rowIndex = i + 1;
                            rowSpan = 1;
                        }
                        else {
                            rowSpan++;
                        }
                    }
                }               
            });
        });
</script>