PDA

View Full Version : [CLOSED] GridPanel selection model does not update, after adding record



RajivDutt
May 20, 2014, 1:12 PM
Hi

I am using row editing plugin in GridPanel, I see a strange behavior...
When I add a new record, after adding a new record... I cannot select the newly added record. Strange...

Given is the sample code.
Please suggest

Thanks,
Rajiv Dutt





@{
var storeEmployee = X.Store()
.ID("storeEmployee")
.AutoLoad(true)
.PageSize(5)
.RemoteSort(true)
.Proxy(X.AjaxProxy().Url(Url.Action("Read")).Reader(X.JsonReader().Root("data")))
.Model(X.Model()
.Fields(
Html.X().ModelField().Name("Id").Mapping("Id"),
Html.X().ModelField().Name("Email").Mapping("Email").SortType(Ext.Net.SortTypeMethod.AsUCString),
Html.X().ModelField().Name("First").Mapping("First").SortType(Ext.Net.SortTypeMethod.AsUCString),
Html.X().ModelField().Name("Last").Mapping("Last"),
Html.X().ModelField().Name("Salary").Mapping("Salary")
));
}
@(
Html.X().GridPanel()
.Border(true)
.ColumnLines(true)
.RowLines(true)
.Cls("grid-sample")
.ID("gridEmployee")
.Width(500)
.Store(storeEmployee)
.ColumnModel(
X.Column().ID("col1").DataIndex("Id").Text("Id").Hidden(false).Width(20).TdCls("first-row"),
X.Column().DataIndex("Email").Width(150).Text("Email").Sortable(true).MenuDisabled(true).Draggable(fals e)
.Editor(
Html.X().TextField().AllowBlank(false).StandardVty pe(ValidationType.Email)
.SelectOnFocus(true)
),
X.Column().DataIndex("First").Text("First").Sortable(true).MenuDisabled(true).Draggable(fals e)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFoc us(true).Disabled(true)
),
X.Column().DataIndex("Last").Text("Last").Sortable(true).MenuDisabled(true).Draggable(fals e).Disabled(false)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFoc us(true).Disabled(false)
),
X.Column().DataIndex("Salary").Text("Salary").Sortable(true).MenuDisabled(true).Draggable(fals e).Disabled(false)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFoc us(true).Disabled(false)
)
)
.SelectionModel(Html.X().CellSelectionModel().Auto DataBind(true).AllowDeselect(true).Clear().EnableK eyNav(true).Listeners(s => s.Select.Handler = "selectMe()"))
.BottomBar(
Html.X().PagingToolbar().ID("editList"))
.Plugins(
Html.X().RowEditing().AutoCancel(false).ErrorSumma ry(false)
.DirectEvents(de =>
{
de.Edit.Before = "return FieldValidation(el,type,action,extraParams,o)";
de.Edit.Url = Url.Action("SaveTardingReason");
de.Edit.ExtraParams.Add(new Parameter
{
Name = "data",
Value = "getData()",
Mode = ParameterMode.Raw,
Encode = true
});
de.Edit.Method = HttpMethod.POST;
de.Edit.Success = " Ext.net.Notification.show({ title: 'Update', html: 'Success' });";
de.Edit.Failure = " Ext.net.Notification.show({ title: 'Update', html: 'Failed' });";
// de.Edit.EventMask.Msg = "Saving...";
})
.Listeners(l =>
{
l.CancelEdit.Handler = "if(e.record.phantom){e.store.remove(e.record);} cancelEdit();";
//l.ValidateEdit.Handler = "v";
l.BeforeEdit.Handler = "beforeEdit();";
l.Edit.Handler = "Edit();";
})
)
.TopBar(
Html.X().Toolbar()
.Items(
Html.X().Button()
.Text("Add")
.Icon(Icon.Add)
.Handler("this.up('grid').store.insert(0, new LoadTestPerson());this.up('grid').store.commitChan ges();"),

Html.X().Button()
.ItemID("btnRemove")
.Text("Delete")
.Icon(Icon.Exclamation)
.Handler("this.up('grid').deleteSelected();")
)
)
)
<script type="text/javascript">
var selectedRow = 0;

function LoadTestPerson()
{
this.Id = 0;
this.Email = "";
this.First = "";
this.Last = "";
this.Salary = 0.00;
}

function selectMe()
{
if (App.gridEmployee.getSelectionSubmit().selModel.se lected.length > 0)
{
selectedRow = App.gridEmployee.getSelectionSubmit().selModel.sel ected.items[0].index;
//var currentPage = App.store1.currentPage;
var pageSize = App.storeEmployee.pageSize;
selectedRow = (selectedRow % pageSize);// * currentPage) + (selectedRow - pageSize);
}
else
selectedRow = 0;

$(".selected-grid-cell").removeClass('selected-grid-cell');
$(".x-grid-cell-selected").removeClass('x-grid-cell-selected');
var firstCell = App.gridEmployee.getView().getCell(App.gridEmploye e.store.getAt(selectedRow), App.gridEmployee.columns[0]);
$(firstCell.dom).addClass("selected-grid-cell");

var selectedCell = App.gridEmployee.view.getCellByPosition(App.gridEm ployee.getSelectionModel().getCurrentPosition());
if (selectedCell)
{
selectedCell.addCls('x-grid-cell-selected');
}
}

function beforeEdit()
{
//switchGridSort(false);
//switchGridPaging(true);
App.gridEmployee.getSelectionSubmit().selModel.des electAll();
$(".selected-grid-cell").removeClass('selected-grid-cell');
$(".x-grid-cell-selected").removeClass('x-grid-cell-selected');
App.gridEmployee.getSelectionModel().setLocked(tru e);
}

function GridEditComplete(grid)
{
grid.editingPlugin.completeEdit();
}

function Edit()
{
var grid = App.gridEmployee;
//switchGridSort(true);
//switchGridPaging(false);
grid.getSelectionSubmit().selModel.deselectAll();
grid.getSelectionModel().setLocked(false);
GridEditComplete(grid);
grid.getView().focusRow(selectedRow);
grid.getSelectionModel().select(selectedRow);
//setSelectedRow(App.gridEmployee);
//GridEditComplete(grid);
//grid.getSelectionModel().select(selectedRow);
//Grid.getSelectionModel().select(selectedRow);
}

function cancelEdit()
{
var grid = App.gridEmployee;
//switchGridSort(true);
//switchGridPaging(false);
grid.getSelectionSubmit().selModel.deselectAll();
grid.getSelectionModel().setLocked(false);
//setSelectedRow(App.gridEmployee);
GridEditComplete(grid);
grid.getView().focusRow(selectedRow);
grid.getSelectionModel().select(selectedRow);
//setSelectedRow(App.gridEmployee);
}

var FieldValidation = function (el, type, action, extraParams, o)
{
if (!App.storeEmployee.isDirty())
{
//selectedRow++;

var Grid = App.gridEmployee;
var GridStore = Grid.store;

//if (selectedRow >= GridStore.pageSize || selectedRow >= GridStore.data.length)
// selectedRow = 0;
Grid.getView().focusRow(selectedRow);
Grid.getSelectionModel().select(selectedRow);

return false;
}
}
function getData()
{
return App.storeEmployee.getChangedData();
}
Ext.grid.RowEditor.override({
beforeEdit: function ()
{
var me = this,
scrollDelta;

//if (me.isVisible() && me.errorSummary && !me.autoCancel && me.isDirty()) {
if (me.isVisible() && !me.autoCancel && me.isDirty())
{
scrollDelta = me.getScrollDelta();
if (scrollDelta)
{
me.scrollingViewEl.scrollBy(0, scrollDelta, true)
}
//me.showToolTip();
return false;
}
}
});
</script>
<style type="text/css">
.selected-grid-cell {
background-color: #0096FF !important;
}

.grid-sample .x-grid-cell-selected {
background-color: #ffffff !important;
border: #0096ff 1px solid !important;
}


.grid-sample .x-grid-cell-selected:focus {
background-color: #0096ff!important;
}


.grid-sample .x-grid-view {
overflow: hidden !important;
}

.first-row .x-item-disabled {
border: 0px !important;
}

.grid-sample .x-btn-default-small-noicon .x-btn-inner {
line-height: 18px !important;
}

.grid-sample .x-grid-cell-inner {
padding: 3px 6px 4px !important;
}

.selected-grid-cell {
background-color: #0096FF !important;
}
</style>


Controller

public ActionResult Read(StoreRequestParameters parameters)
{
return this.Store(TestPerson.PlantsPaging(parameters));
}

Model

public class TestPerson
{
[ModelField(IDProperty = true, UseNull = true)]
[Field(Ignore = true)]
public int? Id
{
get;
set;
}

[EmailValidation]
[PresenceValidation]
public string Email
{
get;
set;
}

[PresenceValidation]
public string First
{
get;
set;
}

[PresenceValidation]
public string Last
{
get;
set;
}

[PresenceValidation]
public List<int> countries
{
get;
set;
}

private static int curId = 7;
private static object lockObj = new object();

private static int NewId
{
get
{
return System.Threading.Interlocked.Increment(ref curId);
}
}

public static List<TestPerson> TestData
{
get
{
return new List<TestPerson>
{
new TestPerson{Id=1, Email="fred@flintstone.com", First="Fred", Last="Flintstone", countries= new List<int>(){1,2}},
new TestPerson{Id=2, Email="wilma@flintstone.com", First="Wilma", Last="Flintstone", countries= new List<int>(){2,3}},
new TestPerson{Id=3, Email="pebbles@flintstone.com", First="Pebbles", Last="Flintstone", countries= new List<int>(){1,4,5}},
new TestPerson{Id=4, Email="barney@rubble.com", First="Barney", Last="Rubble", countries= new List<int>(){2}},
new TestPerson{Id=5, Email="betty@rubble.com", First="Betty", Last="Rubble", countries= new List<int>(){4}},
new TestPerson{Id=6, Email="bambam@rubble.com", First="BamBam", Last="Rubble", countries= new List<int>(){5,1,4}},
new TestPerson{Id=7, Email="pebbles@flintstone.com", First="Pebbles", Last="Flintstone", countries= new List<int>(){2,1}},
new TestPerson{Id=8, Email="barney@rubble.com", First="Barney", Last="Rubble", countries= new List<int>(){3}},
new TestPerson{Id=9, Email="betty@rubble.com", First="Betty", Last="Rubble", countries= new List<int>(){2,5}},
new TestPerson{Id=10, Email="bambam@rubble.com", First="BamBam", Last="Rubble", countries= new List<int>(){5,4,2}}
};
}

}

public static List<TestPerson> Storage
{
get
{
var persons = HttpContext.Current.Session["TestPersons"];

if (persons == null)
{
persons = TestPerson.TestData;
HttpContext.Current.Session["TestPersons"] = persons;
}

return (List<TestPerson>)persons;
}
set
{
HttpContext.Current.Session["TestPersons"] = value;
}
}

public static void Clear1()
{
TestPerson.Storage = null;
}


public static Paging<TestPerson> PlantsPaging(StoreRequestParameters parameters)
{
return TestPerson.PlantsPaging(parameters.Start, parameters.Limit, parameters.SimpleSort, parameters.SimpleSortDirection, null);
}

public static Paging<TestPerson> PlantsPaging(int start, int limit, string sort, SortDirection dir, string filter)
{
List<TestPerson> plants = TestPerson.Storage;
var pagedPersons = plants.Skip(start).Take(limit).ToList();

return new Paging<TestPerson>(pagedPersons, 10);
}
}

Daniil
May 20, 2014, 3:02 PM
Hi @RajivDutt,

You create all records with the same Id.

this.Id = 0;

But you use Id as IDProperty. It must be unique.

RajivDutt
May 20, 2014, 3:33 PM
Hi @Daniil,


Hi @RajivDutt,

You create all records with the same Id.

this.Id = 0;

But you use Id as IDProperty. It must be unique.

Please find the updated code:




@{
var storeEmployee = X.Store()
.ID("storeEmployee")
.AutoLoad(true)
.PageSize(5)
.RemoteSort(true)
.Proxy(X.AjaxProxy().Url(Url.Action("Read")).Reader(X.JsonReader().Root("data")))
.Model(X.Model()
.Fields(
Html.X().ModelField().Name("Id").Mapping("Id"),
Html.X().ModelField().Name("Email").Mapping("Email").SortType(Ext.Net.SortTypeMethod.AsUCString),
Html.X().ModelField().Name("First").Mapping("First").SortType(Ext.Net.SortTypeMethod.AsUCString),
Html.X().ModelField().Name("Last").Mapping("Last"),
Html.X().ModelField().Name("Salary").Mapping("Salary")
));
}
@(
Html.X().GridPanel()
.Border(true)
.ColumnLines(true)
.RowLines(true)
.Cls("grid-sample")
.ID("gridEmployee")
.Width(500)
.Store(storeEmployee)
.ColumnModel(
X.Column().ID("col1").DataIndex("Id").Text("Id").Hidden(false).Width(20).TdCls("first-row"),
X.Column().DataIndex("Email").Width(150).Text("Email").Sortable(true).MenuDisabled(true).Draggable(fals e)
.Editor(
Html.X().TextField().AllowBlank(false).StandardVty pe(ValidationType.Email)
.SelectOnFocus(true)
),
X.Column().DataIndex("First").Text("First").Sortable(true).MenuDisabled(true).Draggable(fals e)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFoc us(true).Disabled(true)
),
X.Column().DataIndex("Last").Text("Last").Sortable(true).MenuDisabled(true).Draggable(fals e).Disabled(false)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFoc us(true).Disabled(false)
),
X.Column().DataIndex("Salary").Text("Salary").Sortable(true).MenuDisabled(true).Draggable(fals e).Disabled(false)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFoc us(true).Disabled(false)
)
)
.SelectionModel(Html.X().CellSelectionModel().Auto DataBind(true).AllowDeselect(true).Clear().EnableK eyNav(true).Listeners(s => s.Select.Handler = "selectMe()"))
.BottomBar(
Html.X().PagingToolbar().ID("editList"))
.Plugins(
Html.X().RowEditing().AutoCancel(false).ErrorSumma ry(false)
.DirectEvents(de =>
{
de.Edit.Before = "return FieldValidation(el,type,action,extraParams,o)";
de.Edit.Url = Url.Action("SaveTardingReason");
de.Edit.ExtraParams.Add(new Parameter
{
Name = "data",
Value = "getData()",
Mode = ParameterMode.Raw,
Encode = true
});
de.Edit.Method = HttpMethod.POST;
de.Edit.Success = " Ext.net.Notification.show({ title: 'Update', html: 'Success' });";
de.Edit.Failure = " Ext.net.Notification.show({ title: 'Update', html: 'Failed' });";
// de.Edit.EventMask.Msg = "Saving...";
})
.Listeners(l =>
{
l.CancelEdit.Handler = "if(e.record.phantom){e.store.remove(e.record);} cancelEdit();";
//l.ValidateEdit.Handler = "v";
l.BeforeEdit.Handler = "beforeEdit();";
l.Edit.Handler = "Edit();";
})
)
.TopBar(
Html.X().Toolbar()
.Items(
Html.X().Button()
.Text("Add")
.Icon(Icon.Add)
.Handler("this.up('grid').store.insert(0, new LoadTestPerson());this.up('grid').store.commitChan ges();"),

Html.X().Button()
.ItemID("btnRemove")
.Text("Delete")
.Icon(Icon.Exclamation)
.Handler("this.up('grid').deleteSelected();")
)
)
)
<script type="text/javascript">
var selectedRow = 0;
var personID = 100;
function fetchID()
{
personID = personID + 1;
return personID;
}

function LoadTestPerson()
{
this.Id = fetchID();
this.Email = "";
this.First = "";
this.Last = "";
this.Salary = 0.00;
}

function selectMe()
{
if (App.gridEmployee.getSelectionSubmit().selModel.se lected.length > 0)
{
selectedRow = App.gridEmployee.getSelectionSubmit().selModel.sel ected.items[0].index;
//var currentPage = App.store1.currentPage;
var pageSize = App.storeEmployee.pageSize;
selectedRow = (selectedRow % pageSize);// * currentPage) + (selectedRow - pageSize);
}
else
selectedRow = 0;

$(".selected-grid-cell").removeClass('selected-grid-cell');
$(".x-grid-cell-selected").removeClass('x-grid-cell-selected');
var firstCell = App.gridEmployee.getView().getCell(App.gridEmploye e.store.getAt(selectedRow), App.gridEmployee.columns[0]);
$(firstCell.dom).addClass("selected-grid-cell");

var selectedCell = App.gridEmployee.view.getCellByPosition(App.gridEm ployee.getSelectionModel().getCurrentPosition());
if (selectedCell)
{
selectedCell.addCls('x-grid-cell-selected');
}
}

function beforeEdit()
{
//switchGridSort(false);
//switchGridPaging(true);
App.gridEmployee.getSelectionSubmit().selModel.des electAll();
$(".selected-grid-cell").removeClass('selected-grid-cell');
$(".x-grid-cell-selected").removeClass('x-grid-cell-selected');
App.gridEmployee.getSelectionModel().setLocked(tru e);
}

function GridEditComplete(grid)
{
grid.editingPlugin.completeEdit();
}

function Edit()
{
var grid = App.gridEmployee;
//switchGridSort(true);
//switchGridPaging(false);
grid.getSelectionSubmit().selModel.deselectAll();
grid.getSelectionModel().setLocked(false);
GridEditComplete(grid);
grid.getView().focusRow(selectedRow);
grid.getSelectionModel().select(selectedRow);
//setSelectedRow(App.gridEmployee);
//GridEditComplete(grid);
//grid.getSelectionModel().select(selectedRow);
//Grid.getSelectionModel().select(selectedRow);
}

function cancelEdit()
{
var grid = App.gridEmployee;
//switchGridSort(true);
//switchGridPaging(false);
grid.getSelectionSubmit().selModel.deselectAll();
grid.getSelectionModel().setLocked(false);
//setSelectedRow(App.gridEmployee);
GridEditComplete(grid);
grid.getView().focusRow(selectedRow);
grid.getSelectionModel().select(selectedRow);
//setSelectedRow(App.gridEmployee);
}

var FieldValidation = function (el, type, action, extraParams, o)
{
if (!App.storeEmployee.isDirty())
{
//selectedRow++;

var Grid = App.gridEmployee;
var GridStore = Grid.store;

//if (selectedRow >= GridStore.pageSize || selectedRow >= GridStore.data.length)
// selectedRow = 0;
Grid.getView().focusRow(selectedRow);
Grid.getSelectionModel().select(selectedRow);

return false;
}
}
function getData()
{
return App.storeEmployee.getChangedData();
}
Ext.grid.RowEditor.override({
beforeEdit: function ()
{
var me = this,
scrollDelta;

//if (me.isVisible() && me.errorSummary && !me.autoCancel && me.isDirty()) {
if (me.isVisible() && !me.autoCancel && me.isDirty())
{
scrollDelta = me.getScrollDelta();
if (scrollDelta)
{
me.scrollingViewEl.scrollBy(0, scrollDelta, true)
}
//me.showToolTip();
return false;
}
}
});
</script>
<style type="text/css">
.selected-grid-cell {
background-color: #0096FF !important;
}

.grid-sample .x-grid-cell-selected {
background-color: #ffffff !important;
border: #0096ff 1px solid !important;
}


.grid-sample .x-grid-cell-selected:focus {
background-color: #0096ff!important;
}


.grid-sample .x-grid-view {
overflow: hidden !important;
}

.first-row .x-item-disabled {
border: 0px !important;
}

.grid-sample .x-btn-default-small-noicon .x-btn-inner {
line-height: 18px !important;
}

.grid-sample .x-grid-cell-inner {
padding: 3px 6px 4px !important;
}

.selected-grid-cell {
background-color: #0096FF !important;
}
</style>


Controller

public ActionResult Read(StoreRequestParameters parameters)
{
return this.Store(TestPerson.PlantsPaging(parameters));
}

Model

public class TestPerson
{
[ModelField(IDProperty = true, UseNull = true)]
[Field(Ignore = true)]
public int? Id
{
get;
set;
}

[EmailValidation]
[PresenceValidation]
public string Email
{
get;
set;
}

[PresenceValidation]
public string First
{
get;
set;
}

[PresenceValidation]
public string Last
{
get;
set;
}

[PresenceValidation]
public List<int> countries
{
get;
set;
}

private static int curId = 7;
private static object lockObj = new object();

private static int NewId
{
get
{
return System.Threading.Interlocked.Increment(ref curId);
}
}

public static List<TestPerson> TestData
{
get
{
return new List<TestPerson>
{
new TestPerson{Id=1, Email="fred@flintstone.com", First="Fred", Last="Flintstone", countries= new List<int>(){1,2}},
new TestPerson{Id=2, Email="wilma@flintstone.com", First="Wilma", Last="Flintstone", countries= new List<int>(){2,3}},
new TestPerson{Id=3, Email="pebbles@flintstone.com", First="Pebbles", Last="Flintstone", countries= new List<int>(){1,4,5}},
new TestPerson{Id=4, Email="barney@rubble.com", First="Barney", Last="Rubble", countries= new List<int>(){2}},
new TestPerson{Id=5, Email="betty@rubble.com", First="Betty", Last="Rubble", countries= new List<int>(){4}},
new TestPerson{Id=6, Email="bambam@rubble.com", First="BamBam", Last="Rubble", countries= new List<int>(){5,1,4}},
new TestPerson{Id=7, Email="pebbles@flintstone.com", First="Pebbles", Last="Flintstone", countries= new List<int>(){2,1}},
new TestPerson{Id=8, Email="barney@rubble.com", First="Barney", Last="Rubble", countries= new List<int>(){3}},
new TestPerson{Id=9, Email="betty@rubble.com", First="Betty", Last="Rubble", countries= new List<int>(){2,5}},
new TestPerson{Id=10, Email="bambam@rubble.com", First="BamBam", Last="Rubble", countries= new List<int>(){5,4,2}}
};
}

}

public static List<TestPerson> Storage
{
get
{
var persons = HttpContext.Current.Session["TestPersons"];

if (persons == null)
{
persons = TestPerson.TestData;
HttpContext.Current.Session["TestPersons"] = persons;
}

return (List<TestPerson>)persons;
}
set
{
HttpContext.Current.Session["TestPersons"] = value;
}
}

public static void Clear1()
{
TestPerson.Storage = null;
}


public static Paging<TestPerson> PlantsPaging(StoreRequestParameters parameters)
{
return TestPerson.PlantsPaging(parameters.Start, parameters.Limit, parameters.SimpleSort, parameters.SimpleSortDirection, null);
}

public static Paging<TestPerson> PlantsPaging(int start, int limit, string sort, SortDirection dir, string filter)
{
List<TestPerson> plants = TestPerson.Storage;
var pagedPersons = plants.Skip(start).Take(limit).ToList();

return new Paging<TestPerson>(pagedPersons, 10);
}
}

Daniil
May 21, 2014, 6:03 AM
A JavaScript occurs in the selectMe method. If you debug it, you would see that "selectedRow" is NaN for a new row.

I think the problem is here.

selectedRow = App.gridEmployee.getSelectionSubmit().selModel.sel ected.items[0].index;

Please try

selectedRow = App.gridEmployee.getStore().indexOf(App.gridEmploy ee.getSelectionSubmit().selModel.selected.items[0]);

In the future please don't rely on a record's index property.