PDA

View Full Version : [CLOSED] Grid Rowexpander with checkbox



fotis
Aug 24, 2016, 2:12 PM
Hi, I am trying to use a checkbox in the grid rowexpander to modify boolean data,

However updating from the rowexpander does not work , the boolean value of the grid does not change. Is it a bud or should use other method?

Below is the sample code


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (X.IsAjaxRequest)
{
//We do not need to DataBind on an DirectEvent
return;
}


this.Store1.DataSource = new object[]
{
new object[] { "3m Co", true,71.72, 0.02, 0.03, "9/1 12:00am", "Manufacturing"},
new object[] { "Alcoa Inc",true, 29.01, 0.42, 1.47, "9/1 12:00am", "Manufacturing"},
new object[] { "Altria Group Inc",true, 83.81, 0.28, 0.34, "9/1 12:00am", "Manufacturing"},
new object[] { "American Express Company",true, 52.55, 0.01, 0.02, "9/1 12:00am", "Finance"},
new object[] { "American International Group, Inc.",false, 64.13, 0.31, 0.49, "9/1 12:00am", "Services"},
new object[] { "AT&T Inc.",true, 31.61, -0.48, -1.54, "9/1 12:00am", "Services"},

};


this.Store1.DataBind();
}
</script>
<!DOCTYPE html>


<html>
<head runat="server">
<title>RowExpander with FormPanel Detail - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />


<ext:ResourcePlaceHolder runat="server" Mode="Script" />


<style>
.white-footer .x-toolbar-footer{
background-color: white !important;
}
</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>
<form runat="server">
<ext:ResourceManager runat="server" />


<h1>RowExpander Plugin with FormPanel Detail</h1>


<ext:GridPanel
runat="server"
Title="Expander Rows with control"
Collapsible="true"
AnimCollapse="true"
Icon="Table"
Width="800">
<Store>
<ext:Store
ID="Store1"
runat="server"
IgnoreExtraFields="false"
PageSize="10">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="active" Type="Boolean" />
<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" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Company"
DataIndex="company"
Flex="1" />
<ext:CheckColumn runat="server" DataIndex="active">
</ext:CheckColumn>
<ext:Column runat="server" Text="Price" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn
runat="server"
Text="Last Updated"
DataIndex="lastChange"
Format="yyyy/MM/dd"
Width="105" />
</Columns>
</ColumnModel>
<Plugins>
<ext:RowExpander runat="server" SingleExpand="false">
<Component>
<ext:FormPanel
runat="server"
BodyPadding="6"
Border="false"
DefaultAnchor="-5"
Cls="white-footer">
<Items>
<ext:TextField
runat="server"
Name="company"
FieldLabel="Company"
/>
<ext:Checkbox
runat="server"
Name="active"
FieldLabel="Active"
/>
<ext:NumberField
runat="server"
Name="price"
FieldLabel="Price"
/>
<ext:NumberField
runat="server"
Name="change"
FieldLabel="Change"
/>
<ext:NumberField
runat="server"
Name="pctChange"
FieldLabel="% Change"
/>
<ext:DateField
runat="server"
Name="lastChange"
FieldLabel="Last Updated"
Format="yyyy/MM/dd"
/>
</Items>


<Buttons>
<ext:Button runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="var grid = this.up('grid'), form = this.up('form');
grid.getRowExpander().collapseRow(grid.store.index Of(form.record));
form.getForm().updateRecord(form.record);" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Cancel" Icon="Decline">
<Listeners>
<Click Handler="var grid = this.up('grid'), form = this.up('form');
grid.getRowExpander().collapseRow(grid.store.index Of(form.record));" />
</Listeners>
</ext:Button>
</Buttons>


<Listeners>
<AfterRender Handler="this.getForm().loadRecord(this.record);" />
</Listeners>
</ext:FormPanel>
</Component>
</ext:RowExpander>
</Plugins>
<BottomBar>
<ext:PagingToolbar runat="server" HideRefresh="true" />
</BottomBar>
</ext:GridPanel>
</form>
</body>
</html>

fabricio.murta
Aug 24, 2016, 7:25 PM
Hello @ndotis!

Have you tried setting the Editable="true" property to your check column definition? It seems to just do it to me.

It is readonly by default cause a gridPanel, at first, is readonly unless editors are bound to the columns. In the case of a check column, you probably don't want a custom editor field but just the checkbox toggle ability, so just this property might be just what you need!

fabricio.murta
Sep 16, 2016, 11:05 PM
Hello again @ndotis!

We didn't hear back from you about this issue for several days now. Did the answer above help you at all? Do you still need assistance in this matter? If, in 7 business days you do not provide feedback on this issue we'll be assuming you no longer need assistance and will be marking it as closed.

Anyway, don't worry if you only see this when the thread has been marked as closed. Just leave a follow-up and we'll resume the topic.