PDA

View Full Version : [CLOSED] How to display additional row data in the same row?



Svr77
Dec 27, 2014, 4:55 PM
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?42451-CLOSED-Is-it-possible-to-merge-grid-columns-on-specific-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

http://forums.ext.net/attachment.php?attachmentid=17761&stc=1

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.gr id.ownerWin, arguments);" />
</ext:RowBody>
</Features>
</ext:GridPanel>

Dimitris
Dec 28, 2014, 5:49 PM
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
Dec 28, 2014, 7:35 PM
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/showthread.php?261494-4.2.0-The-option-emptyCellText-of-the-column-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
Dec 29, 2014, 5:48 AM
Hi Alexander,

This is from the ExtJS docs.
http://docs-origin.sencha.com/extjs/4.2.1/#!/api/Ext.grid.feature.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
Dec 29, 2014, 12:34 PM
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:
17812

You can close this thread.

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

Alexander

Daniil
Dec 30, 2014, 4:18 AM
Excellent! Thank you for sharing the solution.

Happy New Year!