[CLOSED] Rowediting plugin text wrap issue

[jpadgett]

I am using the main 2.2 release with MVC.

I have a gridpanel with a rowediting plugin. I do not have a paging toolbar, nor a set height for the gridpanel, so I've already had to address an issue with the Update/Cancel buttons clipping below the bottom of the grid causing scroll bars. But now I'm getting an issue when the text in one of the non-editable cells is longer than the width of the cell. When the row is in edit mode, the text is wrapped - again causing the editing panel to clip/scroll. I'm attaching screenshots of pre-edit and post-edit.

Firstly - is there something built in already that will cause the grid to "grow" when the rowediting plugin displays?

Secondly - assuming there is not something in place, is there a way to prevent the text from wrapping when in edit mode?

Pre-edit


Post-edit

[Daniil]

Hi @jpadgett,

It looks that both the issues are fixed in the trunk.

The buttons appear at the top (instead of the bottom) if there is no enough space at the bottom. Scrollbars don't appear. Also the content of non-editable cells doesn't get wrapped.

Could you test your page with the trunk?

[jpadgett]

Hey Daniil,

Thanks for the reply. I added the trunk build to my project and it does nicely fix the text wrapping issue, and the clipping issue WHEN there are 3 or more rows. However, if there are only 1 or two rows, the Update/Cancel panel clips with no scroll bar. Screenshots:

1 row editing:


2 rows, editing top row:


2 rows, editing bottom row:


I wrote some code to expand the grid height if there are only 1 or two rows. Don't know if this is best way to approach.

Html.X().GridPanel()
    ...
    .Plugins(
        Html.X().RowEditing()
            .ClicksToMoveEditor(1)
            .AutoCancel(false)
            .SaveHandler("update")
            .Listeners(l =>
            {
                l.BeforeEdit.Handler = "raiseGrid(this)";
                l.CancelEdit.Handler = "lowerGrid(this)";
                l.Edit.Handler = "lowerGrid(this)";
            })
    )


<script type="text/javascript">
$(function () {
  var grids = Ext.ComponentQuery.query("grid");
  Ext.each(grids, function (grid) {
      grid.prototype.offseth = 0;
      grid.prototype.originalh = 0;
  });
}

function raiseGrid(plugin) {
    var grid = plugin.getCmp(),
        height = grid.getHeight(),
        store = grid.getStore(),
        recordCount = store.count(),
        record = grid.getSelectionModel().getSelection()[0],
        editIndex = store.indexOf(record),
        indexDiff = recordCount - editIndex;

    if (!grid.originalh)
        grid.originalh = grid.getHeight();

    if (recordCount < 3) {
        grid.offseth = (indexDiff == 1) ? 35 : 14;
        grid.setHeight(grid.originalh + grid.offseth);
    }
}

function lowerGrid(plugin) {
    var grid = plugin.getCmp();
    grid.setHeight(grid.originalh);
}
</script>

[Daniil]

Yes. But I don't see a generic solution for such cases. I mean where would you show those buttons in such cases?

I think setting up MinHeight for the GridPanel could be a solution.