PDA

View Full Version : [CLOSED] how to set the ColumnGroup cell to be editable?



tobros
Jun 28, 2013, 6:43 AM
<%@ 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", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
}
}
</script>

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

<script>
var onCellClick = function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
var cls = Ext.fly(td).getAttribute("class"),
clsWithColumnId = cls.substr(cls.indexOf("x-grid-cell-") + 12),
columnId = clsWithColumnId.substr(0, clsWithColumnId.indexOf(" ")),
column = Ext.getCmp(columnId);

if (App.ColumnGroup.contains(column)) {
alert("In the group");
how to set the ColumnGroup cell to be editable?
} else {
alert("Out of the group");
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Test1" DataIndex="test1" />

<ext:Column ID="ColumnGroup" runat="server" Text="Group">
<Columns>
<ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2" />
<ext:Column ID="Column3" runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<CellClick Fn="onCellClick" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Jun 28, 2013, 1:42 PM
Hi @tobros,

As I answered in another thread:
http://forums.ext.net/showthread.php?25345#post111741



I can't see any way to re-use current editing functionality. So, it should be done from scratch.

I would listen to a click event on columns where an editor should appear. When such a click occurs I would show a floating NumberField. It should be sized manually to fill all the columns in a clicked row. Then listen to a NumberField's mouse leave event to finish editing. A NumberField's value should be put to respective columns manually.

This is still actual.

tobros
Jul 01, 2013, 2:16 AM
Hi @tobros,

As I answered in another thread:
http://forums.ext.net/showthread.php?25345#post111741



This is still actual.

oh,thanks, let me have a try

tobros
Jul 01, 2013, 8:24 AM
"I would listen to a click event on columns where an editor should appear. When such a click occurs I would show a floating NumberField. It should be sized manually to fill all the columns in a clicked row. Then listen to a NumberField's mouse leave event to finish editing. A NumberField's value should be put to respective columns manually."

how to dynamic create a numberfield to the location below in the picture.
6473

Daniil
Jul 01, 2013, 4:11 PM
It is not a simple task. I need some time to try to create a sample.

Daniil
Jul 05, 2013, 6:01 AM
Here is a partially implemented prototype.

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", 1, 2 },
new object[] { "test2", 2, 3 },
};
}
}
</script>

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

<script>
var onCellClick = function (view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
var cls = Ext.fly(td).getAttribute("class"),
clsWithColumnId = cls.substr(cls.indexOf("x-grid-cell-") + 12),
columnId = clsWithColumnId.substr(0, clsWithColumnId.indexOf(" ")),
column = Ext.getCmp(columnId),
groupColumn = App.ColumnGroup,
cellToAlign,
editor = App.NumberField1;

if (groupColumn.contains(column)) {
cellToAlign = view.getCell(record, groupColumn.items.getAt(0));
editor.setWidth(groupColumn.getWidth());
// editor.setValue(getGroupValue(groupColumn));
editor.showBy(cellToAlign, "tl-tl");
editor.focus(100);
editor.editedRecord = record;
}
};

var getGroupValue = function (groupColumn) {
// Here retrieve a group columns' values and combine it into a number
};

var onCompleteEdit = function (editor) {
console.log("onCompleteEdit");
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:NumberField
ID="NumberField1"
runat="server"
Floating="true"
EnableKeyEvents="true">
<Listeners>
<Blur Fn="onCompleteEdit" />
<SpecialKey Handler="if (e.getKey() === e.ENTER) {
e.preventDefault(); // to prevent PostBack if there is a single field in the form
onCompleteEdit(this);
}" />
</Listeners>
</ext:NumberField>

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" Type="Int" />
<ext:ModelField Name="test3" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />

<ext:Column ID="ColumnGroup" runat="server" Text="Group">
<Columns>
<ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2" />
<ext:Column ID="Column3" runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<CellClick Fn="onCellClick" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>