Printable View
Hi Team,
I am totally new Ext.Net and planned to use this on my new project. Currently, i am validating controls as per my requirements.
I need help to implement the Grid Panel with multiple headers and data cells. Here is the sample format:
Attachment 6960
Please help if it possible. This might help me to propose this to my company to purchase the license.
Thank you.
Rgds
Prasad
Hello!
Welcome to our forum!
You can do it using the Text property of Column's header and Renderers.
Please, take a look at the sample below, it's based on this sample: https://examples2.ext.net/#/GridPanel/ArrayGrid/Simple/
Code:<%@ 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)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Simple Array Grid - Ext.NET Examples</title>
<style>
.x-grid-row-over .x-grid-cell-inner {
font-weight : bold;
}
</style>
<script>
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};
var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<h1>Simple Array Grid</h1>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="600"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:Column runat="server" Text="Price <br /><br /> Change <br /><br /> Percent Change" DataIndex="price">
<Renderer Handler="
return record.get('price') + '<br />' + change(record.get('change')) + '<br />' + pctChange(record.get('pctChange'));" />
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
</ext:GridPanel>
</body>
</html>
Also, to create multiple headers, you can use HeaderItems like in this sample: https://examples2.ext.net/#/GridPane...ader/Overview/ or Grouped headers: https://examples2.ext.net/#/GridPane...mnHeaderGroup/
Thanks for your response. I tried the same why which you suggested but data is not showing 3 rows in cell. Here is the current output:
Attachment 6964
Please help me.
Please, check that you use the right renderer handler for the column:
Also, it is easier for us if you provide a sample.Code:<ext:Column runat="server" Text="Price <br /><br /> Change <br /><br /> Percent Change" DataIndex="price">
<Renderer Handler="
return record.get('price') + '<br />' + change(record.get('change')) + '<br />' + pctChange(record.get('pctChange'));" />
</ext:Column>
Thanks for your prompt response.
My grid will have other controls and can be sort by headers.
The main reason is, i have more data to display to user at a time so my grid cell have 3 or 4 database fields.
Based on users data entry other controls data can be calculated in same row.
All changes should be stored into database by single click. I believe, this Ext.Net Grid and Tree Panels are compatible to Mobile devices (Mainly IPad). I will continue my R&D if it is compatible otherwise i will go with grid which it created using HTML5 and CSS3.
I will be waiting for your comments.
Thank you.
Rgds
Prasad
Unfortunately, Ext.NET doesn't support mobile devices due to limitations of Ext JS. However, in some cases solutions made by Ext.NET can work on iPad as well.Quote:
Originally Posted by pessimca