Hi @watteeuw,
Originally Posted by
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.getAdditionalData.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>
Originally Posted by
watteeuw
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.getAdditionalData.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>