Hi Daniil,
Originally Posted by
Daniil
Hi @RajivDutt,
Please clarify how do you do that?
Please check the following code snippets.
@{
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(false)
.Editor(
Html.X().TextField().AllowBlank(false).StandardVtype(ValidationType.Email)
.SelectOnFocus(true)
),
X.Column().DataIndex("First").Text("First").Sortable(true).MenuDisabled(true).Draggable(false)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFocus(true).Disabled(true)
),
X.Column().DataIndex("Last").Text("Last").Sortable(true).MenuDisabled(true).Draggable(false).Disabled(false)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFocus(true).Disabled(false)
),
X.Column().DataIndex("Salary").Text("Salary").Sortable(true).MenuDisabled(true).Draggable(false).Disabled(false)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFocus(true).Disabled(false)
)
)
.SelectionModel(Html.X().CellSelectionModel().AutoDataBind(true).AllowDeselect(true).Clear().EnableKeyNav(true).Listeners(s => s.Select.Handler = "selectMe()"))
.BottomBar(
Html.X().PagingToolbar().ID("editList"))
.Plugins(
Html.X().RowEditing().AutoCancel(false).ErrorSummary(false)
.DirectEvents(de =>
{
de.Edit.Before = "return FieldValidation(el,type,action,extraParams,o)";
de.Edit.Url = Url.Action("SaveEmployee");
de.Edit.ExtraParams.Add(new Parameter
{
Name = "data",
Value = "getData()",
Mode = ParameterMode.Raw,
Encode = true
});
de.Edit.Method = HttpMethod.POST;
de.Edit.Success = "displayResult(result)";
de.Edit.Failure = "displayErrorResult(result)";
})
.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.commitChanges();"),
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.selected.length > 0)
{
//App.gridEmployee.getSelectionSubmit().selModel.selected.items[0].index;
selectedRow = App.gridEmployee.getStore().indexOf(App.gridEmployee.getSelectionSubmit().selModel.selected.items[0]);
//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.gridEmployee.store.getAt(selectedRow), App.gridEmployee.columns[0]);
$(firstCell.dom).addClass("selected-grid-cell");
var selectedCell = App.gridEmployee.view.getCellByPosition(App.gridEmployee.getSelectionModel().getCurrentPosition());
if (selectedCell)
{
selectedCell.addCls('x-grid-cell-selected');
}
}
function beforeEdit()
{
//switchGridSort(false);
//switchGridPaging(true);
App.gridEmployee.getSelectionSubmit().selModel.deselectAll();
$(".selected-grid-cell").removeClass('selected-grid-cell');
$(".x-grid-cell-selected").removeClass('x-grid-cell-selected');
App.gridEmployee.getSelectionModel().setLocked(true);
}
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 Ext.StoreMgr.getByKey('storeEmployee').getChangedData();
}
function displayResult(result)
{
Ext.net.Notification.show({ title: 'Update successful', html: result.message });
}
// Do not close the Row Over Editor and do not allow other rows to be edited
function displayErrorResult(result)
{
Ext.net.Notification.show({ title: 'Update Failed', html: result.message });
}
Ext.grid.RowEditor.override({
beforeEdit: function (e)
{
//console.log(this.context.rowIdx);
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>
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 DateTime DateOfBirth
{
get;
set;
}
[PresenceValidation]
public double Salary
{
get;
set;
}
[PresenceValidation]
public string 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", DateOfBirth = new DateTime(1965, 10, 06), Salary=654560.00,countries= "2"},
new TestPerson{Id=2, Email="wilma@flintstone.com", First="Wilma", Last="Flintstone", DateOfBirth = new DateTime(1965, 10, 06),Salary=50565.59,countries= "3"},
new TestPerson{Id=3, Email="pebbles@flintstone.com", First="Pebbles", Last="Flintstone", DateOfBirth = new DateTime(1965, 10, 06), Salary=50565.59, countries= "5"},
new TestPerson{Id=4, Email="barney@rubble.com", First="Barney", Last="Rubble", DateOfBirth = new DateTime(1965, 10, 06),Salary=46565.09,countries= "2"},
new TestPerson{Id=5, Email="betty@rubble.com", First="Betty", Last="Rubble", DateOfBirth = new DateTime(1965, 10, 06),Salary=57567.59,countries= "4"},
new TestPerson{Id=6, Email="bambam@rubble.com", First="BamBam", Last="Rubble", DateOfBirth = new DateTime(1965, 10, 06),Salary=2000.5798,countries= "4"},
new TestPerson{Id=7, Email="pebbles@flintstone.com", First="Pebbles", Last="Flintstone", DateOfBirth = new DateTime(1965, 10, 06),Salary=2000.5454,countries= "1"},
new TestPerson{Id=8, Email="barney@rubble.com", First="Barney", Last="Rubble", DateOfBirth = new DateTime(1965, 10, 06),Salary=442000.00,countries= "3"},
new TestPerson{Id=9, Email="betty@rubble.com", First="Betty", Last="Rubble",DateOfBirth = new DateTime(1965, 10, 06), Salary=5400.00,countries= "5"},
new TestPerson{Id=10, Email="bambam@rubble.com", First="BamBam", Last="Rubble", DateOfBirth = new DateTime(1965, 10, 06), countries= "4"},
};
}
}
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 void UpdatePerson(TestPerson person)
{
lock (lockObj)
{
var persons = TestPerson.Storage;
TestPerson updatingPerson = null;
foreach (TestPerson p in persons)
{
if (p.Id == person.Id)
{
updatingPerson = p;
break;
}
}
if (updatingPerson == null)
{
throw new Exception("TestPerson not found");
}
updatingPerson.Email = person.Email;
updatingPerson.Last = person.Last;
updatingPerson.First = person.First;
TestPerson.Storage = persons;
}
}
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);
}
}
Conroller
public ActionResult Read(StoreRequestParameters parameters)
{
return this.Store(TestPerson.PlantsPaging(parameters));
}
[HttpPost]
public RestResult SaveEmployee(StoreDataHandler changedData)
{
// Validations to be added later.
return new RestResult
{
Success = false,
Message = "Person could not be updated."
};
}
As you can see we are using a Direct event to validate the row data and returns the status as success/error details.
In case of an error, the row over editor should not be cancelled nor the user should be allowed to edit the other rows as well.
Please suggest, how can I force edit plugin not to go away, until data is not valid.
Thanks,
Rajiv Dutt
