[CLOSED] How to display additional row data in the same row?

[Svr77]

Hi All,

I tired to implement a basic cell merging in grid for specific row based on this example:

http://forums.ext.net/showthread.php...-row-in-a-grid

It works expect of one strange behaviour, I can't show row data in the same row. It is always appears under the needed row. See the screenshot



How to display it inside of the row? See my code below.

Thanks,
Alexander

  getAdditionalData: function (data, idx, record, orig) {
    if (data.name != null)
      return {
        rowBody: "",
        rowBodyCls: "x-hidden"
      };
    else
      return {
        rowBodyColspan: record.fields.getCount(),
        rowBody: Ext.String.format("<i>{0}</i>", "Double click here to add new record"),
        rowBodyCls: 'x-grid-row-body'
      };
  },

<ext:GridPanel ID="SubmitFreightForm" TagString="/Freight/SubmitFreightDlgStep3" runat="server">
  <Store>
      <ext:Store ID="FreightShipmentStore" runat="server" IgnoreExtraFields="false">
          <Model>
              <ext:Model runat="server" Name="ShipmentItem" IDProperty="id">
                  <Fields>
                      <ext:ModelField Name="id"/>
                      <ext:ModelField Name="name" />
                      <ext:ModelField Name="number" />
                      <ext:ModelField Name="packages" />
                      <ext:ModelField Name="packing" />
                      <ext:ModelField Name="statNumber" />
                      <ext:ModelField Name="weight" Type="Int"  />
                      <ext:ModelField Name="volume" Type="Int" />
                  </Fields>
              </ext:Model>
          </Model>
          <Listeners>
            <Refresh Handler="return this.ownerWin.insertEmptyRecord.call(this.ownerWin, this);" Delay="100"/>
          </Listeners>
      </ext:Store>
  </Store>
  <BottomBar>
    <ext:Toolbar Padding="0" runat="server">
      <Items>
        <ext:Checkbox ItemID="simpleDescription" Name="UseSimpleDescription" InputValue="true" Checked="<%# Model.UseSimpleDescription %>" Margins="5 0 5 5" runat="server" HideLabel="true" AutoDataBind="true" BoxLabel="Use simple description of goods in this consignment">
          <Listeners>
            <Change Handler="return _me.onSimpleDescriptionChanged.call(_me, item);" />
          </Listeners>
        </ext:Checkbox>
      </Items>
    </ext:Toolbar>
  </BottomBar>
  <ColumnModel>
      <Columns>
        <ext:Column runat="server" Text="Marks and<br>numbers" DataIndex="number" Width="100" Hidden="<%# Model.UseSimpleDescription %>" >
          <Editor><ext:TextField runat="server" /></Editor>
        </ext:Column>
        <ext:Column runat="server" Text="Number of<br>packages" DataIndex="packages" Width="100" Hidden="<%# Model.UseSimpleDescription %>" >
          <Editor><ext:TextField runat="server" /></Editor>
        </ext:Column>
        <ext:Column runat="server" Text="Method of<br>packing" DataIndex="packing" Width="100" Hidden="<%# Model.UseSimpleDescription %>" >
          <Editor><ext:TextField runat="server" /></Editor>
        </ext:Column>
        <ext:Column runat="server" Text="Nature of the goods" DataIndex="name" Flex="1" >
          <Editor><ext:TextField runat="server" AllowBlank="false" /></Editor>
        </ext:Column>
        <ext:Column runat="server" Text="Statistical<br>number" DataIndex="statNumber" Width="80" >
          <Editor><ext:TextField runat="server" /></Editor>
        </ext:Column>
        <ext:Column runat="server" Text="Gross<br>weight (kg)" DataIndex="weight" Width="80" Align="Right" >
          <Editor><ext:NumberField runat="server" HideTrigger="true" AllowDecimals="false" MinValue="1" AllowBlank="false" /></Editor>
        </ext:Column>
        <ext:Column runat="server" Text="Volume (m3)" DataIndex="volume" Width="80" Align="Right">
          <Editor><ext:NumberField runat="server" HideTrigger="true" AllowDecimals="false" AllowBlank="false" /></Editor>
        </ext:Column>
        <ext:CommandColumn runat="server" Width="50">
            <Commands>
                <ext:GridCommand CommandName="add" Icon="TableRowInsert" ToolTip-Text="Insert new row after current" />
                <ext:GridCommand CommandName="delete" Icon="TableRowDelete" ToolTip-Text="Delete current row" />
            </Commands>
            <Listeners>
              <Command Handler="return _me.onShipmentGridCommand.apply(_me, arguments);" />
            </Listeners>
            <PrepareToolbar Handler="return _me.onShipmentGridPrepareToolbar.apply(_me, arguments);"></PrepareToolbar>
        </ext:CommandColumn>
      </Columns>
  </ColumnModel>
  <View>
      <ext:GridView runat="server" />
  </View>
  <Features>
      <ext:RowBody runat="server" >
        <GetAdditionalData Handler="return this.grid.ownerWin.getAdditionalData.apply(this.grid.ownerWin, arguments);" />
      </ext:RowBody>
  </Features>
</ext:GridPanel>

[Dimitris]

Hello,

What about using the EmptyCellText property of the Column? For example:

<%@ Page Language="C#" %>
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[]
            {
                new object[] { "test", "test" },
                new object[] { string.Empty, "test" },
                new object[] { "test", "test" }
            };
        }
    }
</script>  

<!DOCTYPE html>
 
<html>
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager runat="server" />
 
        <ext:GridPanel ID="GridPanel1" runat="server" Height="200">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test 1" DataIndex="test1" EmptyCellText="Double click to edit">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column runat="server" Text="Test 2" DataIndex="test2">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" />
                        </Editor>

                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:CellEditing ID="CellEditing1" runat="server" />
            </Plugins>
            <Buttons>
                <ext:Button ID="Button2" runat="server" Text="Insert" Icon="Add">
                    <Listeners>
                        <Click Handler="#{Store1}.insert(0, {});" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:GridPanel>
    </form>
</body>
</html>

The prompt will appear in 2nd row where the first cell has no value and also in every new row inserted.

Hope it helps.

[Svr77]

Hi Mimisss,

Thanks, but how this helps in my case? First of all, emptyCellText is not working in ExtJS 4.2.1.883. Here is a bug that was posted to sencha forum and which seems still not fixed yet:

http://www.sencha.com/forum/showthre...umn-is-ignored

In any case, if text that need to be displayed is less then width of column, I can implement the same behaviour using column's renderer. However the problem is still exists - when text is not fit to the column it is clipped but I need that it would occupy space of the next column.

Alexander

[Daniil]

Hi Alexander,

This is from the ExtJS docs.
http://docs-origin.sencha.com/extjs/...eature.RowBody

The rowbody feature enhances the grid's markup to have an additional tr -> td -> div which spans the entire width of the original row.

So, a RowBody plugin adds an additional row. So, I don't think you can put a rowBody into the original row.

However the problem is still exists - when text is not fit to the column it is clipped but I need that it would occupy space of the next column

Is that an option to "auto width" the Column according to the content? I mean if the Column doesn't fit the content, you could increase its width.

[Svr77]

Hi Daniil,

I think that I am not correctly asked a question in the beginning. Actually all that I wanted in some cases just to merge two cells in the grid. I searched the forum and found a picture in one of previous posts that looks similar to my needs. Now I understand that additional row data doesn't solve my problem. That's why I decided to implement a different solution which works.

I've created for the first two columns custom renderers and implemented them like:

  renderNumbers: function (value, metadata, record, rowIndex, colIndex, store, view) {
    if (value == null) {
      metadata.tdAttr = 'colspan="2"';
      return "Double click here to add new record";
    }
    return value;
  },

  renderPackages: function (value, metadata, record, rowIndex, colIndex, store, view) {
    if (value == null) {
      metadata.tdAttr = 'hidden=""';
    }
    return value;
  },

After that I got solution that fully correspond to my needs. See attached picture:


You can close this thread.

Happy New Year and thanks for all you help this year!

Alexander

[Daniil]

Excellent! Thank you for sharing the solution.

Happy New Year!