Hi,
The RowEditor plugin doesn't support LockingGridView.
But I was able to get it working in the following simple example.
But I'm not sure it would work in all cases.
Please try this solution in your real application and tell us a result.
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[] {"test11", "test12", "test13"},
new object[] {"test21", "test22", "test23"},
new object[] {"test31", "test32", "test33"}
};
store.DataBind();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<ext:ResourcePlaceHolder runat="server" />
<script type="text/javascript">
Ext.ux.grid.RowEditor.override({
startEditing: function (rowIndex, doFocus) {
if (this.editing && this.isDirty()) {
this.showTooltip(this.commitChangesText);
return;
}
if (Ext.isObject(rowIndex)) {
rowIndex = this.grid.getStore().indexOf(rowIndex);
}
if (this.fireEvent('beforeedit', this, rowIndex) !== false) {
this.editing = true;
var g = this.grid, view = g.getView(),
row = view.getRow(rowIndex),
record = g.store.getAt(rowIndex);
this.record = record;
this.rowIndex = rowIndex;
this.values = {};
if (!this.rendered) {
this.render(view.getEditorParent());
}
//var w = Ext.fly(row).getWidth() // it's replaced with the following line for fixing a width issue
var w = Ext.fly(row).getWidth() + (view.getLockedWidth ? parseInt(view.getLockedWidth()) : 0);
this.setSize(w);
if (!this.initialized) {
this.initFields();
}
var cm = g.getColumnModel(), fields = this.items.items, f, val;
for (var i = 0, len = cm.getColumnCount(); i < len; i++) {
val = this.preEditValue(record, cm.getDataIndex(i), i);
f = fields[i];
f.rendered ? f.setValue(val.value) : (f.value = val.value);
f.setReadOnly(!cm.isCellEditable(i, rowIndex));
if (val.meta.css) {
if (f.rendered) {
f.el.addClass(val.meta.css);
}
else {
f.cls = val.meta.css;
}
}
this.values[f.id] = Ext.isEmpty(val.value) ? '' : val.value;
}
this.verifyLayout(true);
if (view.getLockedRow) { // it's added
row = view.getLockedRow(rowIndex); // for fixing
} //a position issue
if (!this.isVisible()) {
this.setPagePosition(Ext.fly(row).getXY());
} else {
this.el.setXY(Ext.fly(row).getXY(), { duration: 0.15 });
}
if (!this.isVisible()) {
this.show().doLayout();
}
if (doFocus !== false) {
this.doFocus.defer(this.autoFocusDelay, this);
}
}
},
verifyLayout: function (force) {
if (this.el && (this.isVisible() || force === true)) {
var view = this.grid.getView(),
row = view.getRow(this.rowIndex);
//this.setSize(Ext.fly(row).getWidth(), Ext.fly(row).getHeight() + 9); // it's replaced with the following line for fixing a width issue
this.setSize(Ext.fly(row).getWidth() + (view.getLockedWidth ? parseInt(view.getLockedWidth()) : 0), Ext.fly(row).getHeight() + 9);
var cm = this.grid.colModel, fields = this.items.items;
for (var i = 0, len = cm.getColumnCount(); i < len; i++) {
if (!cm.isHidden(i)) {
var adjust = 0;
if (i === (len - 1)) {
adjust += 3; // outer padding
} else {
adjust += 1;
}
fields[i].show();
fields[i].setWidth(cm.getColumnWidth(i) - adjust);
} else {
fields[i].hide();
}
}
this.doLayout();
this.positionButtons();
}
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" Height="300" Width="500">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
<ext:RecordField Name="test3" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" Locked="true" />
<ext:Column Header="Test2" DataIndex="test2">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<View>
<ext:LockingGridView />
</View>
<Plugins>
<ext:RowEditor />
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>
NOTE: To apply the solution please add this in your page:
<ext:ResourcePlaceHolder runat="server" />
<script type="text/javascript">
//Here are all scrips
</script>