PDA

View Full Version : [CLOSED] is it possible to add editor to rowexpander?



hdsoso
Oct 03, 2013, 2:00 AM
i want to add cell editor feature to a rowexpander, any idear?

Baidaly
Oct 03, 2013, 3:39 AM
Hello!

It's difficult to imagine how it can look. Can you provide picture of how you see it. We can suggest the following sample: http://examples2.ext.net/#/GridPanel/RowExpander/Shared_Component/

hdsoso
Oct 03, 2013, 4:43 AM
Hello!

It's difficult to imagine how it can look. Can you provide picture of how you see it. We can suggest the following sample: http://examples2.ext.net/#/GridPanel/RowExpander/Shared_Component/

when i click the price column, edit it , then click the company column , edit it , then expand the expand row to show company detail , then click the company detail column, edit it , finally , i click the save button on the top bar of grid panel , batch save all . can achieve the function?
6978

Daniil
Oct 03, 2013, 6:55 AM
It should be possible to use an Editor.
http://examples2.ext.net/#/Editor/Basic/Overview/

hdsoso
Oct 03, 2013, 10:20 AM
It should be possible to use an Editor.
http://examples2.ext.net/#/Editor/Basic/Overview/

i see the demo, but can not combine the rowexpander and component editor


<Plugins>
<ext:RowExpander runat="server">
<Template ID="Template1" runat="server">
<Html>
{cont}

</Html>
</Template>
</ext:RowExpander>
<ext:CellEditing runat="server" ClicksToEdit="1"></ext:CellEditing>
</Plugins>

how to add a component to the row expander , and put {cont} to his content, then add a editor to it?

Daniil
Oct 03, 2013, 1:15 PM
What about to use a TextArea as a RowExpander's Component? It can display the data and allows to edit.

Baidaly
Oct 03, 2013, 11:05 PM
Hello, everybody!

Here is the sample of Daniil's suggestion:


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

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

<!DOCTYPE html>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am", "Manufacturing" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am", "Manufacturing" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am", "Manufacturing" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am", "Finance" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am", "Services" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am", "Services" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am", "Manufacturing" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am", "Services" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am", "Finance" }
};

this.Store1.DataBind();

const string desc = "this.desc_data = \"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, " +
"vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, " +
"iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, " +
"sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, " +
"pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. " +
"Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, " +
"nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. " +
"Vivamus tincidunt diam nec urna. Curabitur velit.\";";

string dataID = string.Concat(this.Store1.ClientID, ".proxy.data");
string push = string.Format(@"for (var i = 0; i < {0}.length; i++) {{{0}[i].push(desc_data);}}", dataID);

this.ResourceManager1.RegisterClientScriptBlock("desc_data", desc);
this.ResourceManager1.RegisterOnReadyScript(push);
}
</script>

<html>
<head runat="server">
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<script>
var bodyInit = function () {
this.body.on("dblclick", function (e, t) {
App.Editor1.startEdit(t);
}, null, {
delegate: "div.x-grid-rowbody"
});
};
</script>

<ext:Editor
ID="Editor1"
runat="server"
Shadow="false"
Offsets="0,5"
Alignment="l-l"
AutoSize="True"
IgnoreNoChange="true">
<AutoSizeConfig Width="BoundEl" />
<Field>
<ext:TextArea
runat="server"
AllowBlank="false"
/>
</Field>
<Listeners>
</Listeners>
</ext:Editor>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="RowExpander"
Collapsible="true"
AnimCollapse="true"
Icon="Table"
Width="600"
Height="600">
<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" />
<ext:ModelField Name="industry" />
<ext:ModelField Name="desc" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:Column runat="server" Text="Price" DataIndex="price">
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change">
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="pctChange">
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" TrackOver="true" />
</View>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Multi" />
</SelectionModel>
<Plugins>
<ext:RowExpander ID="RowExpander1" runat="server">
<Template ID="Template1" runat="server">
<Html>
{desc}
</Html>
</Template>
</ext:RowExpander>
</Plugins>
<Listeners>
<AfterRender Fn="bodyInit" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>