PDA

View Full Version : [CLOSED] RowBody -> GetAdditionalData



watteeuw
Sep 12, 2012, 6:36 AM
Is possible to show additional info above data row using ext:RowBody ?
Or, at least, to make a border around data row + additional info ?


<ext:RowBody runat="server" >
<GetAdditionalData Fn="getAdditionalData" />
</ext:RowBody>

Thanks

Daniil
Sep 12, 2012, 9:19 AM
Hi @watteeuw,


Is possible to show additional info above data row using ext:RowBody ?

There is no such built-in option, but it is possible if override the mutateMetaRowTpl function of the RowBody.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<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[] { "test1" },
new object[] { "test2" },
new object[] { "test3" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var mutateMetaRowTpl = function(metaRowTpl) {
//metaRowTpl.push('{[this.getRowBody(values)]}');
metaRowTpl.unshift('{[this.getRowBody(values)]}');
};

var getAdditionalData = function () {
var o = Ext.grid.feature.RowBody.prototype.getAdditionalDa ta.apply(this, arguments);

return Ext.apply(o, {
rowBody: '<b>Some row body</b>'
});
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server" PageSize="3">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<Features>
<ext:RowBody runat="server">
<CustomConfig>
<ext:ConfigItem Name="mutateMetaRowTpl" Value="mutateMetaRowTpl" Mode="Raw" />
</CustomConfig>
<GetAdditionalData Fn="getAdditionalData" />
</ext:RowBody>
</Features>
</ext:GridPanel>
</body>
</html>


Or, at least, to make a border around data row + additional info ?

Please use rowBodyCls.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<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[] { "test1" },
new object[] { "test2" },
new object[] { "test3" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<style type="text/css">
.my-row-body .x-grid-cell-rowbody {
border: 2px solid;
}
</style>

<script type="text/javascript">
var getAdditionalData = function () {
var o = Ext.grid.feature.RowBody.prototype.getAdditionalDa ta.apply(this, arguments);

return Ext.apply(o, {
rowBody: '<b>Some row body</b>',
rowBodyCls: 'my-row-body'
});
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server" PageSize="3">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<Features>
<ext:RowBody runat="server">
<GetAdditionalData Fn="getAdditionalData" />
</ext:RowBody>
</Features>
</ext:GridPanel>
</body>
</html>

watteeuw
Sep 12, 2012, 10:44 AM
mutateMetaRowTpl works great
rowBodyCls makes border to additional data, only. I needed to be in same box Data row+ additional row.
But mutateMetaRowTpl is enough for me.

Thanks for fast solutions!


Daniil;90529]Hi @watteeuw,

Daniil
Sep 12, 2012, 12:12 PM
It is also possible.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<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[] { "test", "test" },
new object[] { "test", "test" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<style type="text/css">
.my-row-body .x-grid-cell-rowbody {
border-style: solid;
border-width: 0px 2px 2px;
}

.my-grid .x-grid-cell {
border-style: solid;
border-width: 2px 0px 0px;
border-color: Black;
}

.my-grid .x-grid-cell-first {
border-left-width: 2px;
border-color: Black;
}

.my-grid .x-grid-cell-last {
border-right-width: 2px;
border-color: Black;
}
</style>

<script type="text/javascript">
var getAdditionalData = function () {
var o = Ext.grid.feature.RowBody.prototype.getAdditionalDa ta.apply(this, arguments);

return Ext.apply(o, {
rowBody: '<b>Some row body</b>',
rowBodyCls: 'my-row-body'
});
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server" Cls="my-grid">
<Store>
<ext:Store runat="server" PageSize="3">
<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" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
</Columns>
</ColumnModel>
<Features>
<ext:RowBody runat="server">
<GetAdditionalData Fn="getAdditionalData" />
</ext:RowBody>
</Features>
</ext:GridPanel>
</body>
</html>

watteeuw
Sep 12, 2012, 1:00 PM
Thanks Daniil !

Works, but it's a small issue:
First cell and last cell are not always first & last visible if First/Last columns are hidden.

But is more then ok.


It is also possible.

Daniil
Sep 12, 2012, 1:44 PM
First cell and last cell are not always first & last visible if First/Last columns are hidden.


Interesting. Then, maybe, it would be better to just avoid right and left borders.