[CLOSED] GridPanel / Store schema

[methode]

Hi Geoff,

I'm referring to this post:

http://forums.ext.net/showthread.php...2541-16-1.aspx

I don't know if you guys are ore this, but - to my case - is becoming quite a tedious limitation.
I imagine is a notable task, however I hope you can find a solution soon.

Thanx a lot.

Matteo

[Vladimir]

Hi Matteo,

You can reconfigure the GridPanel (add/remove columns during ajax event or on client side)
https://examples1.ext.net/#/GridPane...Configuration/
https://examples1.ext.net/#/GridPane...l/Reconfigure/

The Coolite Store still doesn't reconfigure but the below code can be interested for you

Ext.override(Ext.data.Store,{
	addField: function(field){
		if(typeof field == 'string'){
			field = {name: field};
		}
		this.recordType.prototype.fields.replace(field);
		if(typeof field.defaultValue != 'undefined'){
			this.each(function(r){
				if(typeof r.data[field.name] == 'undefined'){
					r.data[field.name] = field.defaultValue;
				}
			});
		}
	},
	removeField: function(name){
		this.recordType.prototype.fields.removeKey(name);
		this.each(function(r){
			delete r.data[name];
			if(r.modified){
				delete r.modified[name];
			}
		});
	}
});
Ext.override(Ext.grid.ColumnModel,{
	addColumn: function(column, colIndex){
		if(typeof column == 'string'){
			column = {header: column, dataIndex: column};
		}
		var config = this.config;
		this.config = [];
		if(typeof colIndex == 'number'){
			config.splice(colIndex, 0, column);
		}else{
			colIndex = config.push(column);
		}
		this.setConfig(config);
		return colIndex;
	},
	removeColumn: function(colIndex){
		var config = this.config;
		this.config = [config[colIndex]];
		config.remove(colIndex);
		this.setConfig(config);
	}
});
Ext.override(Ext.grid.GridPanel,{
	addColumn: function(field, column, colIndex){
		if(!column){
			if(field.dataIndex){
				column = field;
				field = field.dataIndex;
			} else{
				column = field.name || field;
			}
		}
		this.store.addField(field);
		this.colModel.addColumn(column, colIndex);
	},
	removeColumn: function(name, colIndex){
		this.store.removeField(name);
		if(typeof colIndex != 'number'){
			colIndex = this.colModel.findColumnIndex(name);
		}
		if(colIndex >= 0){
			this.colModel.removeColumn(colIndex);
		}
	}
});

[methode]

Hi Vlad,

thanx for the code sample, I'll give it a try and let you know.

Matteo

[methode]

Hi Vlad,

I added an overloaded method to the GridPanelBase class to call the javascript method in the override js code.

[Description("Add new column.")]
        public virtual void AddColumn(string field, Column column, int columnIndex)
        {
            const string template = "{0}.addColumn({1},{2},{3});";
            RecordField _rf = new RecordField(field, RecordFieldType.String);
            this.AddScript(template, this.ClientID, recordFiedObject, new ClientConfig(true).SerializeInternal(column, this), columnIndex.ToString());
        }

Now my question is: how would you pass - serialize - the RecordField object?
See my fake variable: "recordFiedObject".

Could that work?

Thanx

Matteo

[Vladimir]

Hi Matteo,

You can serialize RecordField using ClientConfig class


new ClientConfig(true).new ClientConfig(true).Serialize(_rf)*


Just I don't see field argument in addColumn function

[methode]

Hi Vlad,

thanx I'll try your code.

well, I plan to call the js function - addColumn: function(field, column, colIndex) - from ajax method:

Ext.override(Ext.grid.GridPanel,{
	addColumn: function(field, column, colIndex){
		if(!column){
			if(field.dataIndex){
				column = field;
				field = field.dataIndex;
			} else{
				column = field.name || field;
			}
		}
		this.store.addField(field);
		this.colModel.addColumn(column, colIndex);
	},
	removeColumn: function(name, colIndex){
		this.store.removeField(name);
		if(typeof colIndex != 'number'){
			colIndex = this.colModel.findColumnIndex(name);
		}
		if(colIndex >= 0){
			this.colModel.removeColumn(colIndex);
		}
	}
});

I'll try and let you know, if you don't tell me I'm completly wrong... :)

Matteo

[methode]

Hi Vlad,

I'm getting this error:

Error: this.ds.fields.get(C) is undefined

My code:

GridPanelBase.cs

public virtual void AddColumn(string field, Column column, int columnIndex)
{
  const string template = "{0}.addColumn({1},{2},{3});";
  RecordField _rf = new RecordField(field, RecordFieldType.String);
  this.AddScript(template, this.ClientID, new ClientConfig(true).Serialize(_rf),    newClientConfig(true).SerializeInternal(column, this), columnIndex.ToString());
}

Code behind ajax method

protected void AddColumn(object sender, AjaxEventArgs e)
    {
        Column col = new Column();
        col.ColumnID = "myClmID";
        col.Header = "mytest";
        col.Width = 75;
        col.Sortable = true;
        col.DataIndex = "mytest";

        GridPanel1.AddColumn("mytest", col, 2);
    }

Thanx

Matteo

[Vladimir]

Hi Matteo,

I added AddField and RemoveField functionality to the Store. The AddColumn was added early.
Please update from the SVN and see the following example *
Coolite.Examples\GridPanel\ColumnModel\Reconfigure \Default.aspx



Here is piece of code from that sample


protected void AddColumn(object sender, AjaxEventArgs e)
{
ToolbarButton button = (ToolbarButton)sender;
button.Disabled = true;

RecordField field = new RecordField("pctChange", RecordFieldType.Float);
field.DefaultValue = "0";
Store1.AddField(field);

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

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

col.Editor.Add(cb);

GridPanel1.AddColumn(col);
}

[methode]

Hi Vlad,

thank you, it works great!

Matteo