PDA

View Full Version : [CLOSED] CellEditting and dynamic Grid.reconfigure



Thiago
Jul 03, 2013, 12:01 AM
I found a bug report in this site: https://gist.github.com/cparker15/1379549
// CellEditing broken with grid.reconfigure(), which is used when adding columns.

// See http://www.sencha.com/forum/showthread.php?131583-OPEN-EXTJSIV-1789-4.0.0-Cannot-edit-cells-after-grid-reconfigure

// If it weren't broken, then inline editing would be possible in this example.

I need do the grid.reconfigure and use the CellEditing.

Can you tell me if this bug is ok? Because I can't use this plugin after the reconfigure.

code resume:
Server:

Store.RemoveFields()
Store.AddField( new ModelField(name,type)) ... n times ...
...
Store.DataSoucer = MyDataSet
Store.DataBind()

columN = new Column()
fieldN = new Field()
columN.editor.Add(fieldN)
Grid.ColumnMode.Column.Add(columN)
Grid.reconfigure();

Thanks..

Baidaly
Jul 03, 2013, 1:04 AM
Hello!

Welcome to our forum!

Can you provide full test case to reproduce?

http://forums.ext.net/showthread.php?10205
http://forums.ext.net/showthread.php?13672&p=56687&viewfull=1#post56687

I've tried the following sample and it works:



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

<%@ Import Namespace="Button=Ext.Net.Button" %>

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}

protected void AddColumn(object sender, DirectEventArgs e)
{
((Button)sender).Disabled = true;

ModelField field = new ModelField("pctChange", ModelFieldType.Float);

//we need specify index because we use ArrayReader which parse data source by index

this.Store1.AddField(field, 3);
this.Store1.Model[0].Fields.Insert(3, field);

this.BindData();

Column col = new Column();
col.Text = "Change %";
col.Width = 75;
col.Sortable = true;
col.DataIndex = "pctChange";

ComboBox cb = new ComboBox();
cb.Items.Add(new Ext.Net.ListItem("1", "1"));
cb.Items.Add(new Ext.Net.ListItem("2", "2"));
cb.Items.Add(new Ext.Net.ListItem("3", "3"));
this.Controls.Add(cb);

col.Editor.Add(cb);

this.GridPanel1.AddColumn(col);
}

protected void InsertColumn(object sender, DirectEventArgs e)
{
((Button)sender).Disabled = true;

DateColumn col = new DateColumn
{
Text = "Last Updated",
Width = 85,
Sortable = true,
DataIndex = "lastChange",
Format = "M/d/yyyy"
};

this.GridPanel1.InsertColumn(1, col);
}

protected void Reconfigure(object sender, DirectEventArgs e)
{
((Button)sender).Disabled = true;

this.GridPanel1.ColumnModel.Columns.RemoveAt(1);
this.GridPanel1.ColumnModel.Columns.RemoveAt(1);
this.GridPanel1.Reconfigure();
this.GridPanel1.Refresh();
}

private void BindData()
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}

private object Data
{
get
{
return new List<object>
{
new { company = "3m Co", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = "9/1 12:00am" },
new { company = "Alcoa Inc", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = "9/1 12:00am" },
new { company = "Altria Group Inc", price = 83.81, change = 0.28, pctChange = 0.34, lastChange = "9/1 12:00am" },
new { company = "American Express Company", price = 52.55, change = 0.01, pctChange = 0.02, lastChange = "9/1 12:00am" },
new { company = "American International Group, Inc.", price = 64.13, change = 0.31, pctChange = 0.49, lastChange = "9/1 12:00am" },
new { company = "AT&T Inc.", price = 31.61, change = -0.48, pctChange = -1.54, lastChange = "9/1 12:00am" },
new { company = "Boeing Co.", price = 75.43, change = 0.53, pctChange = 0.71, lastChange = "9/1 12:00am" },
new { company = "Caterpillar Inc.", price = 67.27, change = 0.92, pctChange = 1.39, lastChange = "9/1 12:00am" }
};
}
}
</script>

<!DOCTYPE html>

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

<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="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1">
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Price" Width="75" DataIndex="price">
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Change" Width="75" DataIndex="change">
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single" />
</SelectionModel>
<View>
<ext:GridView runat="server" StripeRows="true" TrackOver="true" />
</View>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill runat="server" />
<ext:Button runat="server" Text="Add Column">
<DirectEvents>
<Click OnEvent="AddColumn" Single="true" />
</DirectEvents>
</ext:Button>
<ext:Button runat="server" Text="Insert Column">
<DirectEvents>
<Click OnEvent="InsertColumn" Single="true" />
</DirectEvents>
</ext:Button>
<ext:Button runat="server" Text="Reconfigure">
<DirectEvents>
<Click OnEvent="Reconfigure" Single="true" />
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1" />
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>

Thiago
Jul 03, 2013, 4:15 AM
Thanks for your help. I could find the BUG.

I was showing the grid in a Panel that was created Collapsed.

<ext:Panel Region="South" runat="server" Split="true" Title="DBF" Collapsible="true" Layout="FitLayout" ID="AgromapasDBF" Collapsed="true">

My code and you sample is the same. The only difference is the Panel. So I remove "Collapsed="true" " and then all become to work.

<ext:Panel Region="South" runat="server" Split="true" Title="DBF" Collapsible="true" Layout="FitLayout" ID="AgromapasDBF" >

Thansks, and don't create Panel Collapsed.

Thiago

Daniil
Jul 03, 2013, 4:47 AM
Hi @Thiago,

Seems I cannot reproduce the issue with Collapsed="true" as well.

Can you reproduce using this test case?

Example

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

<%@ Import Namespace="Button=Ext.Net.Button" %>

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}

protected void AddColumn(object sender, DirectEventArgs e)
{
((Button)sender).Disabled = true;

ModelField field = new ModelField("pctChange", ModelFieldType.Float);

//we need specify index because we use ArrayReader which parse data source by index

this.Store1.AddField(field, 3);
this.Store1.Model[0].Fields.Insert(3, field);

this.BindData();

Column col = new Column();
col.Text = "Change %";
col.Width = 75;
col.Sortable = true;
col.DataIndex = "pctChange";

ComboBox cb = new ComboBox();
cb.Items.Add(new Ext.Net.ListItem("1", "1"));
cb.Items.Add(new Ext.Net.ListItem("2", "2"));
cb.Items.Add(new Ext.Net.ListItem("3", "3"));
this.Controls.Add(cb);

col.Editor.Add(cb);

this.GridPanel1.AddColumn(col);
}

protected void InsertColumn(object sender, DirectEventArgs e)
{
((Button)sender).Disabled = true;

DateColumn col = new DateColumn
{
Text = "Last Updated",
Width = 85,
Sortable = true,
DataIndex = "lastChange",
Format = "M/d/yyyy"
};

this.GridPanel1.InsertColumn(1, col);
}

protected void Reconfigure(object sender, DirectEventArgs e)
{
((Button)sender).Disabled = true;

this.GridPanel1.ColumnModel.Columns.RemoveAt(1);
this.GridPanel1.ColumnModel.Columns.RemoveAt(1);
this.GridPanel1.Reconfigure();
this.GridPanel1.Refresh();
}

private void BindData()
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}

private object Data
{
get
{
return new List<object>
{
new { company = "3m Co", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = "9/1 12:00am" },
new { company = "Alcoa Inc", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = "9/1 12:00am" },
new { company = "Altria Group Inc", price = 83.81, change = 0.28, pctChange = 0.34, lastChange = "9/1 12:00am" },
new { company = "American Express Company", price = 52.55, change = 0.01, pctChange = 0.02, lastChange = "9/1 12:00am" },
new { company = "American International Group, Inc.", price = 64.13, change = 0.31, pctChange = 0.49, lastChange = "9/1 12:00am" },
new { company = "AT&T Inc.", price = 31.61, change = -0.48, pctChange = -1.54, lastChange = "9/1 12:00am" },
new { company = "Boeing Co.", price = 75.43, change = 0.53, pctChange = 0.71, lastChange = "9/1 12:00am" },
new { company = "Caterpillar Inc.", price = 67.27, change = 0.92, pctChange = 1.39, lastChange = "9/1 12:00am" }
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="Center" Title="Center" />
<ext:Panel
runat="server"
Region="South"
Split="true"
Height="350"
Title="South"
Collapsible="true"
Collapsed="true"
Layout="FitLayout">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server">
<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="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1">
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Price" Width="75" DataIndex="price">
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Change" Width="75" DataIndex="change">
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single" />
</SelectionModel>
<View>
<ext:GridView runat="server" StripeRows="true" TrackOver="true" />
</View>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill runat="server" />
<ext:Button runat="server" Text="Add Column">
<DirectEvents>
<Click OnEvent="AddColumn" Single="true" />
</DirectEvents>
</ext:Button>
<ext:Button runat="server" Text="Insert Column">
<DirectEvents>
<Click OnEvent="InsertColumn" Single="true" />
</DirectEvents>
</ext:Button>
<ext:Button runat="server" Text="Reconfigure">
<DirectEvents>
<Click OnEvent="Reconfigure" Single="true" />
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1" />
</Plugins>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Thiago
Jul 03, 2013, 1:46 PM
6480

I Can reproduce the bug using your test case.

When I remove the Collapsed="true" the grid became to edit. But with Collapsed="true" I can't edit.

Above is my web.config:


<?xml version="1.0"?>

<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->

<configuration>
<configSections>
<section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false"/>
</configSections>
<extnet licenseKey="NjMyMzY0NDcsMiw5OTk5LTEyLTMx" scriptMode="Release" theme="Gray"/>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<pages>
<controls>
<add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext"/>
</controls>
</pages>
<httpRuntime targetFramework="4.5" maxRequestLength="30720" executionTimeout="825" />
</system.web>
<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<modules>
<add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net"/>
</modules>
<handlers>
<add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler"/>
</handlers>
</system.webServer>
<runtime>
<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
<dependentAssembly>
<assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed"/>
<bindingRedirect oldVersion="1.0.0.0-4.5.9" newVersion="4.5.10"/>
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Ext.Net.Utilities" publicKeyToken="2c34ac34702a3c23"/>
<bindingRedirect oldVersion="0.0.0.0-2.0.1" newVersion="2.1.0"/>
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Transformer.NET" publicKeyToken="e274d618e7c603a7"/>
<bindingRedirect oldVersion="0.0.0.0-2.0.0" newVersion="2.1.0"/>
</dependentAssembly>
</assemblyBinding>
</runtime>
</configuration>

Vladimir
Jul 03, 2013, 1:50 PM
It was fixed already in SVN
Please update from SVN and retest